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