August 3, 2015

Login by google account integration for Xamarin.Android and Xamarin.iOS

Brief: 
Google Account integration to the app, helps for the user authentication using their existing Google account and fetch profile information like email id,name and profile pic etc.
UPDATE: Mar 10,2017: It seems that google has been stopped webview approach for native applications. You can refer the solution provided by the xamarin doc.



In  previous post i explained How to handle Large and create Rounded corner imageHow to use Google Place API with Autocomplete in Xamarin AndroidIntegration of google map v2 in xamaron androidWorking on the wrong position and item click event issues with ListView in android xamarin.

Description:
To increase user friendliness in the application it is always recommended to avoid unnecessary lengthy form filling/Registration details,When the same can be achieved from the other sources like social network media.

This may also help to drive more users to your app by faster and easier way of registration process. Here I'm writing about Login by Google in Xamarin application android and iOS.
As of now there were no xamarin component which enables google account integration in Xamarin.Android.

Even i had posted this question earlier and  after going through  google developer documentation and xamarin forums helped me to get the work around,which I'm going to post here.

Implementation steps: 

1) Register in Google developer console 

a) Sign in to Google https://console.developers.google.com/ 
Select "Create an empty project" 


b) In the left sidebar, select "APIs & auth"
Find "Google+ API" and select it to "Enable API"


c) Again from Left menu Select "Credential". Click on "CREATE NEW CLIENT ID" this will open the pop up to configure Client Id.














Select "WebApplication"*
[*if we registered in developer console as installed application(like android) after making OAuth2Authenticator request it will show window with message "Please copy this code switch to your application and paste it there [code]" manually need to close the window and proceed to authentication. to get ride of this webapplication type is chosen]


Click on Configure Consent screen
This open ups screen "Consent screen", enter product name & remaining all fields are optional. Here selected Product logo will display during allow permission after login from app.




d) on selecting  "Save"  shows the Pop up screen where enter "Authorized redirect URIs".


Provide the redirect url with valid url (ex: "http://abcd.com/xyz.aspx") same should be used in the application code. [You can also use https://www.googleapis.com/plus/v1/people/me as redirect uri. It wont display in app even after redirection from login process].

you can leave blank "Authorized JavaScript origins" and Click "Create client Id". 


2.From  the application make an OAuth2Authenticator request. 
Use the xamrin component "Xamarin.Auth". Xamarin.Auth is an Cross-Platform API for authenticating user. So it can be implemented in both android and iOS.
Instantiate OAuth2Authenticator to make login request to Google Authorization Server,on successful authentication return the "access token".[Read more about token limit and expiration https://developers.google.com/identity/protocols/OAuth2

3.Google API Request to get Profile Information. Pass the access token over Google API[https://www.googleapis.com/oauth2/v1/userinfo?access_token=0}] to get user profile basic information.
This successful REST request returns user information in JSON format (How to make REST request and advantage)

4.Deserialize the JSON response to get data in class object.
Use the Xamarin component "Json.NET" to deserialize the json response.


Final Touch : This is the Cross-Platform approach to get the user authentication by google and works well in both android and iOS with sharing maximum code.


Code Snippet: