Consuming API from web application using OAuth 2.0

-

This post will guide you to get a clear understanding of OAuth 2.0
(Open Authorization) along with an example of how you can implement the OAuth flow in order to consume the facebook API from your web application.



A simple introduction to OAuth2OAuth2 allows to share limited resources between sites without exposing
the user credentials. It is a secure protocol which we can use to retrieve
information in a reliable manner. It provides,
  • Federated Identity
  • delegated Authority
OAuth Grant Types - In OAuth there are four ways that client could obtain the
access token. These ways are known as OAuth grant types.
  1. Authorization Code Grant Type
  2. Implicit Grant Type
  3. Password Protect Grant Type
  4. Client Credentials Grant Type

                       

Authorization Grant Flow
  1. Client sends an authorization request to the Authorization server
  2.  Authorization server requests user consent from the user for the Client to access and claims it requests.
  3. Once the user grants consent, Authorization server provides Redirection Endpoint which is an Authorization Code grant to the Client Application.
  4.  Client Application sends an Access Token Request to the, Authorization server along with the Token Endpoint which is Authorization Code provided previous step.
  5.  Authorization server provides the Access Token and Refresh Token to the Client Application to access the claims requested before.
  6. If the Access Token expires, to request a new access token, Client Application sends a request to Token Endpoint along with the refresh token.

Example web application which consumes the facebook API



1.   Registering the client application in the Facebook developer site 

As the 1st step, we need to register our application in facebook developer website  https://developers.facebook.com/


In order to register our application first, we need to login to our facebook account. once you logged in under my apps we have an option to create a new app.
We can create a new app id by giving an application display name and contact email
Once we finished creating the app Id we should select facebook log in. Under the Facebook, login setup make sure you have enabled the client OAuth login and web OAuth login. Then we have to provide the Valid OAuth Redirect URI.
In This application Redirect URL is  http://localhost:9000/oauthlogin
Once you save the changes under settings -> Basic you will be able to see the app ID and app secret. ( By providing your facebook password you can view and copy the app secret )

 

2.   Obtaining the Authorization code

Expected Facebook’s authorization endpoint
https://www.facebook.com/dialog/oauth?response_type=code&client_id= <app_id>&redirect_uri=https%3A%2F%2Flocalhost%3A8080%2Ffriendlistviewapp%2Fcallback&scope=public_profile%20user_posts%20user_friends%20user_photos
Query Parameters

  • redirect_uri
  • response_type
  • client_id
  • scope

3.   Obtaining the access token

In order to access the resources, we need to obtain an access token. The            Facebook access token can be obtained from the following URL:  https://graph.facebook.com/oauth/access_token 

  • client_id: <app id >
  • redirect_uri: <redirect URL as in the applicaion>,
  • grant_type : "authorization_code"
  • code: Code received by Facebook OAuth

4.   Creating the client application


The client application is implemented using spring-boot and objective of this application is to list friends who have posted in your Facebook timeline.




The GitHub link to the full implemented code can be accessed here

Comments

Post a Comment

Popular posts from this blog

Simple REST API using Node,Express and MongoDB

-
Image
This is a beginners guide  to create a simple REST API which contains basic CRUD operations(Create,Read,Update,Delete) using Node.js,Express js framework and MongoDB. Prerequisites         Node js         MongoDB         WebStrome (IDE)         RESTClient- to test the REST API Creating the API Open your WebStrome IDE and Go to File ->New -> Project >Empty Project Select  the location you want to create the project and hit Create button. Folder Structure Demo |_______DBSchema                   |_____DBConfig |_______UserController                   |_____Controller.js                   |_____User.Route.js |_______app.j...
Read more

Create a basic web Server using express

-
Image
A Framework gives a proper structure to our applications. And it makes our application code maintainable and understandable. There are various frameworks for building applications and web Servers. And Express is one of the most popular Frameworks for building applications.it is a fast, lightweight and well documented framework. And those characteristics became a obvious cause for its popularity. Creating a basic web Server using express Download express Before install express Node.js should be installed. Create a folder and open a terminal inside in that folder.  to create the package JASON file first run npm init --yes command. To install express.js run npm i express command Let’s start coding Open your favorite IDE and select the newly created folder as the workspace. Next create a javaScript filecalled app.js. In the first line express module has loaded using require method which returns another function. In the second ...
Read more