本页介绍了“使用 Google 账号登录”按钮的用户体验 (UX)。
按钮呈现
个性化按钮会显示批准您网站的首次 Google 会话的个人资料信息。已获批准的 Google 会话在您的网站上具有相应的账号，该账号之前曾使用“使用 Google 账号登录”功能登录过。
如果系统显示个性化按钮，用户会知道以下信息：
- 至少有一个有效的 Google 会话。
- 您的网站上有相应的账号。
个性化按钮可让用户在点击按钮之前，快速了解 Google 端和您网站上的会话状态。这对仅偶尔访问您网站的最终用户特别有用。他们可能会忘记是否已创建账号，以及是通过哪种方式创建的。系统会显示一个个性化按钮，提醒用户之前曾使用过“使用 Google 账号登录”功能。因此，这有助于防止在您的网站上创建不必要的重复账号。
为了指示会话状态，系统会以以下方式显示个性化按钮：
一次会话：Google 端只有一次会话。该会话会批准客户端，并且您的网站上有相应的账号。
多个会话：Google 端存在多个会话。这些会话会批准客户端。显示的账号旁边的列表箭头表示已获批准。至少有一个会话在您的网站上具有对应的账号。
无会话：Google 端没有会话，或者所有会话都尚未批准客户端。
当会话状态适合时，系统会自动显示个性化按钮，除非您的按钮设置不允许显示个性化按钮。如果出现以下情况，系统不会显示个性化按钮：
data-type属性为icon。- 将
data-size属性设置为medium或small。 data-width属性设置为小于 200px 的数字。- 第三方 Cookie 被屏蔽，并且未启用按钮的 FedCM 版本。
如果名称或电子邮件地址过长，无法在按钮内显示，系统会以省略号显示。
Federated Credential Manager (FedCM)
适用于网络的 Privacy Sandbox 对 Google 身份服务和用户登录进行了重大更改。这会影响“使用 Google 账号登录”个性化按钮。虽然此按钮不会影响登录流程，但如果第三方 Cookie 被屏蔽，回访用户将看不到个性化按钮。
借助 Federated Credentials Management API (FedCM) 按钮流程，用户将能够在您的网站上看到个性化的“使用 Google 账号登录”按钮。默认情况下，FedCM 处于停用状态，但您可以通过更改一个属性（HTML/JavaScript）来启用 FedCM。FedCM 按钮的优势包括：
改进了回访用户体验：由于用户可以识别其现有账号，因此简化了回访用户的登录流程。事实证明，这种更准确的识别功能有助于提高点击率 (CTR)。此外，与未启用 FedCM 的按钮流程不同，FedCM 按钮流程支持自动选择功能：具有有效 Google 会话的回访用户在点击该按钮后会自动登录，而无需显示账号选择器提示。
增强的功能集成：我们已集成一键登录和自动登录功能，让来自单个依赖方 (RP) 的所有联邦身份凭据管理 (FedCM) 登录功能与 Google 功能协同运作。Chrome 会记录 FedCM 按钮流程中的用户手势并予以执行，以便完成一键式自动登录流程的一次性重新确认。这可确保所有功能都能提供无缝体验。
关键用户体验历程
用户历程因以下状态而异。
Google 网站上的会话状态。以下术语用于指示用户历程开始时的不同 Google 会话状态。
- Has-Google-session：在 Google 网站上至少有一个活跃会话。
- No-Google-session：Google 网站上没有有效的会话。
在用户体验历程开始时，所选 Google 账号是否已批准您的网站。以下术语用于指示不同的审批状态。
- 新用户：所选账号尚未批准您的网站。
- 回访用户：所选账号之前已批准您的网站。
Has-Google-session 新用户历程
“使用 Google 账号登录”按钮。
账号选择器页面。
新用户意见征求页面。
用户确认后，系统会与您的网站共享 ID 令牌。
用户可以点击使用其他账号按钮添加新的 Google 会话，具体请参阅无 Google 会话用户体验历程部分。
流程中倒数第二个屏幕是“正在加载”屏幕，它会自动将用户重定向到您的登录端点，而无需用户执行任何操作。
Has-Google-session 回访用户历程
“使用 Google 账号登录”按钮。
账号选择器页面。
用户选择返回的账号后，系统会与您的网站共享 ID 令牌。
用户可以点击使用其他账号按钮添加新的 Google 会话，请参阅“无 Google 会话”用户体验历程部分。
流程中倒数第二个屏幕是“正在加载”屏幕，它会自动将用户重定向到您的登录端点，而无需用户执行任何操作。
使用“Has-Google-session”自动选择回访用户历程
不使用 FedCM 的“使用 Google 账号登录”按钮不支持自动选择功能。
点击该按钮后，系统会自动选择具有有效 Google 会话的回访用户，而不会显示账号选择器提示。将 auto select 属性设为 true（HTML/JavaScript）。
无 Google 会话的新用户历程
“使用 Google 账号登录”按钮。
用于添加新 Google 会话的第一个页面。
用于添加新 Google 会话的第二个页面。
新用户意见征求页面。
用户确认后，系统会与您的网站共享 ID 令牌。
流程中倒数第二个屏幕是“正在加载”屏幕，它会自动将用户重定向到您的登录端点，而无需用户执行任何操作。
未在 Google 上有会话的回访用户历程
“使用 Google 账号登录”按钮。
用于添加新 Google 会话的第一个页面。
用于添加新 Google 会话的第二个页面。
用户点击下一步按钮后，系统会与您的网站共享 ID 令牌。
Family Link 账号关键用户体验历程
上一部分中介绍的一般关键用户历程仍然适用。以下示例展示了在登录孩子的 Google 账号时，系统会显示的额外流程。
No-Google-session
“使用 Google 账号登录”按钮。
用于添加新儿童 Google 会话（儿童 Google 账号电子邮件地址）的首页。
用于添加新儿童 Google 会话（儿童 Google 账号密码）的第二个页面。
第一个页面，用于从父级账号获得批准以添加新的子级 Google 会话。
第二页：家长批准添加新的 Google 子账号。
第三页：让家长批准添加新的儿童 Google 会话。
第一个页面，用于让家长批准孩子使用其 Google 账号登录应用。
第二页，用于让家长批准孩子使用其 Google 账号登录应用。
第三页：家长批准孩子使用其 Google 账号登录应用。
最后一页，家长需要在此页面批准孩子使用其 Google 账号登录应用。
家长点击继续按钮后，系统会与您的网站共享 ID 令牌。
Has-Google-session
“使用 Google 账号登录”按钮。
账号选择器页面。
第一个页面，用于让家长批准孩子使用其 Google 账号登录应用。
第二页，用于让家长批准孩子使用其 Google 账号登录应用。
第三页：家长批准孩子使用其 Google 账号登录应用。
最后一页，家长需要在此页面批准孩子使用其 Google 账号登录应用。
家长点击继续按钮后，系统会与您的网站共享 ID 令牌。
启用 FedCM 的“使用 Google 账号登录”按钮目前不支持 Family Link 账号。
