How to get avatar for gmail user?

Question

I'm creating an email-based application in React with the Gmail API. I'm loading in a bunch of messages, and I want to display avatars of the senders.

I'm using this package to display avatars. I'd like to either have a Google Id or an image url. It would also be nice to be able to get images for other popular services, such as Outlook and Yahoo mail.

Other people have asked this same question, but all the answers either seem to use the Picasa API (which is deprecated) or the Google+ API (which will be deprecated).

EDIT: Yes, the react-avatar package claims it can find an avatar based on supplied user data, but all it does with the email is find a Gravatar, which many people don't have.

Answer 1

You need to get the md5 of the email first, then

var email = "[email protected]",
    size = 80; 
yourImg.src = 'http://www.gravatar.com/avatar/' + MD5(email) + '.jpg?s=' + size;

https://jsfiddle.net/a4g8s5y2/1/

Answer 2

What you want to do is not possible via the GMAIL API or any other Google API

You can not take a Google email address and search for the image or any other personal profile information associated with that email address via any Google API endpoint. Explanation below.

Get image of the sender of an email

Gmail API lists the email messages that have been sent to and by a user. The gmail API is basically returning the mail server email message response in MIME format which if you check does not contain a profile image. It does not return to you the image of a the sender or the reciever.

Google does not have endpoint for developers to use to searching on a gmail.com email address and returning any user profile information (including image) this would be against the users privacy. A user would have to grant you permission to see their image and you dont have that permission for every gmail user who may be sending emails to your authenticated user.

The gmail website probably does some kind of check on gmail email addresses and puts the picture on attached with the account. Google has access to the profile data of all GMAIL users, google cant give you this same access as it would be against the users privacy. If its not a gmail account they may check Gravatar to see if an image has been set up for this email address. Again there is no way for you to request the image of a google user using their email address.

• You could check Gravatar to see if one had been set up for that email
• If the authenticated user has added this user as a contact and has added a picture for this user you may be able to use the People api.

In the past i have recommend to users that as an image they take the first letter of the users email address and create an image using that letter. You may also want to use a question mark which is actually what gmail does when its website cant find an email from the user probably by checking Gravatar.

Get image of current authenticated user

You can get this information from the people.get endpoint just make sure that you have requested the profile scope from the user when you authenticate them

GET https://people.googleapis.com/v1/people/me

It returns a large response containing the users profile information part of it contains the users picture

"photos": [
    {
      "url": "https://lh3.googleusercontent.com/a-/AAuE7mDuIWqXzrrp-65cIhXSD2HjCI8WYsWHR0fDx5_wQPY=s100", 
      "metadata": {
        "source": {
          "type": "PROFILE", 
          "id": "117200475532672775346"
        }, 
        "primary": true
      }
    }
  ], 

The offical sample project for people api contains information on how to connect to the api. Just make sure to add the 'profile' scope

The code to get the picture should be something like this.

function getPicture() {
        gapi.client.people.people.get({
           'resourceName': 'people/me',
           'pageSize': 10,
           'personFields': 'photos',
         }).then(function(response) {
           var connections = response.result.connections;
           appendPre('Connections:');

           if (connections.length > 0) {
             for (i = 0; i < connections.length; i++) {
               var person = connections[i];
               if (person.url && person.url.length > 0) {
                 appendPre(person.names[0].url)
               } else {
                 appendPre("No display name found for connection.");
               }
             }
           } else {
             appendPre('No connections found.');
           }
         });
      }