Facebook over the OAuth 2.0 Authorization

How to use Facebook apps

Nowadays Facebook apps are very popular on Facebook.There are  millions of Facebook apps available on Facebook.Most of the apps are used to entertainment.Once you clicked on it,you can see the Facebook login page.That's mean you have to provide your Facebook credentials to use the app.How we trust that third party app?.What are the technologies that they used?.

What is OAuth 2.0 protocol?

OAuth is an open standard for access delegation,commonly used as a way for Internet users to grant websites or application access to their information on other websites but without giving them the credentials.This mechanism is used by companies such as Google, Facebook, Instagram, Microsoft and Twitter to permit the users to share information about their accounts with third party applications or websites.

OAuth 2.0 protocol working flow

There are two to types of  tokens that can be used when we developing the app.
1.Access Token :-  Access token can be used several times before it gets expired.
2.Refresh Token :- Once it's expired refresh token is sent to Facebook server in order to receive another access token along with a new refresh token.

Registering the Client App in Facebook Developer Website

Now we are going to create a Facebook app.

Facebook developer site : - https://developers.facebook.com/

First of all you have to login to the developer page using your Facebook credentials.

Then you can see the "Add a New App" under the "My Apps"

In this section you have to provide an App name and Email.

Once your app is created, associate “Facebook Login” with it.

In the Dashboard, you can see the App ID and the App Secret for your app.

Obtaining the Authorization Code

In order to obtain the authorization code from Facebook, we need to send a HTTP GET request to the Authorize endpoint of Facebook, which is https://www.facebook.com/dialog/oauth . Along with the request, you need to send several parameters which are described below.

For the HTTP GET request we have to provide above values along with the link.
https://www.facebook.com/dialog/oauth?response_type=code&client_id=147505339122170&redirect_uri=http%3A%2F%2Flocalhost%3A1234%2Ffb%2F&scope=public_profile%20user_posts%20user_friends%20user_photos

If your not logged into the Facebook it'll ask you to login.

After you login,you can see the below page.it's called as "User Consent Page".When you click on the "Edit this" link you will able to change the resources that external app can access.

Since you are the owner of this App you don't have to worry about privacy. Click on continue.

Once you Continue, Facebook will redirect the browser to the Redirection Endpoint URL which you defined in the app settings and along with the URL, it will send the query parameter code, which is the authorization code. 

http://localhost/team/?code=AQDRsjK348Gmy1upjm7vXVWPA5_n3A64gRs43npMFInR7b3H2-ibuf7s9vMaPnx3uqQt_oT2wx7XeICuIUlR2J-xICsHREiV5RmZ_-tqEPxKZYWfbI9qCtUopJBtLPkvC7KkPlWsshukf2siNYG1oAJTI87cYmNPC5_vhFdJeVAG7jqPu-Wbc1ACrLHMkCvMXXiWryWz0hMOGWMiZfgA8kteKuj0Y18fzL8vI156P1UiOiOr9pAz11OXrEPtga
7bZt4UJzzFJ0V8QJ0rof8Kc2HmKvGoaKpOC6oJBpR09fPo2fRs8umhQ5JMa4pHZwpm7j4nI-t4goKumDxpMMnlHG7R#_=_ 



Obtaining the Access Token

Now we have the authorization code,So have to obtain the access token.For that, 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

1.Grant Type:- Authorization code  AQDRsjK348Gmy1upjm7vXVWPA5_n3A64gRs43npMFInR7b3H2-ibuf7s9vMaPnx3uqQt_oT2wx7XeICuIUlR2J-xICsHREiV5RmZ_-tqEPxKZYWfbI9qCtUopJBtLPkvC7KkPlWsshukf2siNYG1oAJTI87cYmNPC5_vhFdJeVAG7jqPu-Wbc1ACrLHMkCvMXXiWryWz0hMOGWMiZfgA8kteKuj0Y18fzL8vI156P1UiOiOr9pAz11OXrEPtga
7bZt4UJzzFJ0V8QJ0rof8Kc2HmKvGoaKpOC6oJBpR09fPo2fRs8umhQ5JMa4pHZwpm7j4nI-t4goKumDxpMMnlHG7R#_=_ 

2.Client ID :-147505339122170

3.Redirect URL:-  http://localhost/team/

 In the HTTP Headers, we need to add the Authorization header with the App credentials. 

App ID = 147505339122170

App Secret = 04b38deb331c6d34f35263a4556a66bd

AppID:AppSecret = 147505339122170:04b38deb331c6d34f35263a4556a66bd

Base64(AppID:AppSecret) MTQ3NTA1MzM5MTIyMTcwOjA0YjM4ZGViMzMxYzZkMzRmMzUyNjNhNDU1NmE2NmJk

So, I can add the header as following.

Authorization: Basic MTQ3NTA1MzM5MTIyMTcwOjA0YjM4ZGViMzMxYzZkMzRmMzUyNjNhNDU1NmE2NmJk

When sending the request, I can use a HTTP Client browser plugin like RESTClient.

Once you send this request, As a result of this task you can  get the access token.

Retrieve resources using access token

Method - GET
URL :-  https://graph.facebook.com/v2.8/me?fields=id

This will give user's ID 
  {

  "id": "1021167613XXXXXXX"

}

Using this ID, we can post anything on Facebook on behalf of the user.

You can download my source code using below GitHub link  

https://github.com/thusith94/FacebookApp