在您的网站中添加一键快捷功能提示，让用户能够注册或登录您的 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 令牌一起发送到登录端点。
（可选）使用 data-skip_prompt_cookie 属性和 Cookie 来控制是否在无法更改内容的静态 HTML 页面中显示一键快捷功能提示。如果设置了指定的 Cookie，则不会显示提示。
使用可选的 data-context 属性更改提示标题中使用的文本。例如，data-context: "signup" 会将“登录”更改为
“注册”。
默认情况下，如果用户点击提示之外的区域，一键快捷功能提示会自动关闭。如果您将 data-cancel_on_tap_outside 属性设置为 false，则可以停用此行为。
如需查看受支持属性的完整列表，请参阅 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() 方法以显示提示界面。
使用可选的 context 字段更改提示标题中使用的文本。
例如，context: 'signup' 会将“登录”更改为“注册”。
默认情况下，如果用户点击提示之外的区域，一键登录提示会自动关闭。如果您将 cancel_on_tap_outside 属性设置为 false，则可以停用此行为。
如需查看数据选项的完整列表，请参阅 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 一键快捷功能不得被任何其他内容遮盖。否则，在某些情况下可能会触发弹出式窗口。
请仔细检查页面布局和元素的 z-index 属性，确保 Google 一键登录不会被任何其他内容遮盖。即使仅遮盖边框中的单个像素，也可能会触发用户体验流程更改。
凭据响应
凭据响应中包含 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>
重定向
如需将凭据返回到平台的登录端点，请将网址添加到 “已获授权的重定向 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'
});