设置

在向您的网站添加“使用 Google 账号登录”“一键式登录”或“自动登录”功能之前，请先设置 OAuth 配置，并根据需要配置网站内容安全政策。

获取您的 Google API 客户端 ID

如需在您的网站上启用“使用 Google 账号登录”，您需要先设置 Google API 客户端 ID。为此，请完成以下步骤：

  1. 打开 Google API 控制台的凭据页面。
  2. 创建或选择 Google API 项目。如果您已经有用于“使用 Google 账号登录”按钮或 Google One Tap 的项目，请使用现有项目和 Web 客户端 ID。创建生产应用时，可能需要多个项目，请为您管理的每个项目重复本部分的其余步骤。
  3. 依次点击创建凭据 > OAuth 客户端 ID，然后为应用类型选择网站应用以创建新的客户端 ID。如需使用现有客户端 ID，请选择 Web 应用类型之一。

  4. 将您网站的 URI 添加到已获授权的 JavaScript 来源。URI 仅包含架构和完全限定主机名。例如 https://www.example.com。

  5. （可选）您可以使用重定向到您托管的端点的方式返回凭据，而不是通过 JavaScript 回调返回凭据。如果是这种情况，请将重定向 URI 添加到已获授权的重定向 URI。重定向 URI 包括 scheme、完全限定的主机名和路径，并且必须符合重定向 URI 验证规则。例如 https://www.example.com/auth-receiver。

“使用 Google 账号登录”和“一键登录”身份验证都包含权限请求页面，用于告知用户哪个应用请求访问其数据、系统请求访问哪些类型的数据以及适用的条款。

  1. 打开 Google 开发者控制台“API 和服务”部分的 OAuth 同意屏幕页面。
  2. 如果出现提示，请选择您刚刚创建的项目。

  3. 在“OAuth 同意屏幕”页面上，填写表单并点击“保存”按钮。

    1. 应用名称：征求用户同意的应用的名称。名称应准确反映您的应用，并与用户在其他地方看到的应用名称保持一致。

    2. 应用徽标：此图片会显示在同意屏幕上，以帮助用户识别您的应用。徽标显示在“使用 Google 账号登录”同意屏幕和账号设置中，但不会显示在“一键式”对话框中。

    3. 支持电子邮件：显示在同意屏幕上，用于提供用户支持，以及供 G Suite 管理员评估其用户对您的应用的访问权限。当用户点击应用名称时，系统会在“使用 Google 账号登录”权限请求页面上向用户显示此电子邮件地址。

    4. Google API 的范围：范围可让您的应用访问用户的私密数据。对于身份验证，默认范围（电子邮件地址、个人资料、openid）就足够了，您无需添加任何敏感范围。一般而言，最佳做法是在需要访问权限时逐步请求范围，而不是预先请求。了解详情

    5. 已获授权的网域：为了保护您和您的用户，Google 只允许使用 OAuth 进行身份验证的应用使用已获授权的网域。您应用的链接必须托管在已获授权的网域上。了解详情。

    6. 应用首页链接：显示在“使用 Google 账号登录”权限请求页面上，以及“继续以此身份”按钮下符合 GDPR 规定的一键式免责声明信息中。必须托管在已获授权的网域上。

    7. 应用隐私权政策链接：显示在“使用 Google 账号登录”意见征求界面上，以及“继续以此身份”按钮下符合 GDPR 规定的一键式免责声明信息中。必须托管在已获授权的网域上。

    8. 应用服务条款链接（可选）：显示在“使用 Google 账号登录”意见征求界面上，以及“继续使用”按钮下符合 GDPR 规定的一键式免责声明信息中。必须托管在已获授权的网域上。

  4. 查看“验证状态”，如果您的应用需要验证，请点击“提交以供验证”按钮，以提交您的应用以供验证。如需了解详情，请参阅 OAuth 验证要求。

在用户登录时显示 OAuth 设置

使用 FedCM 的一键式登录

使用 FedCM 的 Chrome One Tap 显示的 OAuth 意见征求设置

在 Chrome 中征求用户同意期间，会显示顶级“已获授权的网域”。

不使用 FedCM 的一键式登录

One Tap 显示的 OAuth 意见征求设置

在征求用户意见期间，系统会显示应用名称。

图 1. Chrome 中的 One Tap 功能显示的 OAuth 意见征求设置。

内容安全政策

内容安全政策虽然不是强制性要求，但建议您采用此政策来保护应用并防范跨站脚本攻击 (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 服务样式表的网址。
  • 如果未指定上述任何指令（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/;

跨源打开者政策

“使用 Google 账号登录”按钮和 Google One 点按可能需要更改您的 Cross-Origin-Opener-Policy (COOP) 才能成功创建弹出式窗口。

启用 FedCM 后，浏览器会直接呈现弹出式窗口，无需进行任何更改。

但是，停用 FedCM 后，请设置 COOP 标头：

  • same-origin和
  • 包含 same-origin-allow-popups。

如果未设置正确的标头，则会中断窗口之间的通信，导致弹出式窗口为空或出现类似 bug。