若要向您的网站添加“使用 Google 账号登录”按钮或“一键登录”和“自动登录”提示，您首先需要：
- 获取 OAuth 2.0 客户端 ID，
- 配置 OAuth 品牌信息和设置
- 加载 Google Identity Services 客户端库，并
- 可选设置内容安全政策，并
- 更新跨源打开者政策
获取您的 Google API 客户端 ID
如需在您的网站上启用 Google Identity 服务，您首先需要设置 Google API 客户端 ID。为此，请完成以下步骤：
- 打开 的 。
- 创建或选择 项目。如果您已经有用于“使用 Google 账号登录”按钮或 Google One Tap 的项目，请使用现有项目和 Web 客户端 ID。创建生产应用时，可能需要多个项目，请为您管理的每个项目重复本部分的其余步骤。
- 点击创建客户端，然后为应用类型选择 Web 应用以创建新的客户端 ID。如需使用现有客户端 ID，请选择一种 Web 应用类型。
将您网站的 URI 添加到已获授权的 JavaScript 来源。URI 仅包含架构和完全限定的主机名。例如
https://www.example.com。（可选）您可以使用重定向到您托管的端点（而非通过 JavaScript 回调）来返回凭据。如果是这种情况，请将您的重定向 URI 添加到已获授权的重定向 URI。重定向 URI 包含 scheme、完全限定的主机名和路径，并且必须符合重定向 URI 验证规则。例如
https://www.example.com/auth-receiver。
使用 data-client_id 或 client_id 字段在 Web 应用中添加客户端 ID。
配置 OAuth 权限请求页面
“使用 Google 账号登录”和“一键登录”身份验证方式都包含权限请求页面，用于告知用户哪个应用请求访问其数据、系统请求访问哪些类型的数据以及适用的条款。
- 打开的“Google Auth Platform”部分中的 。
- 如果出现提示，请选择您刚刚创建的项目。
-
应用名称：向用户征求同意的应用的名称。 该名称应准确反映您的应用，并与用户在其他地方看到的应用名称保持一致。
应用徽标：此图片会显示在意见征求页面上，以帮助用户识别您的应用。该徽标会显示在“使用 Google 账号登录”意见征求页面和账号设置中，但不会显示在“一键式登录”对话框中。
支持电子邮件：显示在用户同意权限请求的页面上，供用户获取支持，并供 G Suite 管理员评估其用户对您应用的访问权限。当用户点击应用名称时，系统会在“使用 Google 账号登录”权限请求页面上向用户显示此电子邮件地址。
已获授权的网域：为了保护您和您的用户，Google 只允许使用 OAuth 进行身份验证的应用使用已获授权的网域。应用的链接必须托管在已获授权的网域上。了解详情。
应用首页链接：显示在“使用 Google 账号登录”权限请求页面上，以及“继续以此身份”按钮下符合 GDPR 规定的一键式免责声明信息中。必须托管在已获授权的网域上。
应用隐私权政策链接：显示在“使用 Google 账号登录”意见征求界面上，以及“继续以此身份”按钮下符合 GDPR 规定的一键式免责声明信息中。必须托管在已获授权的网域上。
应用服务条款链接（可选）：显示在“使用 Google 账号登录”意见征求界面上，以及“继续使用”按钮下符合 GDPR 规定的一键式免责声明信息中。必须托管在已获授权的网域上。
-
- Google API 的范围：范围可让您的应用访问用户的私密数据。对于身份验证，默认范围（电子邮件、个人资料、openid）就足够了，您无需添加任何敏感范围。通常，最佳实践是逐步请求访问权限范围，而不是在需要访问权限时才请求。
查看“验证状态”，如果您的应用需要验证，请点击“提交以供验证”按钮，以提交您的应用以供验证。如需了解详情，请参阅 OAuth 验证要求。
在用户登录时显示 OAuth 设置
使用 FedCM 的一键式登录
在 Chrome 中征得用户同意期间，系统会显示顶级已获授权的网域。仅在跨源但同站 iframe 中使用一键式登录是一种受支持的方法。
不使用 FedCM 的一键登录
在征求用户意见期间，系统会显示应用名称。
图 1. Chrome 中的 One Tap 功能显示的 OAuth 意见征求设置。
加载客户端库
请务必在用户可能会登录的任何网页上加载 Google Identity 服务客户端库。使用以下代码段：
<script src="https://accounts.google.com/gsi/client" async></script>
如果您使用 async 属性加载脚本，则可以优化网页加载速度。
如需查看该库支持的方法和属性列表，请参阅 HTML 和 JavaScript API 参考文档。
内容安全政策
内容安全政策虽然并非强制性要求，但建议您采用此政策来保护应用并防范跨站脚本攻击 (XSS)。如需了解详情，请参阅 CSP 简介和 CSP 和 XSS。
您的内容安全政策可能包含一个或多个指令，例如 connect-src、frame-src、script-src、style-src 或 default-src。
如果您的 CSP 包含以下内容：
connect-src指令中，添加了https://accounts.google.com/gsi/，以允许网页加载 Google Identity 服务服务器端端点的父级网址。frame-src指令中，添加https://accounts.google.com/gsi/以允许一键快捷功能和“使用 Google 账号登录”按钮 iframe 的父级网址。script-src指令中，添加https://accounts.google.com/gsi/client以允许 Google Identity 服务 JavaScript 库的网址。style-src指令中，添加https://accounts.google.com/gsi/style以允许 Google Identity Services 样式表的网址。- 如果未指定上述任何指令（
connect-src、frame-src、script-src或style-src），default-src指令（如果使用）是后备选项。请添加https://accounts.google.com/gsi/，以允许网页加载 Google Identity 服务服务器端端点的父级网址。
使用 connect-src 时，请避免列出各个 GIS 网址。这有助于最大限度地减少更新地理信息系统 (GIS) 时的失败情况。例如，请使用 GIS 父级网址 https://accounts.google.com/gsi/，而不是添加 https://accounts.google.com/gsi/status。
以下响应标头示例可让 Google Identity 服务成功加载和执行：
Content-Security-Policy-Report-Only: script-src
https://accounts.google.com/gsi/client; frame-src
https://accounts.google.com/gsi/; connect-src https://accounts.google.com/gsi/;
跨源打开者政策
若要成功创建弹出式窗口，您可能需要更改 Cross-Origin-Opener-Policy (COOP)，以便使用“使用 Google 账号登录”按钮和“一键登录”功能。
启用 FedCM 后，浏览器会直接呈现弹出式窗口，无需进行任何更改。
但是，停用 FedCM 后，请设置 COOP 标头：
same-origin和- 包含
same-origin-allow-popups。
如果未设置正确的标头，则会中断窗口之间的通信，导致弹出式窗口为空或出现类似 bug。