google realtime api -> gapi.auth.authorize -> get email address of user

Question

I have a google realtime API web application and I use the "realtime-client-utils.js" library to authenticate that is accessible at GitHub: https://github.com/googledrive/realtime-utils.

When I call RealtimeUtils.authorize(onAuthComplete, usePopup)

I get a response object for the onAuthComplete callback method. This response object contains information about the authorization process:

But I need the email address of the google user that just authenticated himself. Can anybody tell me how I can get the email address?

I tried to use this tutorial: https://developers.google.com/+/web/people/#retrieve-an-authenticated-users-email-address

Answer 1

There are a few ways to retrieve the user's email address. The easiest is to use the id_token returned on the user's access_token that you receive (#3 below).

1) You can use the UserInfo endpoint after including the 'profile' OAuth scope: https://www.googleapis.com/oauth2/v1/userinfo?alt=json&access_token=[token]. Making a dirty query to this API with your access token will return the user's email address.

2) As noted in a different answer, you can use the People.Get API.

3) (In my opinion the best option) Request and use the id_token (JWT) that can be returned along with a valid Google Access Token. For this you must include the 'https://www.googleapis.com/auth/userinfo.email' OAuth scope, and when making the call for Google Authorization, the 'response_type' param must be set to 'token id_token'. You can do this by editing the Realtime API to pass in 'response_type: "token id_token" along with the other params to gapi.auth.authorize.

Once you have your id_token, it needs to be decoded. You can use the code below and just pass in the response object that you receive. The resulting decoded id_token will contain the user's email address.

function decodeJWT(rawToken)
{
    var decoded;

    if (rawToken && rawToken.id_token)
    {
        var jwt = rawToken.id_token;

        var parts = jwt.split('.');

        try
        {
            decoded = JSON.parse(b64_to_utf8(parts[1]));
        }
        catch (err)
        {
            // Handle Error
        }
    }

    return decoded;
}

function b64_to_utf8(str)
{
    var utf8;

    try
    {
        utf8 = decodeURIComponent(escape(window.atob(str)));
    }
    catch (err)
    {
        // Handle Error
    }

    return utf8;
}

Good luck!

Answer 2

You can try to use the People: get method to get a person's profile. Also, this method returns a person resource in the response body.

Here is the response that you can get by doing this.

{
  "kind": "plus#person",
  "etag": etag,
  "nickname": string,
  "occupation": string,
  "skills": string,
  "birthday": string,
  "gender": string,
  "emails": [
    {
      "value": string,
      "type": string
    }
  ],
  "urls": [
    {
      "value": string,
      "type": string,
      "label": string
    }
  ],
  "objectType": string,
  "id": string,
  "displayName": string,
  "name": {
    "formatted": string,
    "familyName": string,
    "givenName": string,
    "middleName": string,
    "honorificPrefix": string,
    "honorificSuffix": string
  },
  "tagline": string,
  "braggingRights": string,
  "aboutMe": string,
  "relationshipStatus": string,
  "url": string,
  "image": {
    "url": string,

  },
  "organizations": [
    {
      "name": string,
      "department": string,
      "title": string,
      "type": string,
      "startDate": string,
      "endDate": string,
      "location": string,
      "description": string,
      "primary": boolean
    }
  ],
  "placesLived": [
    {
      "value": string,
      "primary": boolean
    }
  ],
  "isPlusUser": boolean,
  "language": string,
  "ageRange": {
    "min": integer,
    "max": integer
  },
  "plusOneCount": integer,
  "circledByCount": integer,
  "verified": boolean,
  "cover": {
    "layout": string,
    "coverPhoto": {
      "url": string,
      "height": integer,
      "width": integer
    },
    "coverInfo": {
      "topImageOffset": integer,
      "leftImageOffset": integer
    }
  },
  "domain": string
}

For more information, check this SO question if it can help you.