Facebook App Development with OAuth 2.0

OpenIDvs.Pseudo-AuthenticationusingOAuth.svg

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.

01. First Step of creatring Facebook App

https://developers.facebook.com (Creating facebook app in facebook developer console)

01

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

02

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.

5a

 

Sample Request:

https://www.facebook.com/v2.8/dialog/oauth?client_id=CLIENT_ID&scope=public_profile,email&response_type=code&redirect_uri=REDIRECT_URI&state=STATE_TOKEN

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

6a

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.

03

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).

http://localhost:5000/signin-facebook?code=AUTH_CODE&state=STATE_TOKEN

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.

POST /v2.8/oauth/access_token HTTP/1.1 
Host: graph.facebook.com 
Content-Type: application/x-www-form-urlencoded

grant_type=authorization_code& 
code=AUTH_CODE& 
redirect_uri=REDIRECT_URI& 
client_id=CLIENT_ID& 
client_secret=CLIENT_SECRET

• 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_name
Host: graph.facebook.com

In the Response, we receive the Access Token.

8a

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.

Send a HTTP GET request to https://graph.facebook.com/v2.8/me/feed?limit=25 and in response, you will get the user’s timeline posts. You will get a JSON response. You can limit the number of results using the limit query parameter.

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.

{

  “id”: “3147895201XXXXXXX”

}

For more information, you can refer the documentation [4].

Retrieving User’s Photo Album Details

For this, it needs to send a HTTP GET request to, https://graph.facebook.com/v2.8/me/albums  which would return a JSON response with the photo album details.

10a_2

Retrieving a Photo by ID

It is known the ID of a photo from previous step, then it can get the details of it by sending a HTTP GET request. https://graph.facebook.com/<photo ID>/picture.

11a

Reference

   [1]            https://en.wikipedia.org/wiki/OAuth

   [2]            https://github.com/thariyarox/facebook-oauth-samples/tree/master/facebookapp/src/main/java/com/tharindu/oauth/facebookapp/util

   [3]            https://developers.facebook.com

   [4]            https://developers.facebook.com/docs/graph-api/reference/

   [5]            https://tools.ietf.org/html/rfc6749

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s