How to use Facebook login on your Website - OAuth 2.0 framework

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.

[www.digitalocean.com]


This is a sample page that you can use as a test run to log in to Facebook.

When we click the button Log In With Facebook it will redirect you to the Facebook Login page.

After that, You will redirect to the Facebook and it will grab details that required to your site.


So as the 1st step you need to create FB app in https://developers.facebook.com site.

Then you have to complete the settings

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

You have to Provide a Valid Site URL under Settings. 

You have to mention your redirect URL in the Code also.

Now the app is registered on Facebook. In the Dashboard, you can see the App ID and the App Secret
After Giving the Correct details to settings your Facebook app can go live.

You have to provide the app id and the app secret in your coding to access the Facebook app.

then we need to get the authorization code

To do that we need to send an HTTP GET request to the Authorize Endpoint of Facebook, which is https://www.facebook.com/dialog/oauth.

Here I have used

• response_type                       = code
• client_id (same as App ID ) = 2205707049656941 . [app ID] 
• redirecti_uri                          =  https://generalinternetsecuritystuff.blogspot.com/2018/05/how-to-use-facebook-login-on-your.html
• scope                                       =  public_profile 

Sample request

https://www.facebook.com/dialog/oauth?response_type=code&client_id=2205707049656941&redirect_uri=https://generalinternetsecuritystuff.blogspot.com/2018/05/how-to-use-facebook-login-on-your.html/&scope=public_profile

Once you Continue, Facebook will redirect the browser to the Redirection URL 

https://generalinternetsecuritystuff.blogspot.com/2018/05/how-to-use-facebook-login-on-your.html/

?code=AQCTl2MLMQ38zLqYWbbs8mFj0W99x86yFwvwXL-uihDNsVZ99VH6bse8idIroA7SzUndgEUBsC4_xWz2D0dDPjnWUk6Sr9CJslCFUah5ktOj6dnRUi71AJv2YWmVVBMG6f6w9wazyX5c7vLG-hD5rdFp70tzYSiAPRgSSVLXNuQxOFh5DdmmKG1ZGmtq97XXFvud6DGGj7EY4mOhZJzrlzG5kWVriUrX2AeHQkdbzEK-t9B315bE95YpGpURNe5t-Rm67yjNwf5e_8lQjNqWDgJi7wQZC0OGxBXmK1UDnXHny1_Z_fHS-Ny3isCjzV7EExUtGPz69Si1qjWyh_pozNZkBPQ9NjUgnnEMM16sWv6hiA#_=_

The bold part is the value of the code parameter.

Then we need to grab the Access Token.

For that, the client web application has to send an HTTP POST request to the Token Endpoint of facebook sending the authorization code received in the previous step.

When sending the request we can use  RESTClient.

Now you have the Access Token.

After completing these steps you can Login to Facebook within any website.