Google+ Platform

Getting people and profile information

After you have signed in a user with Google, you can access the user's age range, language, public profile information, and people that they have circled. If you request the plus.profile.emails.read scope, you can also get their email address. With this rich social data, you can build engaging experiences and an instant community in your app. For example, you might connect your user with their friends that also use your app or you might make suggestions based on their friends' activities within your app.

Before you begin

You must create an APIs Console project, create an OAuth 2.0 client ID, and register your JavaScript origins and redirect URIs:

  1. Go to the Google Developers Console.
  2. Select a project, or create a new one.
  3. In the sidebar on the left, select APIs & auth. APIs is automatically selected.
  4. In the displayed list of APIs, make sure the Google+ API status is set to ON.
  5. In the sidebar on the left, select Credentials.
  6. In the OAuth section of the page, select Create New Client ID.

    In the resulting Create Client ID dialog box, register the origins where your app is allowed to access the Google APIs. The origin is the unique combination of protocol, hostname, and port.

    1. In the Application type section of the dialog, select Web application.
    2. In the Authorized JavaScript origins field, enter the origin for your app. You can enter multiple origins to allow for your app to run on different protocols, domains, or subdomains. Wildcards are not allowed. In the example below, the second URL could be a production URL.
              http://localhost:8080
      http://myproductionurl.example.com
    3. Select Create Client ID.
    4. In the resulting Client ID for web application panel, note or copy the Client ID and Client secret that your app will need to use to access the APIs.

Retrieve a collection of people

Use the people.list API method to get a list of people in the specified collection. The response contains a list of people objects that the user chose to share with your app. This list does not include the names of circles.

Using the visible collection, you can obtain a list of people who this user has added to one or more circles, limited to the circles visible to the requesting app.

JavaScript example:

// This sample assumes a client object has been created.
// To learn more about creating a client, check out the starter:
//  https://developers.google.com/+/quickstart/javascript
gapi.client.load('plus','v1', function(){
 var request = gapi.client.plus.people.list({
   'userId': 'me',
   'collection': 'visible'
 });
 request.execute(function(resp) {
   console.log('Num people visible:' + resp.totalItems);
 });
});

The people.list API method contains additional examples in other programming languages.

Retrieve profile information

To retrieve profile information for a user, use the people.get API method. To get profile information for the currently authorized user, use the userId value of me.

JavaScript example:

// This sample assumes a client object has been created.
// To learn more about creating a client, check out the starter:
//  https://developers.google.com/+/quickstart/javascript
gapi.client.load('plus','v1', function(){
 var request = gapi.client.plus.people.get({
   'userId': 'me'
 });
 request.execute(function(resp) {
   console.log('Retrieved profile for:' + resp.displayName);
 });
});

The people.get API method contains additional examples in other programming languages.

Retrieve an authenticated user's email address

You can get an email address for the authenticated user by using the https://www.googleapis.com/auth/plus.profile.emails.read scope.

The following code JavaScript code example demonstrates how to:

  1. Use the Google+ Sign-In to authenticate the user and get a valid OAuth 2.0 access token.
  2. Use the token to make a HTTP GET request to the https://www.googleapis.com/plus/v1/people/me REST end point.
  3. Parse the response and display the user's email address.

Try it:

Code example:

<html>
<head>
  <title>Demo: Getting an email address using the Google+ Sign-in button</title>
  <style type="text/css">
  html, body { margin: 0; padding: 0; }
  .hide { display: none;}
  .show { display: block;}
  </style>
  <script type="text/javascript">
  /**
   * Global variables to hold the profile and email data.
   */
   var profile, email;

  /*
   * Triggered when the user accepts the sign in, cancels, or closes the
   * authorization dialog.
   */
  function loginFinishedCallback(authResult) {
    if (authResult) {
      if (authResult['error'] == undefined){
        toggleElement('signin-button'); // Hide the sign-in button after successfully signing in the user.
        gapi.client.load('plus','v1', loadProfile);  // Trigger request to get the email address.
      } else {
        console.log('An error occurred');
      }
    } else {
      console.log('Empty authResult');  // Something went wrong
    }
  }

  /**
   * Uses the JavaScript API to request the user's profile, which includes
   * their basic information. When the plus.profile.emails.read scope is
   * requested, the response will also include the user's primary email address
   * and any other email addresses that the user made public.
   */
  function loadProfile(){
    var request = gapi.client.plus.people.get( {'userId' : 'me'} );
    request.execute(loadProfileCallback);
  }

  /**
   * Callback for the asynchronous request to the people.get method. The profile
   * and email are set to global variables. Triggers the user's basic profile
   * to display when called.
   */
  function loadProfileCallback(obj) {
    profile = obj;

    // Filter the emails object to find the user's primary account, which might
    // not always be the first in the array. The filter() method supports IE9+.
    email = obj['emails'].filter(function(v) {
        return v.type === 'account'; // Filter out the primary email
    })[0].value; // get the email from the filtered results, should always be defined.
    displayProfile(profile);
  }

  /**
   * Display the user's basic profile information from the profile object.
   */
  function displayProfile(profile){
    document.getElementById('name').innerHTML = profile['displayName'];
    document.getElementById('pic').innerHTML = '<img src="' + profile['image']['url'] + '" />';
    document.getElementById('email').innerHTML = email;
    toggleElement('profile');
  }

  /**
   * Utility function to show or hide elements by their IDs.
   */
  function toggleElement(id) {
    var el = document.getElementById(id);
    if (el.getAttribute('class') == 'hide') {
      el.setAttribute('class', 'show');
    } else {
      el.setAttribute('class', 'hide');
    }
  }
  </script>
  <script src="https://apis.google.com/js/client:plusone.js" type="text/javascript"></script>
</head>
<body>
  <div id="signin-button" class="show">
     <div class="g-signin"
      data-callback="loginFinishedCallback"
      data-approvalprompt="force"
      data-clientid="841077041629.apps.googleusercontent.com"
      data-scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read"
      data-height="short"
      data-cookiepolicy="single_host_origin"
      >
    </div>
    <!-- In most cases, you don't want to use approvalprompt=force. Specified
    here to facilitate the demo.-->
  </div>

  <div id="profile" class="hide">
    <div>
      <span id="pic"></span>
      <span id="name"></span>
    </div>

    <div id="email"></div>
  </div>
</body>
</html>

Authentication required

You need to be signed in with Google+ to do that.

Signing you in...

Google Developers needs your permission to do that.