Google认证后如何获取用户详情？旧代码失效求解决方案

你当前使用的GSI客户端与旧版gapi.auth2库不兼容，因此原有的auth2.currentUser.get().getBasicProfile()方法无法正常工作。以下是基于GSI的正确用户信息获取方案：

核心修改说明 #

GSI登录成功后，回调函数会接收包含credential字段的响应对象，该字段是JWT格式的id_token，需要通过GSI提供的google.accounts.id.decodeCredential方法解析，从中提取用户的ID、姓名、邮箱等信息。

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="https://accounts.google.com/gsi/client" async></script>
    <div id="g_id_onload"
         data-client_id="MYCLIENTID"
         data-context="signin"
         data-ux_mode="popup"
         data-callback="callbackFunction"
         data-auto_prompt="false">
    </div>

    <div class="g_id_signin"
         data-type="standard"
         data-shape="pill"
         data-theme="filled_black"
         data-text="signin_with"
         data-size="large"
         data-logo_alignment="left">
    </div>
    <script>
        function callbackFunction(response) {
            // 解析id_token获取用户信息
            const userInfo = google.accounts.id.decodeCredential(response.credential);
            
            // 输出用户详情
            console.log('用户ID:', userInfo.sub);
            console.log('全名:', userInfo.name);
            console.log('名:', userInfo.given_name);
            console.log('姓:', userInfo.family_name);
            console.log('头像URL:', userInfo.picture);
            console.log('邮箱:', userInfo.email);
            console.log('邮箱是否验证:', userInfo.email_verified);
        }
    </script>
</body>
</html>

关键字段说明 #

解析后的userInfo对象包含以下常用字段：

• sub: Google用户的唯一ID（不可修改，永久有效）
• name: 用户全名
• given_name: 用户的名
• family_name: 用户的姓
• picture: 用户头像URL
• email: 用户邮箱地址
• email_verified: 邮箱是否已验证（布尔值）

注意事项 #

• 确保你已在Google Cloud控制台中为OAuth客户端ID启用了相应的API权限
• id_token仅用于前端解析用户信息，如需后端验证身份，需将credential发送到后端并使用Google的验证服务校验

内容的提问来源于stack exchange，提问作者xeotN