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.
Solved! Go to 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.
https://www.googleapis.com/userinfo/v2/me
), passing the access token in the authorization header.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.
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.
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.
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.
https://www.googleapis.com/userinfo/v2/me
), passing the access token in the authorization header.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
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 ...
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.
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.