Facebook uses OAuth 2.0 to allow web applications and desktop applications to authenticate and subsequently make use of the Facebook Open Graph API.This article is a quick walkthrough of how this works, and how to do that authentication - with a focus on writing a desktop application that can do it.
As a special free bonus, I've included a C# project that can do the authentication for you, and retrieve a token quickly and easily. Hopefully you'll find it useful as a tool in its own right as well as good tutorial material!
You can download the C# desktop Facebook authenticator here: FacebookAuthenticator.zip
 |
| Open Graph |
Open Graph provides access to both public data (accessible without authentication), and protected data (requiring permissions and authentication). The simplest way to get hold of simple data is to send an HTTP request to the Facebook API. You'll get some JSON back, eg: https://graph.facebook.com/19292868552
To get hold of protected data, your application will need to authenticate both itself, and the user using it, to Facebook in order to retrieve a token that can be used with the Open Graph API.
NB. If you'd rather not bother with all the details and just want to get started, skip to the last section where I explain how to make use of the Facebook Authenticator project.
So how does Facebook Authentication work?
When any application asks Facebook for some protected data, Facebook needs to know that the user has given permission to the application to look at their data. The user can authorise an application with certain permissions, which are then represented in the form of a token issued to the application.
There are 3 kinds of authentication required for a web application:
- User authentication (to identify the user authorising access to their data),
- App authorisation (to specify just what the application is being authorised to access), and
- App authentication (to ensure that these permissions are being given to the right application).
Once all 3 steps have been completed, Facebook issues a token to the application which it can use to access the specified subset of the user's data for a limited amount of time.
For desktop applications, app authentication isn't so useful: it relies on a secret shared between the application and Facebook. Because desktop applications are distributed to users, the secret becomes highly distributed and so very difficult to keep safe. Facebook relaxes the constraints for desktop applications, and so it is possible to request an authentication token without providing the shared secret.
Web application authentication
Web applications can easily redirect users to the appropriate facebook authentication page in order to retrieve an access token. We won't look into this in too much detail. Broadly spreaking the process is the same as desktop application authentication, but requires an extra step. I'll highlight the extra step in the desktop process.
Desktop application authentication
As desktop applications don't provide a web service, there's no redirection and they cannot receive postbacks - so how does authentication work?
WPF and WinForms both have embeddable browsers, and one of these will be required to display the Facebook authentication page to the user so they can authorise the application.
It works like this:
 |
| requesting user authentication details |
- The application opens a browser instance, and displays a Facebook authentication page for itself to the user.
- The user fills out their details, and approves permission for the application.
- When the user submits this, Facebook redirects the user to a URL belonging to the application (the 'redirect URL'). This URL is suffixed with a fragment (#fragment) containing the application's access token.
- The application retrieves the fragment (fragments are only available to desktop applications or in-browser scripts).
There are a few things you need to know:
- You'll need to have created an App in the Facebook Developers area.
- The redirect URL must be the Site URL set for your application. It will be used to perform a cursory authentication of your app. Set it when editing your app:
- The initial authentication url is: https://graph.facebook.com/oauth/authorize?client_id=<facebook app ID>&redirect_uri=<where to redirect to>&response_type=token
- The last parameter (response_type=token) is particularly important: it tells Facebook not to insert the additional application authentication step for web applications.
- When Facebook redirects, it will redirect the browser back to the redirect URL, suffixed with the access token in a fragment as follows: http://redirect.url/#access_token=<ACCESS TOKEN>&expires=<nnnn>
- To get the token, you'll need to trim it out of the redirected URL's fragment, and strip off any other information (eg. the expiry parameter).
Bingo! Once you've got the token, you can use it in your application to make requests using the Facebook C# API.
How do I use the FacebookAuthenticator project?
So now to the fun part: making use of the ready prepared project!
First of all, add this project to your solution. It doesn't contain much! It's a class library, and inside it it has a single form: AuthenticatorForm.cs
 |
| example usage |
- Construct one, passing in the following parameters:
- The application ID,
- The application's redirect URL,
- A method to receive the token (of delegate type: Action<string>).
- Then call Show() (non-blocking), or ShowDialog() (blocking) on the form.
- When the form detects a token has been received through its browser, it will call the method you passed in with the new token. Bingo!
I hope you have found this tutorial simple and straightforward to follow. Please feed back any comments you have regarding the authenticator and the material here. All code in the authenticator is my own work and free to use in your projects however you see fit.
Some useful links:
- The Facebook C# SDK - some classes for accessing Facebook Open Graph data as JSON objects.
- The Facebook Developers Authentication page - full details of Facebook's OAuth 2.0 implementation.
0 comments:
Post a Comment