Reprinted from my Skyway Community Tech Blog posting:

I indicated in post #4 that we would build a simple application that lists the birthday’s of your Facebook friend’s.  When you are logged into Facebook as a Facebook user, you have access to information you’re friends have published about themselves, and you would access this data by navigating to their profiles.

A Facebook application can also access this information using the Facebook API.  However a Facebook application doesn’t have unrestricted access to the data.  A Facebook application only has access to data that has been granted to it on behalf of the end-user of the application.  When you add a Facebook application, you will be prompted to grant the application access to your data, and the Facebook application can only access data related to you.

A Facebook application doesn’t automatically know who you are.  Nor does Facebook for that matter.  Hence the need for authentication, a way for an application to identify who you are.  Fortunately Facebook does all the hard work.  A Facebook application doesn’t need to implement it’s own authentication logic.  Hurray!!  However a Facebook application does need to know how to integrate with Facebook’s authentication system.  Boo!!

It’s not really too bad.  The first time you do it, it can be a bit confusing.  However I will share with you what I learned and a sample Skyway implementation that you can re-use.

Building on my previous posts (see post #1, post #2, post #3, and post #4), here’s an overview of the authentication process from the moment someone tries to access your Facebook application.

  1. The end-user of the application makes a call to the Canvas Page URL for your application.  The URL is a Facebook URL that, among other things, points to a Facebook server.
  2. The Facebook server generates and returns the HTML associated with the requested page.  The page includes an IFRAME that has a URL pointing to the Facebook application’s Callback URL.
  3. The end-user’s browser makes another call to the Callback URL.  This URL is pointing to your deployed Facebook web application wherever it may be hosted.
  4. Your application is looking for an authentication token (auth_token) in the request.  Since the token doesn’t exist, your application application will send back a browser redirect to Facebook’s login URL and a URL parameter with you’re Facebook api key.
  5. The Facebook login URL will determine if the user is logged in.
  6. If the user is already logged into Facebook, Facebook will send a browser redirect to the Facebook Application’s Canvas Page URL.  (Otherwise the user will be prompted to login).  Facebook determines the canvas page for your application by evaluating the api key that you provided in step #4.
  7. Once again…The end-user’s browser makes a call to the Canvas Page URL for your application.
  8. Once again…The Facebook server generates and returns the HTML associated with the requested page.  The page includes an IFRAME that has a URL pointing to the Facebook application’s Callback URL.
  9. The end-user’s browser makes another call to the Callback URL.  However this time the request includes an authentication token (auth_token).
  10. Your Facebook application makes an API call to Facebook with the authentication token, application key and secret key to get the user’s session key.  The session key is the key (pun intended) to accessing more Facebook data.
  11. Your Facebook application generates and returns the HTML associated with your application’s functionality, potentially with Facebook data.  The HTML is embedded into the IFRAME section of Facebook page (from #8).

This whole sequence of steps is done to get the user’s session key.  While it looks a bit crazy, the end-user isn’t aware of all this craziness.  All the end-user knows is that they type in a URL (step #1) and get a Facebook page (step #8) with your Facebook application in the page (step #11).  Now that you have end-user’s session key, you can access the user’s Facebook data….including their friends.  We’re one step closer.

In the next post I will show you how to implement this in a Skyway Builder project.

This post is one of a series of posts relating to developing Spring-based Facebook applications using Skyway Builder: