Oauth

Retrieving User Resources from Facebook over the OAuth 2.0 Authorization Code Grant Type

OAuth 2 is an authorization framework that enables applications to obtain limited access to user accounts on an HTTP service, such as Facebook, GitHub, and DigitalOcean. It works by delegating user authentication to the service that hosts the user account, and authorizing third-party applications to access the user account. OAuth 2 provides authorization flows for web and desktop applications, and mobile devices.

This is a sample page i have created.

Add caption

When I click on “Continue with Facebook!” it will redirect to the face Book login page.

When you login it will redirect you to the page that you wanted to logged in.

So now you can login through Facebook without creating a separate account.

The following diagram shows all the steps associated in this flow.

Step 1 – Registering the Client App in Facebook Developer Website

First step is to create an application in the developer account on Facebook.

Go to the address : https://developers.facebook.com/  (You have to log in to facebook)

Select ( My Apps  ->  Add a New App ) as shown in the below image.

Next add the name of the app with your contact email.

Get started Product Setup as Facebook login 

Under the Settings of the Facebok Login, you need to provide the Redirection URL.(Valid OAuth redirect URLs.

Now the app is registered on Facebook. In the Dashboard, you can see the App ID and the App Secret. In OAuth terminology, we call the same as Client ID and Client Secret, or Consumer Key and Consumer Secret.

Step 2 – 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. Those are ( response_type  , client_id , redirecti_uri , scope )

Sample Request :

https://www.facebook.com/dialog/oauth?

response_type=code&client_id=221066591729700&redirect_uri=https://techtra.000webhostapp.com/user.php

Here i have used

• response_type                      = code
• client_id (same as App ID ) = 221066591729700 .
• redirecti_uri                          = https://techtra.000webhostapp.com/user.php
• scope                                     =  public_profile  

Once you Continue, facebook will redirect the browser to the Redirection Endpoint URL , it will send the query parameter code, which is the authorization code.

Following is the URL I got in the browser.

https://techtra.000webhostapp.com/?

https://techtra.000webhostapp.com/user.php?code=code=AQABAIBqgiQHf_0gjHq5-g_ffyHoyItFnPn4oriVGmeBD2CbuYuom561ZJ3KNd4jQ7_SQCRdLyDiJUK3BTnyZPB7rUo8_Lor0q16mmceqMmK90MBEbuJy9lQJ0NXVsE97osoLe1Dfwh1fZmxhs92jOXPukj4xzfTVZUBvHcQMcAxPjOvUlZLjcHLCmb3r6RAn9trz1hSgVmZXnl370BBkB5-RujzhudnRnum26c5Lpr1jct6NGMfXxPdsw2fl3K9w3wL-kznr9Tb3XIni0LWzxDBPT5frF1HGSlHqyweEQniC3AXmEDrToT374K6dYiHAWPl5_ngHlwbDVW9U8T6yrIr#_=_

red colour text are the value of the code parameter.