自动登录和退出

本页介绍了如何实现与用户如何使用 Google 一键登录或退出账号相关的功能。

自动让用户登录

Google 一键支持自动登录,无需访问者在返回到您的网站时必须执行手动步骤,从而提供顺畅的用户体验 (UX)。用户无需记住他们上次访问时选择的 Google 帐号,这样可以降低在您的平台上创建不必要重复帐号的可能性。

自动登录功能旨在完善“使用 Google 帐号登录”按钮和“一键快捷功能”对话框。它旨在用于整个网站,也就是说,只有在用户首次退出您的网站后,才可以手动注册或切换帐号。

必须满足以下条件,才能发生自动登录:

  • 用户必须首先登录自己的 Google 帐号
  • 之前已同意与您的应用共享其账号个人资料,以及
  • 的用户在过去 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 一键式提示的页面。对于此设置,必须禁止自动选择。否则,用户会自动再次登录,从而导致出现死循环的用户体验。

使用 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。在呈现 One Tap by JavaScript API 时,请检查相关网址参数并停用自动登录(如果存在)。

关键用户体验历程

自动登录页面。

使用 FedCM

FedCM 自动登录弹出式窗口

如果用户未在 5 秒内点击 X 取消,系统会为您的网站共享一个 ID 令牌。

不启用 FedCM

自动登录弹出式窗口。

如果用户未在 5 秒内点击 Cancel 按钮,您的网站会共享一个 ID 令牌。

取消登录时,系统会根据活跃 Google 会话的数量显示帐号选择器页面或回访用户页面。

  • 多个 Google 会话

    使用 FedCM

    FedCM 帐号选择器页面

    不启用 FedCM

    账号选择器页面

  • 单个 Google 会话

    使用 FedCM

    FedCM 帐号选择器页面

    不启用 FedCM

    一键返回用户页面