Back in Part 1 I explained why I’m making this HTML5 application. The condensed version of what I’m making is a web/mobile app that can read a running/fitness Facebook group feed. In the Part 2 I explained how I was going to process the group feed once I got it.  In this part I will show you how to authenticate with Facebook and download the data into your web app.

There are a few ways to work with the Facebook API in a HTML5 application.  You can use their JavaScript SDK, you can do the integration on the server side, or you can make direct calls with your own JavaScript functions.  I’m going to use that last technique.

The basic process works like this:

1. The user loads your web page
2. JavaScript on the page checks for a Facebook authentication token.
3. If the token isn’t found, JavaScript will redirect your user to the Facebook login URL, (https://www.facebook.com/dialog/oauth) with certain GET parameters
4. The user logs in  and Facebook redirects them back to your application with the authenticaion token included in the URL
5. JavaScript in the application examines the URL and finds the auth token indicating a successful login

I mentioned in step 3 that there are parameters you pass into the Facebook auth system.  Here are the ones I use:

• redirect_uri — this is the URL that Facebook will use to send the user back to your application
• response_type — this can be set to a value of “token” or “code”.  A value of code is used for server side authentication.  Since we are building a stand alone HTML5 app, we will use token.  When Facebook redirects the user back to your page, it will append a #access_token=XXXXXX to the URL so you can read the token from the location.
• scope — This is how you request certain privileges for your token.  Since our app needs to see group information, we will request “user_groups”.  If you need to get more privileges, use a comma separated list.  Facebook docs have the complet list of privileges you can request.

The documentation lists the other parameters you can use, but that’s all we need for this application.

That’s the outline, here is the code I am using:

var appID = ‘YOUR-APP-ID’;
if (window.location.hash.length == 0) {   
    var path = ‘https://www.facebook.com/dialog/oauth?’;   
    var queryParams = [‘client_id=’ + appID,     ‘redirect_uri=’ + window.location,     ‘response_type=token’, ‘scope=user_groups’];
    var query = queryParams.join(‘&’);
    var url = path + query;
    window.location = url;
} 

Using this code as-is will automatically send the user to the login page.  A good UI would have some kind of warning or login button to press before that.  Every app will want to do that differently, so pick the method that is right for you.

If you look at the code above, you see that an application ID is needed.  You can get this by registering your application on the Facebook developer app: http://developers.facebook.com/setup/

One important note, when you register you have to list the Website URL of your application.  When you try to use the Facebook API, your referring URL (or at least the domain) will be checked against the value you put in there.  If things don’t match up, you will see the message “An error occurred.  Please try again later.”  on the Facebook login screen.  Clearly not very helpful to a developer, but I guess it’s better for your end users to see that than something like “The developer of the web app you are trusting with your personal Facebook data isn’t smart enough to code it properly and here is what he/she did wrong: XYZ”

The name restriction makes local development a little trickier than most HTML5 applications.  This means you can either do your development on a public web server or setup and match a DNS entry for you local system with the URL you register with Facebook.  

This is a bit annoying for me as my local system is a Windows 7 box without a web server installed. I could do my coding on my Linux server I have on Amazon’s EC2, but I really like Visual Studio as an editor.  My solution was to use Server2Go as my local web server and register my home router’s public name as my website URL with Facebook.  When I’m ready to deploy my app to the world, I will update my URL with Facebook.

In the next part, I will talk about pulling the feed pragmatically and parsing the data.