implementing a web application that consumes the service of an OAuth Authorization Server and an OAuth Resource Server.
Have you ever wondered how the "Login with Facebook" or "Login with Google" mechanism is implemented when you are signing up for a new account in different web platforms?
Well this is how it's done!
First of all lets understand the process and the framework of how this mechanism works.
OAuth 2.0 Framework
This framework acts as an intermediate in carrying out the tag an key exchange process between the 3rd party app that requires certain user details and the the HTTP service such as Facebook.
This is an open standard framework strongly supported by Facebook and Google from the start. It gained popularity fast and by today it is widely adopted and supported by many web services such as Amazon, Facebook, Instagram, LinkedIn, Microsoft, Netflix, Paypal and many more.
How it works!
Go through the img: 1.1 and you'll get a basic understanding on how this works.
Lets Get Technical!
To give your application the ability to get user details from a Facebook profile, First we have to make a developers profile in Facebook https://developers.facebook.com/ (img:1.2)
Click on "Add a new app and then from products, select "Facebook Login" (img:1.3 & 1.4)
Select "WEB" since we are setting up the feature for a website login.
And then add your website URL. You will be prompted with a java-script code to asynchronously load the facebook SDK to our website.
Now go to Settings->Basic and note down the app id and the "app secret" value. Make sure to keep the app secret value to yourself.
We have copied the FB SDK Javascript. Now we have to replace the appid with our app id and the version as v2.5 which is the FB SDK Version.
We will be needing the "app secret" later. So hang on to it.
Adding the "Login Using Facebook" Button
For this, Facebook itself provides a snippet.
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"></div>
Add this piece of code ideally right after the <body> tag and then make sure you change the "data-auto-logout-link to "TRUE" where by default it says false.
This will give the logout button after the user logs in through facebook.
This is not necessary but goes under "good practice".
To get the authorization code for the access token we need from FB, first we need to create a GET request with several parameters and send it to the FB Authorize endpoint
. Next step is obtaining the authorization code from facebook. To do that you can send a HTTP GET Request to the Authorization end point and you must send these parameters along with the request i.e. response_type, client_id, redirecti_uri and scope
Sample request-
https://www.facebook.com/dialog/oauth?response_type=code&client_id=659684551029328&redirect_uri=https://sssbymanula.blogspot.com/&scope=public_profile
Here the response type is code, client id is '659684551029328' and redirection endpoint is 'https://sssbymanula.blogspot.com/'
and scope is public_profile( for the scope you can either user user photos friends and as well as user posts).
Now once you continue you will get redirected to the Redirection Endpoint URL you provided when creating the App. This is done by sending the query parameter code, which is the authorization code.
Now you have the authorization code received from facebook!
3. Third step is obtaining the Access Token. To do this a HTTP POST request must be sent by the client web application to the Token Endpoint of the Facebook by sending the authorization code received.
Token endpoint of Facebook- https://graph.facebook.com/oauth/access_token
Following parameters must be sent in the HTTP POST request, i.e. grant_type, cleint_id,redirecti_uri and code.
To do this you can use this HTTP Client browser plugin 'RESTClient'.
1. I used Advanced Rest Client from chrome web store
2. Now send the HTTP POST request. Add URL as https://graph.facebook.com/oauth/access_token and to add the header type Authentication in the field and select Basic Authentication and add App ID to username and App Secret to password.
And you are done! Now you have the access token.
You can refer the complete code from -https://github.com/manula96/OAuth
Well this is how it's done!
First of all lets understand the process and the framework of how this mechanism works.
OAuth 2.0 Framework
This framework acts as an intermediate in carrying out the tag an key exchange process between the 3rd party app that requires certain user details and the the HTTP service such as Facebook.
This is an open standard framework strongly supported by Facebook and Google from the start. It gained popularity fast and by today it is widely adopted and supported by many web services such as Amazon, Facebook, Instagram, LinkedIn, Microsoft, Netflix, Paypal and many more.
How it works!
 | |
| img: 1.1 |
 |
| img:1.2 |
To give your application the ability to get user details from a Facebook profile, First we have to make a developers profile in Facebook https://developers.facebook.com/ (img:1.2)
 | |
| img:1.3 |
 | |
| img: 1.4 |
 | |
| img:1.5 |
And then add your website URL. You will be prompted with a java-script code to asynchronously load the facebook SDK to our website.
Now go to Settings->Basic and note down the app id and the "app secret" value. Make sure to keep the app secret value to yourself.
We have copied the FB SDK Javascript. Now we have to replace the appid with our app id and the version as v2.5 which is the FB SDK Version.
We will be needing the "app secret" later. So hang on to it.
Adding the "Login Using Facebook" Button
For this, Facebook itself provides a snippet.
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false"></div>
Add this piece of code ideally right after the <body> tag and then make sure you change the "data-auto-logout-link to "TRUE" where by default it says false.
This will give the logout button after the user logs in through facebook.
This is not necessary but goes under "good practice".
Step 2 - Obtaining the Authorization Code
To get the authorization code for the access token we need from FB, first we need to create a GET request with several parameters and send it to the FB Authorize endpoint
. Next step is obtaining the authorization code from facebook. To do that you can send a HTTP GET Request to the Authorization end point and you must send these parameters along with the request i.e. response_type, client_id, redirecti_uri and scope
Sample request-
https://www.facebook.com/dialog/oauth?response_type=code&client_id=659684551029328&redirect_uri=https://sssbymanula.blogspot.com/&scope=public_profile
Here the response type is code, client id is '659684551029328' and redirection endpoint is 'https://sssbymanula.blogspot.com/'
and scope is public_profile( for the scope you can either user user photos friends and as well as user posts).
Now once you continue you will get redirected to the Redirection Endpoint URL you provided when creating the App. This is done by sending the query parameter code, which is the authorization code.
Now you have the authorization code received from facebook!
3. Third step is obtaining the Access Token. To do this a HTTP POST request must be sent by the client web application to the Token Endpoint of the Facebook by sending the authorization code received.
Token endpoint of Facebook- https://graph.facebook.com/oauth/access_token
Following parameters must be sent in the HTTP POST request, i.e. grant_type, cleint_id,redirecti_uri and code.
To do this you can use this HTTP Client browser plugin 'RESTClient'.
1. I used Advanced Rest Client from chrome web store
2. Now send the HTTP POST request. Add URL as https://graph.facebook.com/oauth/access_token and to add the header type Authentication in the field and select Basic Authentication and add App ID to username and App Secret to password.
And you are done! Now you have the access token.
You can refer the complete code from -https://github.com/manula96/OAuth
Comments
Post a Comment