显示 Google One Tap

在您的网站上添加一键式登录提示，以便用户注册或登录您的 Web 应用。使用 HTML 和 JavaScript 呈现和自定义提示。

前提条件

按照设置中所述的步骤配置 OAuth 权限请求页面、获取客户端 ID 并加载客户端库。

在登录页面中添加“使用 Google 账号登录”按钮。

提示呈现

将代码段放置在您希望显示“一键式登录”的任意网页中。

HTML

显示“一键式”提示，将 JWT 凭据返回到登录端点。

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-your_own_param_1_to_login="any_value"
   data-your_own_param_2_to_login="any_value">
</div>

data-login_uri 属性是 Web 应用登录端点的 URI。您可以添加自定义数据属性，这些属性会随 Google 签发的 ID 令牌一起发送到登录端点。

如需查看受支持属性的完整列表，请参阅 g_id_onload 参考文档。

JavaScript

显示“一键式登录”提示，将 JWT 凭据返回给浏览器的 JavaScript 回调处理脚本。

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: 'YOUR_CALLBACK_HANDLER'
    });
    google.accounts.id.prompt();
  }
</script>

如需在 JavaScript 中配置一键式提示，您首先需要调用 initialize() 方法。然后，调用 prompt() 方法以显示提示界面。

如需查看数据选项的完整列表，请参阅 idConfiguration 参考文档。

要点 ：使用代码生成器以互动方式自定义一键式登录，并创建要在网站中使用的代码段。

提示状态

如需接收提示界面状态通知，请向 prompt() 方法提供回调函数。

HTML

必须使用 JavaScript 回调处理程序才能接收通知。

JavaScript

在这里，箭头函数用于处理通知更新。

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  google.accounts.id.prompt((notification) => {
    if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
      // try next provider if OneTap is not displayed or skipped
    }
  });
}
</script>

按钮和提示

“使用 Google 账号登录”按钮和“一键登录”提示可能会在同一页面上一起显示。

HTML

通过同时添加 g_id_onload 和 g_id_signin 元素，同时显示“使用 Google 账号登录”按钮和一键登录提示。

<div id="g_id_onload"
   data-client_id="YOUR_GOOGLE_CLIENT_ID"
   data-context="signin"
   data-ux_mode="redirect"
   data-login_uri="https://your.domain/your_login_endpoint"
   data-itp_support="true">
</div>

<div class="g_id_signin"
   data-type="standard"
   data-shape="rectangular"
   data-theme="outline"
   data-text="signin_with"
   data-size="large"
   data-logo_alignment="left">
</div>

JavaScript

通过同时调用 renderButton() 和 prompt() 函数，显示“使用 Google 账号登录”按钮和“一键登录”提示。

<script>
window.onload = function () {
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: 'YOUR_CALLBACK_HANDLER'
  });
  const parent = document.getElementById('google_btn');
  google.accounts.id.renderButton(parent, {theme: "filled_blue"});
  google.accounts.id.prompt();
}
</script>

请勿遮盖“一键登录”

本部分仅适用于 FedCM 处于停用状态时，如果 FedCM 处于启用状态，浏览器会在网页内容上方显示用户提示。

为确保最终用户能够看到显示的所有信息，Google One Tap 不得被任何其他内容遮挡。否则，在某些情况下可能会触发弹出式窗口。

仔细检查您的网页布局和元素的 z-index 属性，确保 Google One Tap 不会被任何其他内容遮盖。即使边框中只有一个像素被遮盖，也可能会触发用户体验流程更改。

要点：请勿用任何其他内容遮盖 Google One Tap 功能。

警告：请勿隐藏 One Tap 提示的任何内容。请勿模糊一键式登录提示内容来自 Google iframe 这一事实。否则，可能会导致项目中止或账号中止。

凭据响应

凭据响应中包含 Google 签名的 JWT。系统会使用 JavaScript 回调函数将响应返回给浏览器，或通过重定向到登录端点将响应返回给您的平台。

重要提示： 收到 JWT 后，强烈建议您在服务器上验证 Google ID 令牌。

JS 回调

使用 HTML 或 JavaScript 配置回调。

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-callback="YOUR_CALLBACK_HANDLER"
</div>

注意： 您不能同时设置 data-login_uri 属性和 data-callback 属性。

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  callback: 'YOUR_CALLBACK_HANDLER'
});

注意： 您不能同时设置 login_uri 字段和 callback 字段。

例如，handleCredentialResponse 会对 JWT 进行解码，并将一些 ID 令牌字段输出到控制台。

<script>
  google.accounts.id.initialize({
    client_id: 'YOUR_GOOGLE_CLIENT_ID',
    callback: handleCredentialResponse
  });

  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);
  }

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

    return JSON.parse(jsonPayload);
  }
</script>

重定向

如需将凭据返回到平台的登录端点，请将该网址添加到 OAuth 2.0 Web 客户端的已获授权的重定向 URI 设置中。

使用 HTML 或 JavaScript 配置重定向 URI。

HTML

<div id="g_id_onload"
  data-client_id="YOUR_GOOGLE_CLIENT_ID"
  data-ux_mode="redirect"
  data-login-uri="YOUR_LOGIN_URI"
</div>

注意： 您不能同时设置 data-login_uri 属性和 data-callback 属性。

JavaScript

google.accounts.id.initialize({
  client_id: 'YOUR_GOOGLE_CLIENT_ID',
  ux_mode: 'redirect',
  login_uri: 'YOUR_LOGIN_URI'
});

注意： 您不能同时设置 login_uri 字段和 callback 字段。