Tuesday, July 16, 2013

OAuth Authentication - Part 2 - Signup using Social Networking Sites


September 23, 2013

As a continuation to my previous post, in this post I will be explaining you how to implement  - Sign up to a web application through Social Networks Using OAuth 2.0 protocol.
I will not be going through coding part; instead I will explain the steps to be followed.
In this post, I will explain you how to register our application with Google server & try to access user profile details from google and cature in our database tables for future user authentications.
The implementation includes the below steps:
  •   Registration of Application with Social Network.
  • Authentication along with requesting Scope of access
  •  User Authorizing the application to access resource server data
  • Call to Resource server API for access
  • Saving user details to Application database table
Flow Diagram:


Registering Application with GoogleServer:
Every application which needs to access the resources from Google server needs to be registered with it.
Registration steps are explained below:
  • Enter the Name for your project & Click Create Project.
  • As a next step, we need to create a ClientID for your newly created project. Click on “Create an OAuth 2.0 Client ID”.
  • Enter your Product Name & Home page url. Click on Next button.
  •  Select Web application, provide Redirecturl in the next step, this is the page where the Google Server will redirect to after the user authenticates & authorizes. 
  • Click on Create Client ID. 
  • Now Client ID, Client Secret for your newly registered application will be generated as shown in the image. The Client ID & Client Secret is very important as they are used while making API calls for fetching information from Google. Make sure you do not share Client ID & Client Secret with others.  

Authentication Step:
In the next step, our application should facilitate the user with an authentication process with Google server along with SCOPE of access that the application requesting for the user’s account.
Parameters required for this Authentication step is as below:
  • SCOPE : the access level which the application requesting from the Google server.
  • Response_type : should be Code
  • State:  should include the value of the anti-forgery unique session token
  • Redirect_Uri : This is the url which the Google server will redirect after authentication by the user. This is the same url which you have given in the Registration Step.
Note: This post just explains how to register to a website with google accounts, in a similar way we can access resources from Google/FB/Linkedin/Twitter by sending proper SCOPE parameter and API call.
A sample call to the Google server is shown below:
https://accounts.google.com/o/oauth2/auth?state=%2Fprofile&redirect_uri=http://localhost:14964/GoogleRedirectUrl.aspx&response_type=code&client_id=565625245779.apps.googleusercontent.com&approval_prompt=force&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile
Authorization Step:
Call to the above link will take the user to the Google Login screen, where the user needs to authenticate. Once the user authenticates, he is redirected to Google’s Authorization screen.Google's authorization server will display the name of your application and the Google services that it is requesting permission to access on the user's behalf. The user can then consent or refuse to grant access to your application. After the user consents or refuses to grant access to your application, Google will redirect the user to the redirecturl that you specified in the Registration step.
In this step, the user can check the details which Google will expose to the application, simply clicking on the information image - i in the below image.

If the user grants access to your application, Google will append a code parameter to the redirect_uri  and returns back to the application.
http://localhost/redirecturl?code=4/ux5gNj-_mIu4DOD_gNZdjX9EtOFf
The code  obtained in the above step is a temporary authorization code that can be exchanged for an access_token by making a HTTPs post request which should include the below parameters:



The above HTTPs request returns JSON object with below details:

"access_token" : "ya29.AHES6ZTtm7SuokEB-RGtbBty9IIlNiP9-     eNMMQKtXdMP3sfjL1Fc",  "token_type" : "Bearer",  "expires_in" : 3600,  "refresh_token" : "1/HKSmLFXzqP0leUihZp2xUt3-5wkU7Gmu2Os_eBnzw74"
}
Accessing APIS Step:
Finally, an API call should be made by sending the Access_token received in the previous step to fetch the required profile details from the Resource server.


Google returns the user profile details to the application as shown below where we can store the user’s required data in our application tables for subsequent login authentications.



Thank you folks for your encouragement, please contact me for code level implementation.

Reactions:

4 comments:

Post a Comment