新版Google Sign In如何获取用户ID、头像及昵称？

新版Google Identity Services返回的response中，credential字段是一个JWT（JSON Web Token），里面包含了你需要的用户ID、昵称、头像等核心信息。你需要对这个JWT进行解码来提取数据：

步骤1：解析JWT #

JWT由.分隔的三部分组成，我们只需要解码中间的payload部分（第二部分）即可获取用户信息。可以手动解码，也可以使用第三方库（前端解码仅用于展示，后端必须验证令牌的有效性）。

步骤2：提取目标字段 #

解码后的payload包含以下关键字段：

• sub：唯一的用户ID（对应旧版的用户ID）
• name：用户昵称
• picture：用户头像的URL
• email：用户邮箱

修改后的代码示例 #

function parseJwt(token) {
  const base64Url = token.split('.')[1];
  const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
  const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
  }).join(''));

  return JSON.parse(jsonPayload);
}

function handleCredentialResponse(response) {
  // 解析JWT获取用户信息
  const userInfo = parseJwt(response.credential);
  
  // 提取需要的字段
  const userId = userInfo.sub;
  const userName = userInfo.name;
  const userAvatar = userInfo.picture;
  
  console.log('用户ID:', userId);
  console.log('用户昵称:', userName);
  console.log('用户头像:', userAvatar);
  
  // 这里可以添加你的业务逻辑，比如将信息发送到后端等
}

window.onload = function () {
    google.accounts.id.initialize({
        client_id: googleSignInClientId,
        callback: handleCredentialResponse
    });
    google.accounts.id.renderButton(
        document.getElementById("gooDiv"),
        { theme: "outline", size: "large" }  // 自定义按钮样式
    );
    // google.accounts.id.prompt(); // 可选：显示一键登录弹窗
}

注意事项 #

• 前端解码JWT仅用于展示用户信息，必须在后端验证JWT的签名和有效性，避免伪造数据。
• 如果需要更复杂的用户数据，可以通过Google People API获取，但需要额外的权限配置。

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