JAM337_presentation

Integrating with Social Networks
JAM337
Luca Filigheddu, BlackBerry- @filos
Kyle Fowler, Foursquare - @kfow35
5 – 6 February, 2013
BlackBerry Ecosystem
Social. Thriving.
 80+ million users world wide
 60 million BBM users
 60 million BlackBerry Facebook app users
2
Broad Social Support
Leverage our full ecosystem
PlayBook OS
BlackBerry 10
BlackBerry 6+
3
BlackBerry 10
Emphasizing connected, socialized apps
Collaborate, Share, Succeed
4
BlackBerry Users Are Highly Social
Are your apps?
5
Socialized Apps




Instant communication adds value
Users help sell your apps
You can make more money
And… you can make more money
 87% of people who use BB connect to social networks
 63% on average
 Apps connected to social networks get downloaded 15
times more (on average)
6
BlackBerry 10 Loves HTML5
 Amazingly full support for open
web standards like web sockets
and OAuth
 Open source, even WebWorks
layer itself
 Access the BlackBerry Messenger
API (BBM)
7
OAuth
Working with social APIs
8
Framing the problem
 Posting a message to Twitter from an app

Whose Twitter credentials should be used?
9
Security
 If I have your key

I can access anything you can with this key
 If I have a limited control key

I can access only resources that you allow
10
Valet Key = Controlled Access
 Authentication

Used to access a protected resource
 Authorization

Grants a second party limited access
to functionality
Image credit: http://www.audizine.com
11
OAuth
 What is OAuth?

The “Valet Key” of the web
 An open standard for authorization



Use authenticated tokens instead of passwords
OAuth version 1.0 and 2.0 available
Precursor: Open ID
Photo credit: http://wiki.oauth.net/w/page/12238520/Logo
12
OAuth Service Providers *
 OAuth 1:







Dropbox
Flickr
OpenTable
Tumblr
Twitter
Vimeo
Yelp
 OAuth 2:









*As of Sept 20, 2012
App.net
bitly
Facebook Graph API
Foursquare
Github
Google APIs
Salesforce
Sina Weibo
Yammer
13
OAuth summarized

Authentication
 Redirect a client to a remote login page
 Client is authenticated on the remote site
 Client is redirected back with token info

Authorization
 Provide valid token info when accessing
secured services from remote site
 User remains authorized while the token info
is valid.
14
OAuth 1 : Authentication
App
1
Token request
AJAX: url
3
Redirect user
Redirect: url? request_token
2
Generate token
Service
Response = request_token
4
User Login
5
Request Access
Tokens
AJAX: url? auth_verifier &
request_token
7
Save tokens
Redirect: callback url? auth_
token & auth_verifier
6
Authorize App
Response = auth_token &
auth_token_secret
auth_token
auth_token_secret
15
OAuth 1 : Authorization
Public API
App
Service
App
Secure API
auth_token
auth_token_secret
16
Isn’t that a bit much?
Photo credits: http://hueniverse.com
17
OAuth 2 : Authentication
App
client_id
client_secret
Service
client_id
callBackUrl
1
Redirect user
Redirect: url?client_id
2
User Login
3
Request Access
Token
AJAX: url?client_id & auth_code &
client_secret
5
Save token
Redirect: callBackUrl ? auth_code
4
Authorize App
Response = access_token
OAuth 2 : Authorization
App
Public API
Service
App
Secure API
access_token
19
Still feels complicated …
Image credit:
http://www.codinghorror.com/blog/2005/04/rube-goldberg-software-devices.html
20
jsOAuth
 A JavaScript library that makes OAuth1 easy



Rob Griffiths (http://bytespider.eu)
https://github.com/bytespider/jsOAuth
MIT License
var requestURL = 'https://api.twitter.com/oauth/request_token';
var twitter = OAuth({ consumerKey
: '123456789',
consumerSecret : 'ABCDEFGHI',
callbackUrl
: 'local:///index.html' });
twitter.get(requestURL, onSuccessRedirectToAuthenticate, onFail);
21
Child browser
 HTTP redirects can be problematic


Service may not allow redirect to ‘local:///’ page
How to get auth code from service without using redirects?
 “Child browser” web view:




Create a second web view
Load remote login page
Read HTTP response info
Close the child browser view
http://lemmaforplaybook.com
22
Child browser in BlackBerry 10
 New WebView automatically displayed in the app


window.open()
target=“_new”
var link = document.getElementById('vBlank');
link.addEventListener('click', function(e) {
e.preventDefault();
childWindow = window.open('http://developer.blackberry.com', '_blank');
});
 childBrowser sample app

https://github.com/blackberry/BB10-WebWorks-Samples
23
Open Source Samples
 Sample code available for developers

https://www.github.com/blackberry/BB10-WebWorks-Samples
 OAuth 1

Twitter http://bit.ly/Tw-Oauth-WebWorks
 OAuth 2


Facebook: http://bit.ly/WebWorks-FB-Oauth
Foursquare: http://bit.ly/4sq-OAuth
24
BBM API for WebWorks
Deep integration into our messaging solution
isn’t just for native apps
25
Messaging API for HTML5!?
Built in and ready to rock
Yo!
Sup?
BlackBerry 10!
26
BBM and WebWorks






Invitations to BBM and your apps
User status changes
Splat notifications
Sharing content
Permissions
Messaging (of course!)
27
Sharing your apps
//BBM Invite to download feature:
//
Open a contact picker dialog window
//
User can select BBM contacts to invite to download
function inviteFriend() {
blackberry.bbm.platform.users.inviteToDownload( function(result) {
if(result == "limitreached") {
alert("Whoah! That’s 10 invites in 1 minute. Limit exceeded.");
} else {
alert("Thank you for your support");
unlockAchievement("Invited friend to download");
}
});
}
28
Message Processing
function notificationLaunchBrowser() {
var title = "New BlackBerry blog article published";
var options = {
target
: "sys.browser",
targetAction : "bb.action.OPEN",
payloadType : "text/html",
payloadURI
: "http://devblog.blackberry.com"
}
// Adds a new notification to the UIB.
// When the user opens this notification item from the UIB,
// it will invoke the browser with "the link"
return new Notification(title, options);
}
29
Games
Socializing your entertainment apps
30
Single Player GamezZZZzz…
Limited replay value
How many times can I
fling birds into a wall?
Would be great to have
a friend to play with.
Also, I’m talking to
myself.
31
BBM and Games
Now we’re talkin’
Would you like to play a
game?
Let’s play “Global
Thermonuclear War”!
How about a nice game
of Chess?
32
HTML5 Games and BBM
Just too easy
 Chat during the games
 Leverage message protocol for turn based games
 Viral effect of inviting BBM friends to get your apps
33
HTML5 Games and OAuth
Buzz, buzz, buzz
Hello world! I just beat
Jamie at Chess!
Using BlackBerry 10
and that awesome app?
That sounds amazing!
Do Want!!
34
HTML5 Games and OAuth
Talking to the world outside
 Post achievements and links to your game
 Cultivate some buzz all over the Internets
35
Socializing All Your Apps
No more “i”Solation
36
Socializing Your Apps
Connect, share, succeed
 Connect with integrated instant messaging to 60 million
users*
 Share your app over BBM to nearly 80 million users*
 Succeed by bringing in new users from other platforms
using web standards like OAuth
* And growing
37
Make users share content
Invoke!
38
People love to share
 Make users easily share content from your app
 You get it out of the box
this.invoke = function (key) {
self.hide();
blackberry.invoke.invoke({
target: key,
data: app.common.shareText(),
action: "bb.action.SHARE",
type: 'text/plain'
});
};
39
How Foursquare did it!
Invoke!
40
How Do We Do It?
 25 million users & over 3 billion checkins – That’s a lot
of data to share!
 Foursquare uses sharing to increase virality and keep
people coming back to the app from different sources
 We share in every possible way:




Invoke
BBM
OAuth1
OAuth2
41
Invocation
 Take advantage of the social nature built right into
BlackBerry 10
 Share a message, image or link from your app.
InvokeActionItem* ai = InvokeActionItem::create(
InvokeQuery::create().mimeType("text/plain").data(“check out my 4sq checkin
here http://foursquare.com/mycheckin” ).invokeActionId("bb.action.SHARE")
);
addAction(ai, ActionBarPlacement::OnBar);
InvokeActionItem* ai = InvokeActionItem::create(
InvokeQuery::create().mimeType(”image/jpeg").uri(file:///myimage.png).invokeA
ctionId(“bb.action.SHARE”);
);
*Bonus points: Register an invoke target for the URI that you share and have your app open when
the shared link is clicked to get people back into your app!
42
BBM Integration
 200k app downloads the day we released BBM
connected
 Keep your app at the front of people’s mind as they see
friends BBM statuses by updating the user personal
message
bb::platform::bbm::UserProfile* profile = new bb::platform::bbm::UserProfile(_context), this);
profile->requestUpdatePersonalMessage(‘@ Jam Europe – Amsterdam’);
43
Twitter & Facebook
 Connect your Foursquare account to
Twitter and Facebook in the native app
 Server side back-end handles the actual
sharing to these networks
 Clients handle authentication, obtain
tokens and send them back to server
 Some benefits of this approach:



Can keep you client codebase smaller, fewer
libraries
Can automate sharing based on actions a lot
easier
Conserve network resources possibly
44
Twitter & Facebook
 OAuth1 (Twitter)


Open source library bb-cascades-oauth
(http://github.com/blackberry/bb-cascades-oauth )
Some samples at http://github.com/kylefowler/
void TwitterApi::getAccess()
{
connect(oauthManager, SIGNAL(temporaryTokenReceived(QString,QString)), this,
SLOT(onTemporaryTokenReceived(QString, QString)));
connect(oauthManager, SIGNAL(authorizationReceived(QString,QString)), this, SLOT(
onAuthorizationReceived(QString, QString)));
connect(oauthManager, SIGNAL(accessTokenReceived(QString,QString)), this,
SLOT(onAccessTokenReceived(QString,QString)));
oauthRequest->initRequest(KQOAuthRequest::TemporaryCredentials,
QUrl("https://api.twitter.com/oauth/request_token"));
}
45
Twitter & Facebook
 OAuth2 (Facebook)

Use Cascades WebView to handle the auth
WebView {
objectName: "fbWebView“
url: http://m.facebook.com/dialog/oauth?
client_id=XXXX&display=touch&redirect_uri=http://www.facebook.com/connect/
login_success.html&response_type=token
settings.javaScriptEnabled: true;
onNavigationRequested: {
//parse the access_token out of the request url
if (facebookPage.hasFacebookToken(request.url)) {
request.action = WebNavigationRequestAction.Ignore
} else {
request.action = WebNavigationRequestAction.Accept
}
}
}
46
THANK YOU
JAM337
Luca Filigheddu @filos
Kyle Fowler @kfow35