Overview of "Login with Facebook"

I recently worked on integrating "Login with Facebook" functionality into our Lighthouse.Net CMS.  This feature enables users to login to a third-party website using their Facebook credentials.  As such, the user does not need to create and remember a username and password for your site.  Their Facebook credentials are used instead.

While I found a lot of information online about this integration, I was unable to find a great resource that fully explained how to get from the user successfully logging in using their Facebook credentials (which occurs in the browser using Facebook's Client-Side Javascript SDK) to securely logging the user into our site.  Here are the questions I had and how I addressed them:

Question 1:
What data do we need to store in our Users database table to support Facebook integration?

Answer 1:
We added a column for FacebookID.  This is an integer value generated by Facebook that serves as the primary key for each user.

Question 2:
When a user logs in using the "Login with Facebook" button (which happens in the browser using the Javascript SDK), what data do we need to pass from the browser to our server to log the user in to our app.

Answer 2:
When a user successfully logs in using Facebook's Client-Side Javascript SDK, an OAuth 2 access token is exposed to your Javascript code (accessible as response.authResponse.accessToken).  This token is a temporary token which can be used to retreive data for this user using Facebook's Social Graph API.  Here is the login flow our software follows:

1. Send the accesss token to your server (e.g. https://www.site.com/FBLogin?accessToken=123456).  Note that the actual access token is much more complex, consisting of roughly 112 random characters.
2. In your server code, make a request to Facebook's Social Graph API using the access token(e.g. https://graph.facebook.com/me?access_token=123456).  This call returns a JSON object which contains the user's FacebookID (the "id" field in the JSON object).
3. Since we now know the user's FacebookID, we can find the appropriate record in our Users table and log the user in as though they submitted a form on our site with their username and password.

This logic relies on the fact that the access token generated by Facebook is complex, temporary, and unique.  If an access code can successfully be used to retrieve a FacebookID from the Social Graph, we can trust that the FacebookID we receive back is associated with correct user.  This takes the place of a user entering their username and password into a web form.

Here is the HTML and Javascript code required to add the Login with Facebook button to your site.

<script src=https://connect.facebook.net/en_US/all.js type="text/javascript"></script>
<script>
 $("document").ready(function () {
  // Initialize the SDK upon load
  FB.init({
   appId: 'YOUR_FACEBOOK_APPID', // App ID
   channelUrl: '', // Path to your Channel File
   scope: '', // This to get the user details back from Facebook
   status: true, // check login status
   cookie: true, // enable cookies to allow the server to access the session
   xfbml: true  // parse XFBML
  });
  // listen for and handle auth.statusChange events
  FB.Event.subscribe('auth.login', OnLogin);
 });

 // This method will be called after the user login into facebook.
 function OnLogin(response) {
  if (response.authResponse) {
   window.location = "/FacebookLogOn?accessToken=" + response.authResponse.accessToken;
  }
 }
</script>

<div id="fb-root"></div> <!-- This initializes the FB controls-->  
<div class="fb-login-button" autologoutlink="true" scope="" >Login with Facebook</div> <!-- FB Login Button -->  
<br /><br />