How Connect Authentication Works

From Facebook Developer Wiki

Jump to: navigation, search

Let's go through what's happening in a very basic site (from our intermediate demo):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> <body> <fb:login-button></fb:login-button> <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script> <script type="text/javascript"> FB.init("YOUR_API_KEY_HERE", "xd_receiver.htm"); </script> </body> </html>


[edit] Authentication Flow Overview

App Server Browser Facebook
1. Client requests page, server sends an HTML response that includes <fb:login-button></fb:login-button> somewhere as a placeholder for the Facebook Connect login button.
2. Browser receives response, executes Facebook Javascript initialization code.

FB.init("YOUR_API_KEY_HERE", "xd_receiver.php");

3. Browser pings Facebook for login status. See Cross Domain Communication for details.
4. Javascript library renders the button:

Image:Connect_light_medium_short.gif

5. User clicks the button. An onclick handler is triggered:

FB.Connect.requireSession();

If the user is logged into Facebook and has authorized the app previously, then the session is returned immediately, and skip to step #7.

6. A popup window opens on Facebook.com, asking the user for permission. If they are not logged into Facebook, then it will ask for email/password as well. See Authenticating_Users_on_Facebook for more info.

7. Session is returned. The Facebook JavaScript library does two things:
  1. Sets some cookies on the application domain to store the session info.
  2. Triggers the callback defined by :

FB.Facebook.get_sessionState().waitUntilReady(function() { ... });

The callback typically will just refresh, although in a more advanced site it might just do some ajax-y updates to avoid refreshing the whole page.

8. On the next request to the app server, cookies will be sent that contain signed session information. Server should:
  1. Verify the signature to make sure the data came from Facebook
  2. Retrieve the Facebook user ID
  3. Look up the user's account and "log them in". If they have no account, then create one behind-the-scenes

You can do the first two steps in the Facebook PHP library like so:

$fb_uid = facebook_client()->get_loggedin_user();

[edit] Security

The above flow keeps information secure through several means.

  • When the session comes back, it is signed using your secret key. You can use the server-side library to verify that the information came from Facebook and not some hacker.
  • All communication is mediated by the browser. A Facebook user ID is not given unless the user sitting at the computer has authenticated to Facebook.
  • No information about the application is passed to Facebook (aside from the API key) in the authentication step.
reference