在您的网站中添加“使用 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 一键登录，请移除 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 的类属性的元素。如果找到匹配的元素，则无论您是否也在 JavaScript 中渲染了该按钮，系统都会使用 HTML 渲染该按钮。为避免两次显示按钮（可能带有冲突的参数），请勿在 HTML 网页中包含与这些名称匹配的 HTML 元素。
按钮语言
按钮语言由浏览器的默认语言或 Google 会话用户的偏好自动确定。您还可以在加载库时，通过向 src 指令添加 hl 参数和语言代码，以及在 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 参数添加到客户端库网址，并调用 google.accounts.id.renderButton 方法，同时将 locale 参数设置为法语：
<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 UX 模式会通过用户浏览器的全页面重定向来执行登录 UX 流程，并且 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。