Menu Search Sign up

OAuth

Google OAuth

Reference

https://developers.google.com/identity/protocols/OAuth2

Enable APIs for your project

https://console.developers.google.com/apis/library

Find and enable Google Plus API

Create authorization credentials

https://console.developers.google.com/apis/credentials            

API Key: used for using a google service for public users. For example, calling google map service for public escaperoom users.

Client ID: used for using a google service for logged-in users. You need to create 3 client IDs: web, Android, and iOS

How to specify multiple scopes?

Specify multiple scopes by separating them with space

How to redirect browser to google oauth2 login?

$scope.login=function() {

      var client_id="xxxxxx.apps.googleusercontent.com";

      var scope="https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/userinfo.email";

      var state="12345678";//better be a dynamical nonce

      var redirect_uri="http://www.example.com/googleoauth/index.html";

      var response_type="token";

      var url="https://accounts.google.com/o/oauth2/auth?scope="+scope+"&client_id="+client_id+"&redirect_uri="+redirect_uri+

            "&response_type="+response_type+"&state="+state;

     window.location.replace(url);

};

Processing google oauth2 response

The google oauth2 successful response will be something like below: 

https://www.example.com/myhome/index.html#/state=853jkw55N41525377401217&access_token=ya29.GmGwBRthtSd4PwLkwEF0R6rXPUj2Rjrqyp9YxyMWPL31UqZO2r99o3U4pi2UxN7DhWCzeKXOFYYu8yxKVOE3e6SnoSkRswCHVtdzVfOLYEs4uF0RQ8Q5Pjajm2PkFxHauUhE&token_type=Bearer&expires_in=3600

How to get a user’s email with google plus api?

Reference: https://developers.google.com/+/web/api/rest/latest/people/get

Visit https://console.developers.google.com/apis/library

Find and enable Google Plus API

Include https://www.googleapis.com/auth/userinfo.email in the oauth2 auth scope

Do the following GET request, and tBearer is the access token you got from google oauth2 login response:

var url="https://www.googleapis.com/plus/v1/people/me";

var req = {

      method: 'GET',

      url: url,

      headers: {'Content-Type': 'application/json', 'authorization': tBearer},

      data: ""

};

$http(req)

.then(function (response) {

      var s = JSON.stringify(response.data);

      $('#serverResponse').text(s);

      console.log(response);

})

.catch(function (data) {

      var s = JSON.stringify(data.data);

      $('#serverResponse').text(data.status+"::"+s);

      console.log(data.status);

console.log(data.data);

});

The result (response.data) is a Jason object like below:

{

"kind":"plus#person",

"etag":"\"Sh4n9u6EtD24TM0RmWv7jTXojqc/xfhJUjOA7jiFMtvrDgZm7oj1Oyw\"",

"emails":[{"value":"xxx@xxx.com","type":"account"}],

"objectType":"person",

"id":"118382022177916700000",

"displayName":"",

"name":{"familyName":"","givenName":""},

"image":{"url":"https://lh3.googleusercontent.com/-XdUIqdMkCWA/AAAAAAAAAAI/AAAAAAAAAAA/4252rscbv5M/photo.jpg?sz=50","isDefault":true},

"circledByCount":0,

"isPlusUser":false,

"verified":false

}

How to verify user identity using access token on the server-side?

You can use your javascript code to redirect the user to google login and get the access token from the response.

You then may want to pass the access token to the server side so the server-side can get user profile information such as email from google plus and at the same time verify the access token (anything passed in from browser side will have to be double-checked).

How do you do that? You can just use the apache http client component to make a call to google plus API as in “How to get a user’s email with google plus api?” If you can get the Jason response back with the user profile, then that means the access-token is verified and you can process the user profile information or even make other google API calls on the user’s behalf.