G+1

Why Google+

It is increasingly becoming impossible to remember the username and password of every single application one uses. Google+ Sign In is an effective and easy way to overcome this problem.

How to do it?

The simplicity to implement and the security of theGoogle+ Sign In  makes it very popular. Whether the application is a web, mobile or desktop version, Google provides the APIs and sdks which are quite easy to master and implement:

Here we can see how to implement Google+ Sign In in a web application using wcf service.

First of all, we need a client ID and client Scecret which provides the google itself.

Steps to get a Client ID and Client Screct.

1)    login to this Url : https://console.developers.google.com and create a project in it.

2)    Click on “Credentials” under APIs & auth in left side menu and then click on “Create new Client ID”.

G+2

It will popup a window to configure consent screen.

G+ 3

Configure the consent screen:

1)Enter Email Address

2)Enter Product Name

Note: All other fields are optional.

G+ 4

On save it will popup an new window to create the Client ID.

1)    Select the application Type,here we choose Web application.

2)    Enter “Authorized JavaScript origins”->The URL from where we call the google plus api.

3)    Enter “Authorized redirect URIs  “-> The URL to where the google api returns.

G+ 5

4)    Click on “Create ClientID” and it will create client id details.

G+ 6

How to call the Google + APIs?

We need the following parameters

1. oauth url:- authenticating url to google plus

2. valid url:- checking whether the access token is valid or expired

3. scope:- what data the client like to access (eg:- get email, get profile pic, etc)

4. client id:- client id from google’s console account (developers account)

5. redirect url:- the page will be redirected to this url after successful login. this redirect url should be same as given in the google’s console account (developers account)

6. _url:- the complete form of the authentication url (1+3+4+5)

Here we open the _url in a new window then it loads a Google plus login page on this new window.On login submission google send back the access token along with the redirect url which we have given earlier. From this redirect url we will get the access token for that specific user.

Sample  Code:

G+ 7

The below sample code shows how to get the access token from the return url and to check whether the access token is valid or expired.

Sample  Code:

G+ 8

If the access token is valid we can call another api to get the desired user details from google. Here we pass the access token as query string along with the api url. It returns the user details as json object in its response.

Sample  Code:

G+ 9

For more security we can call the above method  by using wcf service.In this case, we call the service using ajax call and pass the access token to the wcf service.In the wcf service we use the same api url to get the user info as used in the above method. It returns the details of users like email,google Accountid,etc.This email id and google accountId  are used in our application to manage the login statuses.

G+ 10

Sample Code:

G+ 11

- Umish Joy