新版Sign In with Google如何将返回的邮箱值传入HTML隐藏字段

1. 实现decodeJwtResponse自定义函数 #

谷歌返回的response.credential是JWT格式的加密字符串，你需要自行实现解析函数，以下是无第三方依赖的纯JavaScript实现：

function decodeJwtResponse(credential) {
  // 拆分JWT结构，取载荷部分（中间段）
  const payloadBase64 = credential.split('.')[1];
  // 转换URL安全的Base64编码为标准Base64格式
  const standardBase64 = payloadBase64.replace(/-/g, '+').replace(/_/g, '/');
  // 解码并转换为UTF-8格式的JSON字符串
  const jsonStr = decodeURIComponent(
    atob(standardBase64)
      .split('')
      .map(c => `%${('00' + c.charCodeAt(0).toString(16)).slice(-2)}`)
      .join('')
  );
  return JSON.parse(jsonStr);
}

2. 新增HTML隐藏字段 #

在你的页面表单中添加用于存储邮箱的隐藏字段，示例如下：

<!-- 放在你的form表单内部 -->
<input type="hidden" id="user_email" name="user_email">

3. 修改回调函数完成值传递 #

调整handleCredentialResponse函数，在解析到邮箱后直接赋值给隐藏字段即可，完整代码如下：

<div id="g_id_onload"
     data-client_id="替换为你自己的GOOGLE_CLIENT_ID"
     data-callback="handleCredentialResponse">
</div>
<script>
// 解析JWT的自定义函数
function decodeJwtResponse(credential) {
  const payloadBase64 = credential.split('.')[1];
  const standardBase64 = payloadBase64.replace(/-/g, '+').replace(/_/g, '/');
  const jsonStr = decodeURIComponent(
    atob(standardBase64)
      .split('')
      .map(c => `%${('00' + c.charCodeAt(0).toString(16)).slice(-2)}`)
      .join('')
  );
  return JSON.parse(jsonStr);
}

// 谷歌登录回调函数
function handleCredentialResponse(response) {
  const responsePayload = decodeJwtResponse(response.credential);
  // 原有日志输出保留
  console.log("ID: " + responsePayload.sub);
  console.log('Full Name: ' + responsePayload.name);
  console.log('Given Name: ' + responsePayload.given_name);
  console.log('Family Name: ' + responsePayload.family_name);
  console.log("Image URL: " + responsePayload.picture);
  console.log("Email: " + responsePayload.email);

  // 给隐藏字段赋值
  document.getElementById('user_email').value = responsePayload.email;
}
</script>

注意事项 #

• 隐藏字段的id属性值要和getElementById的参数保持完全一致
• 必须将data-client_id替换为你在谷歌开发者后台申请的对应客户端ID
• 该实现全程使用原生JavaScript，无需引入任何额外依赖

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