在您的网站上添加一键式登录提示，以便用户注册或登录您的 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 参考文档。
提示状态
使用 JavaScript 回调函数监听提示界面状态通知。
系统会针对以下时刻发送通知：
显示时刻：此时刻发生在调用
prompt()方法之后。该通知包含一个布尔值，用于指示界面是否显示。跳过的时刻：当“一键式登录”提示因自动取消、手动取消而关闭，或者 Google 未能签发凭据（例如，所选会话已退出 Google）时，就会发生这种情况。
在这种情况下，我们建议您继续尝试其他身份提供程序（如果有）。
关闭时刻：当 Google 成功检索到凭据，或用户想要停止凭据检索流程时，就会发生这种情况。例如，当用户开始在登录对话框中输入用户名和密码时，您可以调用
google.accounts.id.cancel()方法来关闭一键式登录提示并触发关闭时刻。
HTML
使用 data-moment_callback 属性指定 JavaScript 回调函数。必须有回调处理程序才能接收通知。
<html>
<head>
<script>
function continueWithNextIdp(notification) {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// try Next provider if One Tap is not displayed or skipped
}
}
</script>
</head>
<body>
...
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-moment_callback="continueWithNextIdp"
</div>
...
</body>
</html>
为了方便用户登录或注册，您可以与多个身份提供方通信以查找可用的凭据。您可能需要了解我们的提示界面状态，以便调用下一个身份提供程序。
JavaScript
将回调处理脚本作为参数传递给 google.accounts.id.prompt，此处使用箭头函数来处理通知更新。
<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 签名的 JWT。系统会使用 JavaScript 回调函数将响应返回给浏览器，或通过重定向到登录端点将响应返回给您的平台。
JS 回调
使用 HTML 或 JavaScript 配置回调。
HTML
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-callback="YOUR_CALLBACK_HANDLER"
</div>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: 'YOUR_CALLBACK_HANDLER'
});
例如，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>
JavaScript
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
ux_mode: 'redirect',
login_uri: 'YOUR_LOGIN_URI'
});