I finally found some time to implement Facebook Connect for foodCandy.com. You can now do the following.
- Sign-Up with a Facebook account, no questions asked on FoodCandy.com.
- Associate an existing Facebook account with a previously created FoodCandy.com account.
- Login to FoodCandy with a previously associated Facebook account.
Is it hard?
It’s not. There’s about a day of work for all the items above, including this post.
Why am I writing this?
There’re several interesting aspects to the FoodCandy service model, in particular that the website is just a front-end UI to SnCore and cannot do authentication. It needs to pass all data to the services back-end via a SOAP API, which in turn will do authentication. This means that we need to do more work and less magic.
I registered an application, which gave me an API key and a shared secret. The first is public, but the latter is going to be stored on the back-end and used to verify login signatures or make authenticated calls to Facebook. You would typically store both in some configuration file, SnCore has a settings framework that lets you store both public information and “password”-like settings accessible to the back-end only.
Single Sign On
The best document to read first is here.
A Facebook Login Button
The URL specifies the following.
- Tell Facebook login to return to FacebookConnect.aspx with parameters that will indicate the redirect location after a successful login. Facebook application settings require you to specify a single login return location. In addition this must be a dynamic page with a ? in the URL.
- Tell Facebook that we want publish_stream and email access. The publish_stream option asks the user to authorize our application to publish content on Facebook, which is beyond the scope of this post. The email option asks the user to authorize our application to send the user an e-mail. You don’t actually ever get the user’s e-mail, but an application-specific e-mail forward address.
Redirect After Login
A logged-in user is now returned to FacebookConnect.aspx with a number of parameters in the URL that contain session information.
The following code works every time.
Verifying the Signature
FacebookConnect.aspx does the job at performing a cross-site Facebook login, then redirects back to the initial login page. The latter must now verify that the login is legit and locate a FoodCandy account associated with this Facebook login. I do this work in the actual login page.
If you’re doing all of this on the client side, read this document for background and use the Facebook Connect library. I had to split the process between the front-end and the back-end and used it for a reference implementation.
Facebook cookies are collected in a sorted list, concatenated and signed.
The signature must match the value of the cookie with the same name as the API key.
Facebook Account Id to FoodCandy Account Id
Once the signature is verified, you can trust the Facebook user id stored in the “user” cookie. It’s a 64-bit integer. I created a new table in SnCore called AccountFacebook and allow users to associate facebook IDs with their account. If the back-end can locate such an account, an SnCore login ticket is issued, which completes the login operation.
FoodCandy Signup with Facebook
The signup process first goes through the same logon process as described above, except that the final landing page is one that will create an account. Most of what I describe below is well explained here, albeit for an older version of the API. This should serve as a refresher.
First, I got hold of the Facebook Developer Toolkit that implements calls to Facebook using the Facebook Graph API. It is initialized with the API key, the secret and a session key. The toolkit is going to be making server-to-server calls from FoodCandy to Facebook, it’s all back-end operation.
At signup I need the user’s name, e-mail and birthday. I’d also like to get the user’s location and maybe even a picture.
That’s a lot of private information that you gave me with a single click! Let’s look at the created account.
Try it! Signup to FoodCandy with a Facebook account.