How to get user email from google plus oauth

Set your scopes to:

https://www.googleapis.com/auth/userinfo.email and
https://www.googleapis.com/auth/userinfo.profile

And use the endpoint:

https://www.googleapis.com/oauth2/v1/userinfo?alt=json

Usage:

get https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=youraccess_token

You will get JSON:

{ "id": "xx", 
  "name": "xx", 
  "given_name": "xx", 
  "family_name": "xx", 
  "link": "xx", 
  "picture": "xx", 
  "gender": "xx", 
  "locale": "xx" 
}

The scopes have changed for Google+ Sign-In.

Set your scopes to:

https://www.googleapis.com/auth/plus.login
https://www.googleapis.com/auth/userinfo.email

The JavaScript calls look like this:

gapi.client.load('oauth2', 'v2', function() {
  gapi.client.oauth2.userinfo.get().execute(function(resp) {
    // Shows user email
    console.log(resp.email);
  })
});

gapi.client.load('plus', 'v1', function() {
  gapi.client.plus.people.get( {'userId' : 'me'} ).execute(function(resp) {
    // Shows profile information
    console.log(resp);
  })
});

More information https://developers.google.com/+.

Edit: Note that you do not need scopes for plus.me or userinfo.profile.

Now we use GoogleAPI with Google+

As on December 2013, here is the most updated website;

https://developers.google.com/+/

Then for SignIn for Web

https://developers.google.com/+/web/signin/

Choosing a sign-in flow

->Client-side flow

->Initiate the sign-in flow with JavaScript (I believe this is the latest technology)

https://developers.google.com/+/web/signin/javascript-flow

Initiating the Google+ Sign-In flow with JavaScript

You can start the Google+ Sign-In flow by using the gapi.auth.signIn() method. This method gives you a lot of flexibility to decide how and when to prompt the user to authorize your app and sign-in.

https://developers.google.com/+/web/api/javascript#gapiauthsigninparameters

gapi.auth.signIn(parameters)

Initiates the client-side Google+ Sign-In OAuth 2.0 flow. Similar to gapi.auth.authorize() except that this method supports the advanced Google+ Sign-In features, including over-the-air installs of Android apps. This method is a JavaScript alternative to using the Google+ Sign-In button widget.

https://developers.google.com/+/web/signin/javascript-flow

Try it Page to trigger the sign-in flow with gapi.auth.signIn()

https://google-developers.appspot.com/+/demos/signin_demo_render (SourceCode)

You will try this and for your own, follow

Step 1: Create a client ID and client secret

Ignore the following step,

Actually, you need clientID only and replace the one in the source code of Try it above.

Add scope https://www.googleapis.com/auth/userinfo.email

var options = {
  'callback': loginFinished,
  'approvalprompt': 'force',
  'clientid': 'YOURID.apps.googleusercontent.com',
  'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email',
  'requestvisibleactions': 'http://schemas.google.com/CommentActivity http://schemas.google.com/ReviewActivity',
  'cookiepolicy': 'single_host_origin'
};

Add

gapi.client.load('oauth2', 'v2', function()
  {
    gapi.client.oauth2.userinfo.get()
      .execute(function(resp)
      {
        // Shows user email
        console.log(resp.email);
      });
  });

Here is the full working and concise code based on the above:

<html>
<head>
  <title>Google+ Sign-in button demo: rendering with JavaScript</title>
  <style type="text/css">
  html, body { margin: 0; padding:0;}
  #signin-button {
   padding: 5px;
  }
  #oauth2-results pre { margin: 0; padding:0; width: 600px;}
  .hide { display: none;}
  .show { display: block;}
  </style>

  <script src="https://apis.google.com/js/client:platform.js" type="text/javascript"></script>
  <script type="text/javascript">
var loginFinished = function(authResult)
{
  if (authResult)
  {
    console.log(authResult);
  }

  gapi.client.load('oauth2', 'v2', function()
  {
    gapi.client.oauth2.userinfo.get()
      .execute(function(resp)
      {
        // Shows user email
        console.log(resp.email);
      });
  });

};

var options = {
  'callback': loginFinished,
  'approvalprompt': 'force',
  'clientid': 'YOURID.apps.googleusercontent.com',
  'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email',
  'requestvisibleactions': 'http://schemas.google.com/CommentActivity http://schemas.google.com/ReviewActivity',
  'cookiepolicy': 'single_host_origin'
};

var renderBtn = function()
{
  gapi.signin.render('renderMe', options);
}
  </script>

</head>
<body onload ="renderBtn()">
   <div id="renderMe"></div>  
</body>
</html>

No HTML output, but console. so open browser's Developers Console tools to view the result.

I did this in angularjs, in the Ionic framework, and it works., try this.

controller("OauthExample", function($scope, $cordovaOauth, $http) {

    $scope.googleLogin = function() {
        $cordovaOauth.google("YOUR CLIENTID", ["https://www.googleapis.com/auth/userinfo.email", "https://www.googleapis.com/auth/userinfo.profile"]).then(function(result) {
            window.localStorage.setItem("access_token", result.access_token);
            $scope.token=JSON.stringify(result);

        }, function(error) {
            console.log(error);
        });
    }


        $scope.getProfileInfo = function() {
            console.log(window.localStorage.getItem('access_token'));
        $http.defaults.headers.common.Authorization = "Bearer " + window.localStorage.getItem("access_token");
        $http.get("https://www.googleapis.com/oauth2/v1/userinfo?alt=json")
            .success(function(data) {
                console.log(data);
                console.log(data.email);
            })
            .error(function(error) {
                console.log(error);
            });
    }

});

How to get user email from google plus oauth

No HTML output, but console. so open browser's Developers Console tools to view the result.

Related

Recent Posts