OAuth 2.0 - FaceBook App

What is OAuth

OAuth is a framework for delegated authorization. The OAuth 2.0 specification defines a delegation protocol that is useful for conveying authorization decisions across a network of web enabled application and APIs. OAuth is used in a wide variety of applications, including providing mechanisms for user authorization.

Facebook apps are very fashionable because of varied reasons, most of the time these apps are designed for entertainment functions. In nowadays we all can see the attractive facebook app in your timeline. when you have clicked that app, they ask you to log in with Facebook, Gmail, Twitter like this. that means you can perform an action on a behalf of the user. In a way, that application owners are getting information about you. OAuth allows an end user's account information to be used by third-party services such as Facebook without exposing the user's password.

In this blog, I'm going to write how to make Facebook app using OAuth 2.0

So let's see what's happening behind this.

Study about this diagram.

Source : https://www.packtpub.com/application-development/mastering-oauth-2

Let's see, what is token? In the Facebook, providers are given to us two types of tokens. It is access token and refresh token. Access token can be used several times before it's expired. When it's expired refresh token is sent to the Facebook server and receive new access token from them.

Let's start creating the application

First, we need to go to the Facebook developer site and create an application there.
https://developers.facebook.com/

Go to "My Apps" on top right corner and select "Create new app"
Then a window will be pop up. Then we can enter required details and "Click create app ID"

Now you can see Facebook login and "Get Started" button then click it.

Then you will see something like this. Click on "Get Started" in Audience Network.

Now you have to provide a valid OAuth redirect URL. Facebook will send all it's responses to this URL.

In the setting, You need to provide App domain and website URL. Before setting the web URL you need to Add Platform first.

In the dashboard, we can see our App ID and App Secret

Now let's see how can we use these values to get information from Facebook.

Obtain Authorization code from Facebook

we need to create a web URL for obtaining the authorization code. This URL contained the four elements. when we put these elements together and create a URL. All elements should be encoded

1) response_type
Code
Code

2) client_id
1885217651731926
1885217651731926

3) redirect_uri
http://localhost:8080/fbappOAuth/
http%3A%2F%2Flocalhost%3A8080%2FfbappOAuth%2F

4) Scope
public_profile user_posts user_friends user_photos
public_profile%20user_posts%20user_friends%20user_photos

Now we cancombine these values and make the URL.

https://www.facebook.com/dialog/oauth?response_type=code&client_id=1885217651731926

&redirect_uri= http%3A%2F%2Flocalhost%3A8080%2FfbappOAuth%2F

&scope=public_profile%20user_posts%20user_friends%20user_photos

Enter that URL in the url bar of your web browser and hit enter. now you can see some thing like this. This is called as user consent page. In the consent page, you can edit what is application going to get your side.

I'm not going to edit this because i'm the owner of this application. then i clicked "Continue as Chathuranga"

after that this page will appear.

This page appear, becuase for generally we don't have a project whitch support http://localhost:8080/fbappOAuth/

But when we cheack the URL, we cann authorization code is sent to us from Facebook.

( code=.......)

Obtain access token

To get the access token we need to have onther four parameters.

1) grant_type

authorization_code

2) client_id
1885217651731926

3) redirect_uri
http%3A%2F%2Flocalhost%3A8080%2FfbappOAuth%2F

4) code (this code is what u get before step in URl)
AQCBX67cUyTwiYPRUiBEGAlOdfmQv5sUqYvYdDpnZ54cDSZxMzt1zAv7UgbYvoWiZW91nGu6yzRF9zTL6pe2yW5Gx9MwIcMDKVQNYKFmEIvJNCBFQjgoyeWqST6YsF2r8jkfADrukFPFeZ81uXNhxujteWH6-c6dLmVyDgoo4cZnkQfFkj51vLI-vwMt5APOcdbKKrNHC61vQMvF6Y41b0MDIN60xXwEnEH0pvxDn1asKdiVhHNUk86jR0uBb2jz5cNVIDUhqoJkTgy7KkF2nBBoL7F1smK4VhXXkVBDCG-T_9jkHZ0t1BEXC0Vge2YIjafynPPosKOlbxPOkBdAWWFx#_=_

In the HTTP headers, we need to add authorizaton header with App ID and App secret

App ID: 1885217651731926
App secret: 3fa80973e8176d166983b6c66a4d59f7

App ID:App secret
1885217651731926:3fa80973e8176d166983b6c66a4d59f7

Now we have to encode the whole value using https://www.base64encode.org/ encorder.
MTg4NTIxNzY1MTczMTkyNjozZmE4MDk3M2U4MTc2ZDE2Njk4M2I2YzY2YTRkNTlmNw==

To get access token we need to have specify the token endpoint.
https://graph.facebook.com/oauth/access_token

we need to install REST Client plugin in our web browser.
After that provide those values to REST Client and obtain access token.