How to get user profile while signing in with Google account?

[Yiming]

I have a website, how can I get user profile while a website visitor visits my website and click the button "Sign in with Google account"?

According to the page of https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid, I added a callback function as:

<div id="g_id_onload"
     data-client_id="MY_CLIENT_ID"
     data-context="signin"
     data-ux_mode="popup"
     data-callback="handleGoogleSignIn"
     data-login_uri="https://MY_LOGIN_PAGE"
     data-auto_prompt="false">
</div>

My callback function is:

function handleGoogleSignIn(response)
{
    alert(response.credential)
}

I found there are four keys in response: cliendId, client_id, crential, and select_by.

I also found this page https://developers.google.com/identity/sign-in/web/sign-in. But it is a deprecated page.

My questions is how to get user profile (such as user name, email...) while signing in with user's Google account? Thanks.

[Willbin · Accepted solution]

Hello @Sunshine,

Since you already have a working Google sign-in button, you may try this at your Callback Function.

function handleGoogleSignIn(response) {
    if (response.error) {
        // Handle errors (e.g., user cancellation, network issues)
        console.error('Error signing in:', response.error);
    } else {
        // Access user profile information
        const accessToken = response.credential;

        // Use the access token to retrieve user profile data
        fetch('https://www.googleapis.com/userinfo/v2/me', {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        })
        .then(response => response.json())
        .then(data => {
            // Extract the desired user profile information (e.g., name, email)
            console.log('User profile:', data);
            // Use the information as needed (e.g., display on your website, store securely)
        })
        .catch(error => {
            // Handle errors during profile data retrieval
            console.error('Error fetching user profile:', error);
        });
    }
}

This function receives the response from Google Sign-In and retrieves the user's profile information.

• The function checks for potential errors in the response.
• It extracts the access token, which is used to retrieve the user's profile data.
• A fetch request is made to the Google UserInfo endpoint (https://www.googleapis.com/userinfo/v2/me), passing the access token in the authorization header.
• The response is parsed to extract user profile data like name, email, and profile picture.
• You can use this information as needed on your website or store it securely (never store access tokens directly).

[Willbin]

Hello @Yiming,

Welcome to Google Cloud Community!

To retrieve profile information for a user, use the getBasicProfile() method. For example:

// auth2 is initialized with gapi.auth2.init() and a user is signed in.

if (auth2.isSignedIn.get()) {
  var profile = auth2.currentUser.get().getBasicProfile();
  console.log('ID: ' + profile.getId());
  console.log('Full Name: ' + profile.getName());
  console.log('Given Name: ' + profile.getGivenName());
  console.log('Family Name: ' + profile.getFamilyName());
  console.log('Image URL: ' + profile.getImageUrl());
  console.log('Email: ' + profile.getEmail());
}

Please also note that a Google account's email address can change, so don't use it to identify a user. Instead, use the account's ID, which you can get on the client with getBasicProfile().getId(), and on the backend from the sub claim of the ID token.

[Sunshine]

To my understanding, getBasicProfile() has been deprecated, and is not working for me. What is the current solution to getting a user's name and email (and other profile information) after they have signed in with Google. I currently have a working sign-in with google button redirect to a page, but am unable to get/show the user's information. 

[Willbin · Accepted solution]

Hello @Sunshine,

Since you already have a working Google sign-in button, you may try this at your Callback Function.

function handleGoogleSignIn(response) {
    if (response.error) {
        // Handle errors (e.g., user cancellation, network issues)
        console.error('Error signing in:', response.error);
    } else {
        // Access user profile information
        const accessToken = response.credential;

        // Use the access token to retrieve user profile data
        fetch('https://www.googleapis.com/userinfo/v2/me', {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        })
        .then(response => response.json())
        .then(data => {
            // Extract the desired user profile information (e.g., name, email)
            console.log('User profile:', data);
            // Use the information as needed (e.g., display on your website, store securely)
        })
        .catch(error => {
            // Handle errors during profile data retrieval
            console.error('Error fetching user profile:', error);
        });
    }
}

This function receives the response from Google Sign-In and retrieves the user's profile information.

• The function checks for potential errors in the response.
• It extracts the access token, which is used to retrieve the user's profile data.
• A fetch request is made to the Google UserInfo endpoint (https://www.googleapis.com/userinfo/v2/me), passing the access token in the authorization header.
• The response is parsed to extract user profile data like name, email, and profile picture.
• You can use this information as needed on your website or store it securely (never store access tokens directly).

[tenbasetom]

Hi, what's the difference between these two userinfo endpoints? Pretty confusing.

1. https://www.googleapis.com/userinfo/v2/me
2. https://www.googleapis.com/oauth2/v1/userinfo

[SlavaUkraine]

Why i recive 401 error ?!

"Request is missing required authentication credential. Expected OAuth 2 access token, login cookie or other valid authentication credential. See https://developers.google.com/identity/sign-in/web/devconsole-project."

* i still got valid Token from response ...

[Willbin · Accepted solution]

Hello @SlavaUkraine,

Make sure you're including the token correctly in the authorization header of your request. The typical format is Authorization: Bearer <your_access_token>. Verify also that the token you're using has the necessary scopes for the API you're trying to access. You might need to request a token with the appropriate permissions during the initial authentication flow.

To debug the 401 error further, examine the request logs to see how the token is being included and interpreted. Try using a tool like curl with the correct authorization header to see if the token is valid from an external source. It will help you isolate if the issue is with your code or the token itself.

[martin293743]

To debug the 401 error further, examine the request logs to see how the token is being included and interpreted. Try using a tool like curl with the correct authorization header to see if the token is valid from an external source. It will help you isolate if the issue is with your code or the token itself.