Consuming Facebook API Using OAuth 2.0

Shalindri Perera
4 min readSep 24, 2019

--

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 facebook API from your web application.

A simple introduction to OAuth2

OAuth2 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 Code 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.

Sample 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 from here

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

No responses yet

Write a response