本页介绍了如何实现与用户使用 Google One Tap 登录或退出登录方式相关的功能。
自动登录用户
Google One Tap 支持自动登录,可免去用户在返回您的网站时必须执行的手动步骤,从而提供顺畅的用户体验 (UX)。用户无需记住上次访问时选择的 Google 账号,从而降低在您的平台上创建不必要的账号重复的几率。
自动登录功能旨在与“使用 Google 账号登录”按钮和“一键登录”对话框相辅相成。此功能旨在用于整个网站,并且只有在用户先前退出您的网站后,才能手动注册或切换账号。
若要实现自动登录,必须满足以下条件:
- 用户必须先登录自己的 Google 账号,并且
- 之前已同意与您的应用分享其账号个人资料,并且
- 在使用 FedCM 时,在过去 10 分钟内仅尝试登录一次。在此窗口中,如果反复尝试登录,系统会显示“一键登录”。
- 使用 FedCM 时,Chrome 会要求用户在每次打开 Chrome 实例时重新确认是否要使用 Google 账号登录相应网站,即使用户在 FedCM 发布之前已批准该网站也是如此。这项变更可能会影响您现有网站上使用“一键式结账”功能的转化率。在 Chrome M121 更新中,自动登录功能改进可缓解转化率下降问题。
对于启用了自动登录的网页,如果满足上述条件,系统会自动返回用户的 ID 令牌凭据,而无需用户进行任何互动。如果不满足这些条件,即使在网页上启用了自动登录功能,用户也会默认使用一键式流程进行登录或同意。如果用户有多个 Google 账号,并且访问您的网站,则必须先登录单个 Google 账号,并已针对该账号提供同意声明。
您可以使用返回的凭据对象的 select_by 字段中的 auto
值来衡量自动登录成功率。
如需启用自动登录,请将 data-auto_select="true"
添加到您的代码中,如以下代码段所示:
<div id="g_id_onload"
data-client_id="YOUR_GOOGLE_CLIENT_ID"
data-login_uri="https://your.domain/your_login_endpoint"
data-auto_select="true">
</div>
退出账号
当用户退出您的网站时,系统可以将其定向到一个网页,其中会自动显示 Google One Tap 提示。对于这种设置,必须禁止自动选择。否则,系统会自动重新登录用户,从而导致死循环用户体验。
使用 FedCM
为了改善用户体验,每次自动登录尝试之间会有一个 10 分钟的静默期。在此期间,系统会改为显示“一键式”提示。用户需要明确点击“一键式登录”才能登录。
不使用 FedCM
如需禁止在用户退出登录后自动选择,请将类名称 g_id_signout
添加到您的所有退出登录链接和按钮。请参阅以下代码段:
<div class="g_id_signout">Sign Out</div>
您还可以使用以下 JavaScript 代码段进行退出:
const button = document.getElementById('signout_button');
button.onclick = () => {
google.accounts.id.disableAutoSelect();
}
因此,系统会通过您网域中的 Cookie 记录已退出状态,以避免死循环用户体验。
退出状态会存储在您网域中的 g_state
Cookie 中。如果您的服务会监控您网域中使用的所有 Cookie,则您需要通知他们有关此 Cookie 的信息。
如果您不想在登录后的页面上加载客户端库,请使用以下解决方案来防止发生退出后死循环的用户体验:
- 在用户退出登录时,将用户重定向到不显示“一键登录”或始终停用自动登录的页面(例如
https://example.com/logged_out
)。 - 在用户退出账号时,向网址添加参数。例如
logged_out=1
。使用 JavaScript API 呈现一键登录时,请检查该网址参数,并在存在时停用自动登录。
关键用户体验历程
自动登录页面。
使用 FedCM
用户可以点击 X 按钮关闭一键式登录提示。出于无障碍设计考虑,即使用户点击 X 按钮,系统也会与您的网站共享 ID 令牌。
为了改善用户体验,每次自动登录尝试之间会有一个 10 分钟的静默期。在此期间,系统会改为显示“一键式”提示。用户需要明确点击“一键登录”才能登录。
不使用 FedCM
如果用户在 5 秒内未点击取消按钮,系统会向您的网站共享一个 ID 令牌。
取消登录时,系统会根据活跃 Google 会话的数量显示账号选择器页面或回访用户页面。
- 多个 Google 会话
- 单次 Google 会话