getting user info google plus api

Question

How can I get public info of a user from google plus login button integrated on the site, here is the code which is giving me email, I need more info which is provide by google plus :

  <div id="signin-button" class="show">
     <div class="g-signin" data-callback="loginFinishedCallback"
                        data-approvalprompt="force"
                        data-clientid="9076269517.apps.googleusercontent.com"
                        data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
                        data-height="short"
                        data-cookiepolicy="single_host_origin">
</div>

java script :

  function loginFinishedCallback(authResult) {
    if (authResult) {
      if (authResult['error'] == undefined){
        gapi.auth.setToken(authResult); // Store the returned token.
        toggleElement('signin-button'); // Hide the sign-in button after successfully signing in the user.
        getEmail();                     // Trigger request to get the email address.
      } else {
        console.log('An error occurred');
      }
    } else {
      console.log('Empty authResult');  // Something went wrong
    }
  }

function getEmail(){
    // Load the oauth2 libraries to enable the userinfo methods.
    gapi.client.load('oauth2', 'v2', function() {
          var request = gapi.client.oauth2.userinfo.get();
          request.execute(getEmailCallback);
        });
  }

  function getEmailCallback(obj){
    var el = document.getElementById('email');
    var email = '';

if (obj['email']) {
  email = 'Email: ' + obj['email'];
}

//console.log(obj);   // Uncomment to inspect the full object.

el.innerHTML = email;
toggleElement('email');
  }



 function toggleElement(id) {
    var el = document.getElementById(id);
    if (el.getAttribute('class') == 'hide') {
      el.setAttribute('class', 'show');
    } else {
      el.setAttribute('class', 'hide');
    }
  }

I tried replacing email with name, userId but getting nothing from these variables.

How can I get basic information of a user when he is logged in through google plus.

Answer 1

The above code snippet no longer seems to work. Once again we are chasing our tails over something google now changed...... error "Access Not Configured. Please use Google Developers Console to activate the API for your project."

I assumed it it might be the "Google+ API" so it is switched on in the developer console, still no working however.

Yet api explorer shows promisingly that some sort of code can work, however its a dogs breakfast trying to discern what javascript code is working there. So so useful api explorer...., but how about google show a simple WORKING example in code that we can look at for this same request?

Answer 2

Similar to how you have loaded the oauth2 v2 client package using gapi.client.load, you will use this again to load the plus v1 client package. This will give you a number of packages and methods under the gapi.client.plus namespace.

The Plus API includes a package to load information about People, including getting them by their User ID or, since they have authenticated with you, you can use the special identifier "me".

Full details and an example are given at https://developers.google.com/+/api/latest/people/get, but here is an (untested) similar function to your getEmail() method that would get their full name:

function getFullName(){
  // Load the Plus library to get the People package and methods
  gapi.client.load('plus', 'v1', function() {
    var request = gapi.client.plus.people.get('me');
    request.execute(getFullNameCallback);
  });
};

function getFullNameCallback(obj){
  var el = document.getElementById('email');
  var name = '';

  if (obj['displayName']) {
    name = 'Name: '+obj.displayName;
  }

  el.innerHTML = name;
  toggleElement('name');
};