OAuth 2.0 Using Social Login :Facebook

OAuth 2.0 Framework: Social Login With Facebook

Simple definition for OAuth 2.0 framework is that any Standard Web Applications can be Authenticated and Authorized enabling it to obtain limited access to an HTTP service. Where this happens either of on behalf of the owner who have the resources (Resource Owner) or getting approval of resource owner to get the HTTP Service or making the the third-party app to get the resources.

HOW TO USE OAUTH 2.0 FRAMEWORK

Initially, the developer should have a base idea of how to create a Facebook application

accessing https://developers.facebook.com/ and its related tutorials like
Retrieving User Resources from Facebook over the OAuth 2.0 Authorization Code Grant Type

For to gain more idea and demonstration purposes, I have implemented two applications, in order gain idea by the developer.
To get started with, the resources or files can be downloaded from this following GIT HUB links :
  1. https://github.com/suga95/OAuthFBSocialLogin.git
  2. https://github.com/suga95/OAuth2FB.git

1.Lets Look How to run and deploy first application in a step by step process

Prerequisite needs : ReactJS and node modules should be installed properly in the system and it should be done like the below commands in the terminal.


  • When you have successfully downloaded the application, first you should open powershell terminal and type "npm install" in order to install node modules in the directory due to it is REACTJS application.
  • After Successful installation, you should type "npm start" in order to run the app. When its successful the ReactJS app will open in your default browser like in the figure below.



  • Like the above picture,  after successful run the system will prompt the user by asking User Name and Password of Facebook if he/she hasn't logged in that respective browser.
  • After providing the details, system will ask for the user's permission from "User Consent Page” so called in OAuth Terminology. Therefore it's upto his/hers extend that they wish to provide their information.
  • From the above image, system will prompt to ask permission from the user for the FB app called "newApp". By pressing "Review the Info You Provide" User will redirect to the page, which shows like the below image.
  • The above image shows, what the app is getting from the user as information.
  • After giving permission system will output the users details in the wall by calling the respective API of Facebook. The below image shows some of my details are being shown as output.

  • NOTE:- The highlighted yellow, depicts the "Access Token Received" by the app by sending "Grant_type" of "Authorization_code" to the Facebook API to Authenticate itself.

Lets look at how we got all these using implementation wise

1. There should be .env file created in the src -> folder structure in order tell the Facebook app it uses secure "HTTPS" Connection

2. In the terminal there should be "facebook login" should be installed using "npm install react-facebook-login" . For you to get idea, you can refer this site below

3. There should be component folder created in src -> folder structure, and inside component -> folder structure there should be Facebook.js file created like the below image.

When creating the .js file, the Facebook component should be imported by calling "import FacebookLogin from "react-facebook-login";".

In the file, there should be "Scope" mentioned in "State" property.
I have gained access to the following and used "this.setState" to assign with those variable
  • userId
  • Profile name
  • email
  • profile picture

4. Then finally in App.js you can call or render the created Facebook Component in any place of render return you want. The below image shows, calling of Facebook component.


  • YOU CAN LEARN MORE FROM THE BELOW TUTORIAL BY DOING IT MANUALLY BY UNDERSTANDING THE FACT HOW THE GRANT TYPE IS SEND AND ACCESS TOKEN IS RECEIVED.

2.Lets Look How to run and deploy Second application in a step by step process

Prerequisite needs : XAMPP Server

  • Place the downloaded Software Under installed folder, which is xampp -> htdocs and paste the downloaded app.

  • Run the XAMPP's Apache Server.
  • Can run the application by calling the URL: http://localhost:1234/OAuth2Facebook/  -> This can be called in any respective browser.


  • This is the index.html page of Our Application named  "OAuth2Facebook".
  • When pressing the "Facebook" Like Icon, ash shown above, would redirect the user to the "User Consent Page” so called in OAuth Terminology, typically can say that it will show what are the resources from the user account that this external app would be able to access on behalf of you in another pop-up page.
  • The below image shows how an "User Consent Page" Looks like.


  • Even though the user could decide what resources to allow and what not to. The above image shows when the user clicks on "Edit This" Option in User Consent Page, it redirects to this UI for further manipulation.
  • After successful login, facebook will provide a authorization code within the URI link, which we can use that to post it back again to verify and get access. 
  • This scenario we call as receiving "Access Token".
  • The Image below show the UI which displays the valid details of the grant_type, redirect_uri, client_id and authorization_code as under one POST URI link called Request Body
To arrive at the above stage, user should press any area of the "TextArea" in order to obtain the above mentioned parameters. And the press button give the IP address and the country code of  current using user.

From the above value the user can copy Request Body value and Authorization header value in order to obtain "Access Token" Manually.

The Below Images Depicts the success scenario when the above value is copied and pasted to relevant field to receive access token.


  • From that we can gain the relevant data's of Facebook's API call manually.


Lets look at how we got all these using implementation wise

  1. Defining and retrieving the relevant values and sending or posting it to the relevant URI end point 
  • Authorization Endpoint of Facebook is https://www.facebook.com/dialog/oauth 
  • Client ID is the App ID which uniquely identifies the Facebook app ("SampleApp") when it got registered in developers.facebook.com
  • Redirect URI is the same URI that is defined in both the web app and the facebook app, which used to redirect the response of Authorization code and other.
  • The Scope is what your Application can access, and here in this I've specified only "user_friends" as my scope. To get a basic idea on scopes, can visit this site => https://developers.facebook.com/docs/facebook-login/permissions 
  • encodedURIComponent is used to encode uri base 64 encode each and every value when passing as URI.


Comments

Post a Comment

Popular posts from this blog

CSRF PROTECTION: SYNCHRONIZER TOKEN PATTERN

Image
CSRF PROTECTION: SYNCHRONIZER TOKEN PATTERN Cross-Site Request Forgery (CSRF) is an attack that enables or forces an user access unwanted websites of web application by accessing unwanted actions, which there users may be authenticated. CSRF attack takes place specially on t arget state-changing requests, such as  transferring funds, changing their email address etc.  Here the attacker may force or trick the user into executing actions of the attacker's choosing of web application. PREVENTION OF CSRF To prevent these kind of attacks, there are most notably two specification of famous techniques, such as Synchronizer Token Pattern Double Submit Cookies Pattern But in this post we are only going to look about Synchronizer Token Pattern and the way of prevention. In the next chapter, we'll look about Double Submit Cookies Pattern. SYNCHRONIZER TOKEN PATTERN It is a prevention technique, that disables CSRF attacks. More meaningfully, works by embedding ad...
Read more

Double Submit Cookies Pattern

Image
CSRF PROTECTION: DOUBLE SUBMIT COOKIES PATTERN Cross-Site Request Forgery (CSRF) is an attack that enables or forces an user access unwanted websites of web application by accessing unwanted actions, which there users may be authenticated. CSRF attack takes place specially on t arget state-changing requests, such as  transferring funds, changing their email address etc.  Here the attacker may force or trick the user into executing actions of the attacker's choosing of web application. PREVENTION OF CSRF To prevent these kind of attacks, there are most notably two specification of famous techniques, such as Synchronizer Token Pattern Double Submit Cookies Pattern But in this post we are only going to look about Double Submit Cookies Pattern and the way of prevention.  DOUBLE SUBMIT COOKIES PATTERN As regards with synchronizer token pattern, it stores the generated CSRF token value in the server-side and uses that to validate and check if the CSRF token...
Read more