设置

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

获取您的 Google API 客户端 ID

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

  1. 打开 的 。
  2. 创建或选择 项目。如果您已经有用于“使用 Google 账号登录”按钮或 Google One Tap 的项目，请使用现有项目和 Web 客户端 ID。创建生产应用时，可能需要多个项目，请为您管理的每个项目重复本部分的其余步骤。
  3. 点击创建客户端，然后为应用类型选择 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 Auth Platform”部分的 。
  2. 如果出现提示，请选择您刚刚创建的项目。

  3. 在 中，填写表单，然后点击“保存”按钮。

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

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

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

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

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

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

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

  4. 前往 为您的应用配置镜重。

    1. Google API 的范围：范围可让您的应用访问用户的私密数据。对于身份验证，默认范围（电子邮件、个人资料、openid）就足够了，您无需添加任何敏感范围。最佳实践通常是逐步请求访问权限范围，而不是在需要访问权限时才请求。

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

在用户登录时显示 OAuth 设置

使用 FedCM 的一键式登录

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

在 Chrome 中征得用户同意期间，系统会显示顶级已获授权的网域。仅在跨源但同站 iframe 中使用一键式登录是一种受支持的方法。

不使用 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 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。