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:
- Renamed the “OAuth 2.0 for Canvas” migration to “signed_request for Canvas.” This helps clarify that your Canvas app will receive the signed_request parameter when this setting is enabled.
- Created a new migration setting for “OAuth Migration” to help you verify that you have met the OAuth migration timeline. Enabling this migration setting verifies that you are using access tokens and not using legacy authentication.
<
p> Updated Roadmap:
July 22:
- Updated JavaScript SDK available
- Migration setting changes
- Renamed "OAuth 2.0 for Canvas" migration to "signed_request for Canvas"
- Added new "OAuth Migration" setting
- Defaulted all new apps to have "OAuth Migration" setting enabled
August 5:
- Updates to PHP SDK to be new-cookie-format aware.
October 1:
- All apps to have "OAuth Migration" setting enabled (Revised from Sept. 1)
- All apps to have "signed_request for Canvas" setting enabled
- SSL Cert required for apps on Facebook (Canvas and Page Tab apps)
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.