设置

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

获取您的 Google API 客户端 ID

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

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

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

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

“使用 Google 账号登录”和“一键式身份验证”都包含同意屏幕 这会告诉用户请求访问其数据的应用、 以及适用的条款。

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

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

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

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

    3. 支持电子邮件地址：显示在同意屏幕上，用于提供用户支持，并向 Google 显示 套件管理员评估其用户对您的应用的访问权限。 当用户点击应用名称时，系统会在“使用 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 简介 以及 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 Services 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 Services 加载和执行 成功：

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。

如果未能设置适当的标头，则会破坏窗口之间的通信，从而导致 空白弹出式窗口 或类似的错误