Getting a Facebook Login working on your application

Update 2010: This method is still valid but has been replaced with “Facebook Connect”. See a follow-up post: Facebook Logins with Facebook Connect

I’m writing this after a hard day’s work with the Facebook API. It’s almost been work the blood, sweat and tears that I have shed during the last 5 hours. This will also hopefully serve as a guide for anyone trying to get something simple done with facebook authentication.

Firstly, my mission:

  • Enhance the current login system of USE to use Facebook, thereby giving me access to their facebook profiles and posting messages to them there, instead of giving my users ‘just another thing to update’
  • At this point in time, I only want my users to be able to log in with facebook
  • Doing this also makes my login more secure

My first steps take me to platform.facebook.com and to their guides. I add the developer application and get myself an API key, setting up my server at the same time. There are plenty of other tutorials that show you how to do that.

The next thing I do is go to the authenticaiton documentation and grab their login button and put it into my website. As previously mentioned in other posts, I wanted to use the thickbox technique to log in; however, I then came upon the first limitations of the facebook platform

  1. The thickbox can open an iframe with the facebook login in it, but in order to close that box on the click of login, I have to attach some javascript to the button, which I can’t do
  2. Even simply having the login come up in a popup has the same problem.
  3. Even so, ignoring that, once you click ok, Facebook redirects you to the callback page, but it does so in the iframe/popup!
  4. Even if that was all acceptable, in order to retrieve the Facebook session, you need to use the auth token provided in the returned URL, which you can’t get at in the iframe/popup without some funky javascript

Thus, I’ve dropped the thickbox login. Very sorry. If you can think of a way around this, please please please let me know.

Next comes with what to do with everything. My previous login was actually controlled by the phpBB forums and, whilst it is still possible to throw the token to the forums, I haven’t in this example as it overcomplicates things (and I’m waiting for phpBBv3 to go gold). I considered the following tasks that the script had to do before it would log people in

  1. Test if the auth_token is real
  2. Test if the user is in the database
  3. Get their details and fill my session variables
  4. Prevent this process from happening every time

The first one was quite easy actually. Looking at the facebook.php file in the client library (from the developer tools) I found a do_get_session($auth_token) method. This swaps my token for a session, returning an array if it’s alright, nothing if it’s not. The array contains the user id, session key and a time for when the session expires

The second bit is the hardest. On sheffieldhockey.com alone there are 435 registered members (though only half that number are active really). Also, not all of them are on facebook and I certainly don’t know their facebook IDs to populate the database with. Therefore, this second bit involves a test to see if the user is there, then if they’re not, they will be bounced to a page asking them to register, or to pick their name from a list. This is the only way I can see a nice smooth transition without me getting the admin to trawl facebook for people.

The third part isn’t that hard, assuming there’s a person in there. Simply get the data and set it.

Preventing it from happening each time is a simple check of the sessions to see if they’re set and then if an auth_token is set. The trickiest part of this was that I’d been defining my variables twice and so it looked like the sessions weren’t setting until a refresh of the page. Thankfully that’s fixed now.

The hardest part in this game actually seemed to be getting the logout working! Facebook requires that to log a user out you must POST to www.facebook.com/logout.php with confirm=1 set. I tried a couple of ways first, initially with a form, but that simply dropped me out into a Facebook login screen and when I went back, I hadn’t cleared my sessions so I was still logged in!

Secondly, I tried and AJAX request to the page, but that page disallowed it. Finally, I found a script that let you do POST requests without forms (google for it) and from there I made a page, called the function, cleared my sessions and headered back as normal.

And all that does is log you in… it’s a lot of work for not very much, but it’ll allow you to do so much more. That said, the pain of not being able to do the thickbox login is annoying and to be honest it distracts from the site. Any way around that and I’ll be eternally greatful!

There’s no nightly USE build tonight due to the above (and me not having finished the facebook ID associator)

Steve

Currently Listening to: My Chill playlist for Emily
Currently Reading: Facebook documentation
Currently Watching: Batman Begins
Currently Eating: Leftovers and Milka
Current SVN Revision: 81

If you enjoyed this post, leaving a comment or subscribe to the RSS feed to have future articles delivered to your feed reader.

Steve Workman

Steve Workman is the Head of Web Engineering at Yell. He is also an organiser for London Web Standards is an occasional public speaker, talking about web performance and web standards

More Posts - Website - Twitter - Google Plus

One comment

Leave a response