Facebook App Development with OAuth 2.0

What is OAuth (Open Authorization), and how it works?

OAuth allows notifying a resource provider (e.g. Facebook) that the resource owner (e.g. you) grants permission to a third-party (e.g. a Facebook Application) access to their information (e.g. the list of your friends). You can use OAuth to get a token via a callback url and then use that token to make calls to the Facebook API to get their use data until the token expires. Websites rely on it because it allows programmers to access their data without the user having to directly disclose their information and spread their credentials around online but still provide a level of protection to the data.

For an example consider this scenario,

Say you have an existing Gmail account. You decide to join LinkedIn. Adding all of your many, many friends manually is tiresome and error-prone. You might get fed up half-way or insert typos in their e-mail address for invitation. So you might be tempted not to create an account after all.

Facing this situation, LinkedIn has the Good Idea to write a program that adds your list of friends automatically because computers are far more efficient and effective at tiresome and error prone tasks. Without an API for exchanging this list of contacts, you would have to give LinkedIn the username and password to your Gmail account, thereby giving them too much power.

This is where OAuth comes in. If your Gmail supports the OAuth protocol, then LinkedIn can ask you to authorize them to access your Gmail list of contacts.

OAuth allows for:

§ Different access levels: read-only VS read-write. This allows you to grant access to your user list or a bi-directional access to automatically synchronize your new LinkedIn friends to your Gmail contacts.

§ Access granularity: you can decide to grant access to only your contact information (username, e-mail, date of birth, etc.) or to your entire list of friends, calendar and what not.

§ It allows you to manage access from the resource provider’s application. If the third-party application does not provide mechanism for cancelling access, you would be stuck with them having access to your information. With OAuth, there is provision for revoking access at any time. For more about the OAuth [1.5].

Configure the Facebook Application.

Once created, navigate to https://developers.facebook.com/apps and click on your application’s icon. You will be taken to your app’s basic details. Here you can obtain the App Id and App Secret you will need in your application. Make a note of them (store them using your secrets manager).

In the Dashboard, you can see the App ID and the App Secret for your app. In OAuth terminology, we call the same as Client ID and Client Secret, or Consumer Key and Consumer Secret

The last step is to configure the redirect URI for your application. Click on ‘+ Add Product‘ at the bottom of the menu and choose Facebook Login. This will enable OAuth for your application, and allow you to set the REDIRECT_URL for your application.

This URL should be within your client web application and Facebook will send all responses to this URL. However, for trying out this flow, you don’t need to have a working URL available. You can simply provide a dummy URL here for the moment. The same URL you add here should be sent along with requests in next steps.

The redirect path for the Facebook middleware is /signin-facebook. In my case, here it runs the app locally.

Authorizing to obtain the authorization code.

When the user requests a page on your app that requires authorizations, they will be redirected to the login page. Here they can either login using a username and password to create an account directly with the site, or they can choose to login with an external provider – in this case just Facebook. In order to obtain the authorization code from facebook, it needs to send a HTTP GET request to the Authorize Endpoint of Facebook, which is https://www.facebook.com/dialog/oauthAlong with the request, it is needed to send several parameters.

If you are not logged into facebook in the browser, first it will ask you to login

Once you login, it will show the following popup. We call this as the “User Consent Page” in OAuth terminology. In there, it will show what are the resources from the user account that this external app would be able to access on behalf of you.

If the user clicks OK, then Facebook sends another 302 response to the browser, with a URL similar to the following (used port as 5000).

Facebook has provided an AUTH_CODE, along with the STATE_TOKEN, supplied with the initial redirect. The state can be verified to ensure that requests are not being forged by comparing it to the version stored in our session. The AUTH_CODE however is only temporary, and cannot be directly used to access the user details we need. Instead, it is needed to exchange it for an access token with the Facebook Authorization server.

Obtaining the Access Token.

The client web application has to send a HTTP POST request to the Token Endpoint of facebook sending the authorization code received in previous step. The Token Endpoint of facebook is https://graph.facebook.com/oauth/access_token .

We need to send the following parameters in the body of the HTTP POST request.

• grant_type=authorization_code – The grant type for this flow is authorization code• code=AUTH_CODE_HERE – This is the code you received in the query string• redirect_uri=REDIRECT_URI – Must be identical to the redirect URI provided in the original link• client_id=CLIENT_ID – The client ID you received when you first created the application• client_secret=CLIENT_SECRET – Since this request is made from server-side code, the secret is included [2].

If the token is accepted by Facebook’s Authorization server, then it will respond with (among other things) an ACCESS_TOKEN. This access token allows our application to access the resources (scopes) we requested at the beginning of the flow, but we don’t actually have the details we need in order to create the Claims for our user yet.

After receiving and storing the access token, our app can now contact Facebook’s Resource server. We are still completely server-side at this point, communicating directly with Facebook’s user information endpoint.

In addition to that, it needs to send credentials of the facebook application (App ID and App Secret) in the HTTP Header. Here, it wants to combine the App ID and Secret separating them in via Colon (:) and the value should be encoded in Base64.

GET /v2.8/me?access_token=ACCESS_TOKEN&fields=name%2Cemail%2Cfirst_name%2Clast_nameHost: graph.facebook.com

In the Response, we receive the Access Token.

Providing the Access Token retrieving the resources from Facebook.

Now that we have received the OAuth access token from facebook [3], in all the requests we make to the facebook API, we need to include it as a HTTP header.

Get User’s Facebook ID

For invoking many operations like retrieving user’s photos, albums etc. We need to know the user’s facebook ID. For that, we can send a HTTP GET request to the URL https://graph.facebook.com/v2.8/me?fields=id which would return the ID in a JSON response.