JavaScript changes for Facebook’s OAuth 2.0 upgrade

Posted: September 16, 2011 | Author: Nathan Friedly | Filed under: Engineering | Tags: Facebook, JavaScript, JS SDK, OAuth 2.0 |6 Comments »

Facebook is upgrading their platform authentication system to OAuth 2.0. During the transition time, both the new system and the old system are supported, however, starting October 1st, 2011 the old authentication system will no longer be supported. Any apps that depend on it will stop working.

Update: Facebook missed their original cutoff date, however as of December 13, 2011, all apps are now forced to OAuth 2.0 and apps that depend on the older system no loner work.

Facebook initially announced this on May 10th, and later put out updated information once the various SDKs had been upgraded to support the new system. However, details on what code changes were necessary to support the new system were fairly limited.

This post covers every change we’ve come across so far to support OAuth 2.0 with FB’s JS SDK…

• In your FB.init({...}) options, add the new oauth: true parameter to begin using OAuth 2.0 immediately.
• In the response object that is passed to FB.login() and FB.getLoginStatus() callbacks, session is now authResponse, and every single field has been renamed or removed.
  • The old response object looked like this:

    {
        "status":"connected",
        "session": {
            "access_token":"asdf",
            "uid":"1234",
            "expires":1315364400,
            "sig":"asdf",
            "base_domain":"mysite.com",
            "session_key":"asdf",
            "secret":"asdf"
        }
    }

  • The new response object looks like this:

    {
        "status": "connected",
        "authResponse": {
          "accessToken": "asdf",
          "userID": "1234",
          "expiresIn": 1315364400,
          "signedRequest": "asdf"
       }
    }

• FB.getSession() is now FB.getAuthResponse(); the old method will throw an error.
• The auth.sessionChange event is now auth.authResponseChange. Subscribing to the old event won’t throw any errors, but it won’t ever fire.
• The “notConnected” status is now “not_authorized“.
  • The three states of response.status are now “connected“, “not_authorized“, and “unknown“.
    Note: As of 9/19/2011, Facebook’s documentation on this is incorrect – it still lists the “not_authorized” status as “notConnected”. There is a bug filed for this.
• In FB.login(callback, options), options.perms is now options.scope. If you include an options.perms, it will thrown an error.
• FB.login() and FB.getLoginStatus() no longer ever include the user’s permissions in the response object passed to the callback.
  • To work around this, do the following:

    FB.api('/me/permissions', function(response){console.log(response.data[0]);})

    In the callback, response.data[0] will be a JS object along the lines of:

    {
        "installed":1,
        "status_update":1,
        "photo_upload":1,
        "video_upload":1,
        "create_note":1,
        "share_item":1
    }

  • If you need this to be synchronous, you could grab that once when the user first logs in and then store it locally. (This is useful to avoid the annoying popup window that FB.login() opens and then immediately closes if the user has already granted you the requested permissions.)
• The cookie name has changed from 'fbs_' + APP_ID to 'fbsr_' + APP_ID, it’s content has changed to only include the signedRequest from the new authResponse object, and it is now set for the session only.
  • (This is helpful in JavaScript for getting an idea of whether or not the user is logged in before FB’s JS SDK has loaded and initialized. The presence of this cookie generally means that the user is logged in and has authorized your app. However, it will initially be absent on the first pageview of each browsing session.)

We’ll have a follow-up post soon that covers the server-side of the upgrade.
Update: It’s posted: Server Side changes for Facebook’s OAuth 2.0 upgrade

---

Sociable Labs is hiring! – Come join our team of world-class engineers and help define the field of social commerce!

---