What’s New on The Facebook Platform

Iskandar Najmuddin18th May 2011Facebook Developer Garage London

Facebook Developer Garage London

WHOA

3

MY TOKEN IS LEAKING

The Problem

Access token referrer-leakage with old Auth flow:

•3rd party sites getting user access_tokens via HTTP_REFERER

The Solution

•OAuth 2.0 (deadline September 1st)

•HTTPS (deadline October 1st)

Huh? Start here: https://developers.facebook.com/docs/authentication/

The Workaround

•Legacy Auth: interstitial page

The Help

•Updated PHP & JS SDKs coming July 1st

The Great HTTPS & OAuth 2.0 Requirement of 2011

4

KNOW THE FLOW

AKA authentication code flow in the OAuth draft spec.

1. You redirect user to FB OAuth dialog (with scope & redirect):

https://www.facebook.com/dialog/oauth?

client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream&

state=YOUR_ANTI_CSRF_TOKEN

2. After auth, FB redirects user to you with an auth code (or error details):

http://YOUR_URL?code=A_CODE_GENERATED_BY_FB&state=YOUR_ANTI_CSRF_TOKEN

3. You redeem code for an access_token:

https://graph.facebook.com/oauth/access_token?     client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&     client_secret=YOUR_APP_SECRET&code=A_CODE_GENERATED_BY_FB_AS_ABOVE

Notice how the access_token never surfaces in the browser? #Winning!

OAuth 2.0 – Server Side Flow

5

FLOW ME DOWN

1. You redirect user to FB OAuth dialog with response_type=token:

https://www.facebook.com/dialog/oauth?

client_id=YOUR_APP_ID&redirect_uri=YOUR_URL&scope=email,read_stream&

response_type=token

2. After auth, FB redirects user to you with an access_token in the URL fragment:

http://YOUR_URL#access_token=ACCESS_TOKEN

3. Use your access_token in the browser:

var accessToken = window.location.hash.substring(1);

// Do stuff with accessToken

The URL fragment won’t appear to your web server in any CGI vars. #Winning!

OAuth 2.0 – Client Side Flow

6

HOW FLOW CAN YOU GO?

What’s “Legacy”? •If you redirect to https://www.facebook.com/login.php?blah

•Anyone get a “48-hour” email from FB?

The Workaround

1.You supply the interstitial page as the redirect_uri

– No 3rd-party content allowed on this page!

2.Post-auth, FB redirects user to interstitial page

– You store FB session data and then…

3.You redirect user to your normal landing page

– After stripping out any FB-related query vars

More detail: https://developers.facebook.com/docs/authentication/connect_auth/

Legacy Flow Workaround

7

VIDEO UPLOAD

• Post to https://graph-video.facebook.com/me/videos– Not graph.facebook.com, mkay?

– Form enctype must be multipart/form-data

– Data expected in file var

• Doesn’t work for Pages… yet.

PHP example$post_url = "https://graph-video.facebook.com/me/videos?"

  . "title=" . $video_title. "&description=" . $video_desc

  . "&". $access_token; 

echo '<form enctype="multipart/form-data" action="'.$post_url.'

"method="POST">';

echo 'Please choose a file:';

echo '<input name="file" type="file">';

echo '<input type="submit" value="Upload" />';

echo '</form>'

Upload Video via Graph API

8

TO THE BATCH-CAVE

•Post to graph.facebook.com for Batch Requests

•Batch calls might look like this:[

{ "method": "POST", "relative_url": "me/photos", "body": "message=My cat photo", "attached_files": "file1" },

{ "method": "POST", "relative_url": "me/photos", "body": "message=My dog photo", "attached_files": "file2" }

]

Where file1 and file2 are multipart/mime property names

•Remember, max 20 batch calls per request

Batch Photo Uploads

9

TO THE BATCH-CAVE

cURL FTW$ curl -F  "access_token=$TOKEN" \

     -F  'batch=[{"method":"POST", "relative_url":"me/photos",

                "body":"message=FDGL Logo", "attached_files":"logo"},

                {"method":"POST", "relative_url":"me/photos",

                "body":"message=Gadfly Column", "attached_files":"clipping"}]' \

     -F 'logo=@fdgl-logo.jpg' -F 'clipping=@fdgl-clipping.jpg' \

    https://graph.facebook.com

Batch Photo Upload Example

Result•JSON response with FB photo IDs

•New Album created

•“Pending” because publish_stream permission not granted

10

DARLING, YOU SEND ME

A new Social Plugin•“Because Sometimes It’s Private”1

•XFBML & JS SDK required

•Has API access for stats

– views, clicks, inbox_views, inbox_clicks

•JS event ‘message.send’ for FB.Event.Subscribe

•Get your OG Metadata right!

Add to Like Button<div id="fb-root"></div><script src="http://connect.facebook.net/LOCALE/all.js#xfbml=1"></script><fb:like href="example.com" …… send="true"></fb:like>

Or Standalone<div id="fb-root"></div>

<script src="http://connect.facebook.net/LOCALE/all.js#xfbml=1"></script>

<fb:send href="example.com"></fb:send>

The Send Button

1. http://developers.facebook.com/blog/post/494/

11

DON’T GET TESTY

Test Users•Limit per app raised to 500

•Get email & password in create response

•Change password via API

Re-authentication•Get user to re-authenticate just in case

•Force HTTPS

•An “F-Commerce” enabler

•See http://developers.facebook.com/docs/reauthentication/

Permissions via Graph API•A new connection: permissions

– https://graph.facebook.com/me/permissions?access_token=TOKEN

•Previously fetchable via FQL

Other API Updates

12

GUNS AND BUTTER

Promotions Policy

The Land of Do-as-you-please?

•Blanket promotion type ban lifted•Following local legal requirements is now down to the promoters

• Enough rope to hang ourselves

Promotions types allowed•Alcohol•Gambling•Firearms•Gasoline. •And cheese.

o My life is complete.

Iskandar NajmuddinTechnical Services DirectorSyncapsei.najmuddin@syncapse.comtwitter.com/iskandar+44.207.096.0146

Thank You

Yearning, burning questions? Ask me stuff at the break.