显示“使用 Google 帐号登录”按钮

将“使用 Google 账号登录”按钮添加到您的网站，以便用户注册或登录您的 Web 应用。使用 HTML 或 JavaScript 呈现按钮和属性，以自定义按钮形状、大小、文本和主题。

个性化的登录按钮。

用户选择 Google 账号并提供同意后，Google 会使用 JSON Web 令牌 (JWT) 分享用户个人资料。如需简要了解登录流程和用户体验期间涉及的步骤，请参阅运作方式。了解个性化按钮会介绍影响按钮向用户显示方式的不同条件和状态。

前提条件

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

按钮呈现

如需显示“使用 Google 账号登录”按钮，您可以选择使用 HTML 或 JavaScript 在登录页面上呈现该按钮：

HTML

使用 HTML 呈现登录按钮，将 JWT 返回到平台的登录端点。

<html>   <body>     <script src="https://accounts.google.com/gsi/client" async></script>     <div id="g_id_onload"         data-client_id="YOUR_GOOGLE_CLIENT_ID"         data-login_uri="https://your.domain/your_login_endpoint"         data-auto_prompt="false">     </div>     <div class="g_id_signin"         data-type="standard"         data-size="large"         data-theme="outline"         data-text="sign_in_with"         data-shape="rectangular"         data-logo_alignment="left">     </div>   <body> </html>

具有 g_id_signin 类的元素会呈现为“使用 Google 账号登录”按钮。按钮是根据数据属性中提供的参数进行自定义的。

如需在同一页面上显示“使用 Google 账号登录”按钮和“Google One 一键登录”，请移除 data-auto_prompt="false"。建议您这样做，以减少障碍并提高登录率。

如需查看数据属性的完整列表，请参阅 g_id_signin 参考文档页面

JavaScript

使用 JavaScript 呈现登录按钮，将 JWT 返回给浏览器的 JavaScript 回调处理程序。

<html>   <body>     <script src="https://accounts.google.com/gsi/client" async></script>     <script>       function handleCredentialResponse(response) {         console.log("Encoded JWT ID token: " + response.credential);       }       window.onload = function () {         google.accounts.id.initialize({           client_id: "YOUR_GOOGLE_CLIENT_ID"           callback: handleCredentialResponse         });         google.accounts.id.renderButton(           document.getElementById("buttonDiv"),           { theme: "outline", size: "large" }  // customization attributes         );         google.accounts.id.prompt(); // also display the One Tap dialog       }     </script>     <div id="buttonDiv"></div>   </body> </html>

指定为 renderButton 的第一个参数的元素会显示为“使用 Google 账号登录”按钮。在此示例中，buttonDiv 用于在页面上呈现按钮。系统使用 renderButton 的第二个参数中指定的属性自定义按钮。

为了最大限度地减少用户摩擦，系统会调用 google.accounts.id.prompt() 以显示一键式登录，作为使用按钮注册或登录的第二种方式。

GIS 库会解析 HTML 文档，查找 ID 属性设为 g_id_onload 或类属性包含 g_id_signin 的元素。如果找到匹配的元素，系统会使用 HTML 渲染按钮，无论您是否还在 JavaScript 中渲染了按钮。为避免显示两次按钮（可能具有冲突的参数），请勿在 HTML 网页中添加与这些名称匹配的 HTML 元素。

按钮语言

按钮语言由浏览器的默认语言或 Google 会话用户的偏好设置自动确定。您还可以通过以下方式手动选择语言：在加载库时将 hl 参数和语言代码添加到 src 指令中，并在 HTML 中添加可选的 data-locale 或 locale 参数 data-locale，或在 JavaScript 中添加 locale。

HTML

以下代码段展示了如何通过将 hl 参数添加到客户端库网址并将 data-locale 属性设置为法语，以法语显示按钮语言：

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script> <div class="g_id_signin" data-locale="fr"> </div>

JavaScript

以下代码段展示了如何通过将 hl 参数添加到客户端库网址并将 locale 参数设置为法语来以法语显示按钮语言：google.accounts.id.renderButton

<script src="https://accounts.google.com/gsi/client?hl=fr" async></script> <script>   google.accounts.id.renderButton(     document.getElementById("buttonDiv"),     { locale: "fr" }   ); </script>

凭据处理

征得用户同意后，Google 会将 JSON Web 令牌 (JWT) 凭据（称为 ID 令牌）返回到用户的浏览器，或直接返回到由您的平台托管的登录端点。

您选择在何处接收 JWT 取决于您是使用 HTML 还是 JavaScript 呈现按钮，以及使用的是弹出式窗口还是重定向用户体验模式。

使用 popup 用户体验模式可在弹出式窗口中执行登录用户体验流程。这通常对用户的干扰较小，是默认的用户体验模式。

使用以下方式呈现按钮时：

HTML

您可以设置以下任一选项：

  • data-callback 将 JWT 返回给回调处理程序，或者
  • data-login_uri，以便 Google 使用 POST 请求直接将 JWT 发送到您的登录端点。

如果同时设置了这两个值，则 data-callback 优先于 data-login_uri。在使用回调处理程序进行调试时，设置这两个值可能会很有帮助。

JavaScript

您必须指定 callback，因为在 JavaScript 中呈现按钮时，弹出式窗口模式不支持重定向。如果设置了此参数，系统会忽略 login_uri。

如需详细了解如何在 JS 回调处理程序中解码 JWT，请参阅处理返回的凭据响应。

重定向模式

使用 redirect 用户体验模式时，系统会使用用户浏览器的全页重定向来执行登录用户体验流程，Google 会使用 POST 请求直接将 JWT 返回到您的登录端点。这通常会给用户带来更大的干扰，但被认为是最安全的登录方法。

使用以下方式呈现按钮时：

  • HTML：可选择将 data-login_uri 设置为登录端点的 URI。
  • JavaScript 可选择将 login_uri 设置为登录端点的 URI。

如果您未提供值，Google 会将 JWT 返回到当前网页的 URI。

您的登录端点 URI

设置 data-login_uri 或 login_uri 时，请使用 HTTPS 和绝对 URI。例如 https://example.com/path。

仅当在开发期间使用 localhost 时才允许使用 HTTP：http://localhost/path。

如需详细了解 Google 的要求和验证规则，请参阅使用安全的 JavaScript 源和重定向 URI。