设置

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

获取您的 Google API 客户端 ID

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

  1. 打开 Google API 控制台中的凭据页面。
  2. 创建或选择 Google API 项目。如果您已有用于“使用 Google 帐号登录”按钮或 Google 一键登录的项目，请使用现有项目和 Web 客户端 ID。创建生产应用时，可能需要多个项目，请为您管理的每个项目重复本部分的其余步骤。
  3. 点击创建凭据 > OAuth 客户端 ID，对于应用类型，选择 Web 应用以创建新的客户端 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 Developer Console 中“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 实现一键快捷功能

Chrome 一键式使用 FedCM 显示的 OAuth 意见征求设置

在 Chrome 中，当用户选择同意时，系统会显示顶级已获授权的网域。

一键启动，无 FedCM

一键显示的 OAuth 意见征求设置

系统会在用户同意期间显示应用名称。

图 1. 在 Chrome 中，一键显示的 OAuth 意见征求设置。

内容安全政策

建议使用内容安全政策（可选），以保护应用并防范跨站脚本攻击 (XSS)。如需了解详情，请参阅 CSP 和 XSS 简介以及 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/ 以允许“一键登录”按钮 iframe 的父网址。
  • script-src 指令，添加 https://accounts.google.com/gsi/client 以允许 Google Identity 服务 JavaScript 库的网址。
  • style-src 指令，添加 https://accounts.google.com/gsi/style 以允许 Google Identity 服务样式表的网址。
  • default-src 指令（如果使用的话）在未指定前述任何指令（connect-src、frame-src、script-src 或 style-src）的情况下创建回退机制，添加 https://accounts.google.com/gsi/ 以允许页面加载 Google Identity 服务服务器端端点的父网址。

使用 connect-src 时，请避免列出各个 GIS 网址。这有助于在 GIS 更新时最大程度地减少失败。例如，不要添加 https://accounts.google.com/gsi/status，而应使用 GIS 父级网址 https://accounts.google.com/gsi/。

以下示例响应标头允许 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 一键快捷功能可能需要更改您的 Cross-Origin-Opener-Policy (COOP) 才能成功创建弹出式窗口。

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

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

  • 共享给 same-origin 和
  • 包括 same-origin-allow-popups。

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