在您的网站上添加一键式登录提示，以便用户注册或登录您的 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 不会被任何其他内容遮盖。即使边框中只有一个像素被遮盖，也可能会触发用户体验流程更改。