We continue to make Facebook Platform more secure for users by transitioning apps from the old Facebook authentication system and HTTP to OAuth 2.0 and HTTPS. As part of these efforts, we have released an updated version of the JavaScript SDK to provide OAuth 2.0 support. By default, support for OAuth 2.0 is opt-in, so that all Platform apps using the JavaScript SDK will continue working without interruption while you transition to use the new OAuth 2.0 features.
To enable OAuth 2.0 functionality, you simply need to include an oauth
parameter to FB.init
and set it to true:
FB.init({ appId : YOUR_APP_ID, // other parameters, oauth : true });
If the oauth
parameter is omitted or set to false, OAuth 2.0 will remain disabled and the JavaScript SDK will work as it did prior to these changes.
When configured to use OAuth 2.0, the session is replaced the by the authorization response. The session is a Facebook-specific structure enclosing an access token and a session key, either of which could be used to make API calls. The authorization response encapsulates OAuth2-compliant data and includes an access token, the user ID, a signed request, and an expiration time.
Support for login, logout, login status is largely the same. Your callback functions should now expect a single argument that will not include a session attribute, and will include an authResponse
property if the oauth
parameter is set to true. Prior to the changes, you might have invoked FB.login as follows:
FB.login(function(response) { if (response.session) { console.log("User is connected to the application."); var accessToken = response.session.access_token; } });
With OAuth 2.0 enabled, the call above would be replaced by:
FB.login(function(response) { if (response.authResponse) { console.log("User is connected to the application."); var accessToken = response.authResponse.accessToken; } });
As with sessions, an authorization record can be installed when FB.init
is called by including an authResponse
parameter and attaching it to a valid authorization response for the logged in user. Whereas many developers would store sessions in a database, you might now store authorization responses instead.
A simple but more elaborate example illustrating a typical cascade of authentication flows and API calls is illustrated here:
FB.login(function(response) { if (response.authResponse) { console.log('Welcome! Fetching your information.... '); FB.api('/me', function(response) { console.log('Good to see you, ' + response.name + '.'); FB.logout(function(response) { console.log('Logged out.'); }); }); } else { console.log('User cancelled login or did not fully authorize.'); } }, {scope: 'email'});
FB.getLoginStatus
works just as before, except that your callback receives an authorization response (instead of a session) for connected users.
FB.getLoginStatus(function(response) { if (response.status === 'connected') { // the user is logged in and connected to your // app, and response.authResponse supplies // the user’s ID, a valid access token, a signed // request, and the time the access token // and signed request each expire var uid = response.authResponse.userID; var accessToken = response.authResponse.accessToken; } else if (response.status === 'not_authorized') { // the user is logged in to Facebook, //but not connected to the app } else { // the user isn't even logged in to Facebook. } });
You may still subscribe to a collection of events as before: auth.login
, auth.logout
, and auth.statusChange
still work, but auth.sessionChange
is deprecated and being replaced with auth.authResponseChange
. Of course, auth.sessionChange
will continue to work until at least the October 1 transition time, and auth.authResponseChange
is only relevant when OAuth2 has been enabled. When OAuth 2.0 is enabled, authorization responses—not sessions—are passed to all callbacks for connected users.
Full working example below:
<!DOCTYPE html> <html xmlns:fb="https://www.facebook.com/2008/fbml"> <head> <title> New JavaScript SDK </title> </head> <body> <div id="fb-root"></div> <h2>Updated JS SDK example</h2><br /> <div id="user-info"></div> <p><button id="fb-auth">Login</button></p> <script> window.fbAsyncInit = function() { FB.init({ appId: 'YOUR_APP_ID', status: true, cookie: true, xfbml: true, oauth: true}); function updateButton(response) { var button = document.getElementById('fb-auth'); if (response.authResponse) { //user is already logged in and connected var userInfo = document.getElementById('user-info'); FB.api('/me', function(response) { userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name; button.innerHTML = 'Logout'; }); button.onclick = function() { FB.logout(function(response) { var userInfo = document.getElementById('user-info'); userInfo.innerHTML=""; }); }; } else { //user is not connected to your app or logged out button.innerHTML = 'Login'; button.onclick = function() { FB.login(function(response) { if (response.authResponse) { FB.api('/me', function(response) { var userInfo = document.getElementById('user-info'); userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture" style="margin-right:5px"/>' + response.name; }); } else { //user cancelled login or did not grant authorization } }, {scope:'email'}); } } } // run once with current status and whenever the status changes FB.getLoginStatus(updateButton); FB.Event.subscribe('auth.statusChange', updateButton); }; (function() { var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; document.getElementById('fb-root').appendChild(e); }()); </script> </body> </html>
Updated OAuth 2.0 Roadmap
In addition to making available the new JavaScript SDK, we are also updating our Roadmap to extend the migration deadline to October 1st and added a few migration settings in the Developer App to help you with this transition:
<
p> Updated Roadmap:
July 22:
August 5:
October 1:
By releasing the new JavaScript SDK this week, we are hoping you will have plenty of time before the October 1 migration deadline to ensure that the upgrades are fully functional and working. Please let us know if you have any questions or feedback in the Comments below.