“使用 Google 帐号登录”HTML API 参考文档

本参考页面介绍了“使用 Google 账号登录”HTML 数据属性 API。 您可以使用此 API 在网页上显示“一键式登录”提示或“使用 Google 账号登录”按钮。

ID 为“g_id_onload”的元素

您可以将“使用 Google 账号登录”功能的数据属性放在任何可见或不可见的元素中，例如 <div> 和 <span>。唯一的要求是，元素 ID 设置为 g_id_onload。请勿将此 ID 用于多个元素。

数据特性

下表列出了数据属性及其说明：

属性
data-client_id	应用的客户端 ID
data-auto_prompt	显示 Google One 点按选项。
data-auto_select	在 Google One Tap 上启用自动选择功能。
data-login_uri	登录端点的网址
data-callback	JavaScript ID 令牌处理程序函数名称
data-native_login_uri	密码凭据处理程序端点的网址
data-native_callback	JavaScript 密码凭据处理程序函数名称
data-native_id_param	credential.id 值的参数名称
data-native_password_param	credential.password 值的参数名称
data-cancel_on_tap_outside	控制在用户点击提示以外的区域时是否取消提示。
data-prompt_parent_id	一键式提示容器元素的 DOM ID
data-skip_prompt_cookie	如果指定的 Cookie 具有非空值，则跳过一键式登录。
data-nonce	ID 令牌的随机字符串
data-context	一键提示中的标题和字词
data-moment_callback	提示界面状态通知监听器的函数名称
data-state_cookie_domain	如果您需要在父网域及其子网域中调用 One Tap，请将父网域传递给此属性，以便使用单个共享 Cookie。
data-ux_mode	“使用 Google 账号登录”按钮的用户体验流程
data-allowed_parent_origin	允许嵌入中间 iframe 的来源。如果存在此属性，One Tap 会在中间 iframe 模式下运行。
data-intermediate_iframe_close_callback	当用户手动关闭一键关闭时，替换默认中间 iframe 行为。
data-itp_support	在 ITP 浏览器上启用升级后的一键式用户体验。
data-login_hint	通过提供用户提示来跳过账号选择。
data-hd	按网域限制账号选择。
data-use_fedcm_for_prompt	允许浏览器控制用户登录提示，并协调您网站和 Google 之间的登录流程。
data-enable_redirect_uri_validation	启用符合重定向 URI 验证规则的按钮重定向流程。

属性类型

以下部分包含有关每个属性的类型的详细信息和一个示例。

data-client_id

此属性是应用的客户端 ID，您可以在 Google Cloud 控制台中查找和创建此 ID。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	是	data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

此属性决定是否显示“一键式”显示。默认值为 true。如果此值为 false，系统不会显示 Google One 点按选项。如需了解详情，请参阅下表：

类型	是否必须提供	示例
布尔值	可选	data-auto_prompt="true"

data-auto_select

如果只有一个 Google 会话已批准您的应用，此属性决定是否自动返回 ID 令牌（无需任何用户互动）。默认值为 false。如需了解详情，请参阅下表：

类型	是否必须提供	示例
布尔值	可选	data-auto_select="true"

data-login_uri

此属性是登录端点的 URI。

此值必须与您在 API 控制台中配置的 OAuth 2.0 客户端的某个已获授权的重定向 URI 完全匹配，并且必须符合我们的重定向 URI 验证规则。

如果当前页面是您的登录页面，则可以省略此属性。在这种情况下，凭据会默认发布到此页面。

如果没有定义回调函数，并且用户点击“使用 Google 账号登录”或“一键登录”按钮，或者发生自动登录，系统会将 ID 令牌凭据响应发布到您的登录端点。

如需了解详情，请参阅下表：

类型	可选	示例
网址	默认值为当前页面的 URI 或您指定的值。 当 data-ux_mode="popup" 和 data-callback 已设置时，系统会忽略此值。	data-login_uri="https://www.example.com/login"

您的登录端点必须处理包含正文中包含 ID 令牌值的 credential 键的 POST 请求。

以下是向您的登录端点发出的请求示例：

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

data-callback

此属性是用于处理返回的 ID 令牌的 JavaScript 函数的名称。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	如果未设置 data-login_uri，则此字段为必填字段。	data-callback="handleToken"

可以使用 data-login_uri 和 data-callback 属性中的任一属性。它取决于以下组件和用户体验模式配置：

• data-login_uri 属性是“使用 Google 账号登录”按钮 redirect 用户体验模式的必需项，该模式会忽略 data-callback 属性。

• 对于 Google 一键快捷功能和 Google 登录按钮 popup 用户体验模式，必须设置这两种属性中的一种。如果同时设置了这两个属性，则 data-callback 属性的优先级更高。

HTML API 不支持命名空间中的 JavaScript 函数。请改用不带命名空间的全局 JavaScript 函数。例如，使用 mylibCallback 而不是 mylib.callback。

data-native_login_uri

此属性是密码凭据处理程序端点的网址。如果您设置了 data-native_login_uri 属性或 data-native_callback 属性，则在没有 Google 会话时，JavaScript 库会回退到原生凭据管理器。您无法同时设置 data-native_callback 和 data-native_login_uri 属性。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-login_uri="https://www.example.com/password_login"

数据原生回调

此属性是用于处理从浏览器的原生凭据管理器返回的密码凭据的 JavaScript 函数的名称。如果您设置 data-native_login_uri 属性或 data-native_callback 属性，则当没有 Google 会话时，JavaScript 库会回退到原生凭据管理器。您不得同时设置 data-native_callback 和 data-native_login_uri。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-native_callback="handlePasswordCredential"

HTML API 不支持命名空间中的 JavaScript 函数。请改用不带命名空间的全局 JavaScript 函数。例如，使用 mylibCallback 而不是 mylib.callback。

data-native_id_param

将密码凭据提交到密码凭据处理程序端点时，您可以为 credential.id 字段指定参数名称。默认名称为 email。如需了解详情，请参阅下表：

类型	是否必须提供	示例
网址	可选	data-native_id_param="user_id"

data-native_password_param

将密码凭据提交到密码凭据处理程序端点时，您可以为 credential.password 值指定参数名称。默认名称为 password。如需了解详情，请参阅下表：

类型	是否必须提供	示例
网址	可选	data-native_password_param="pwd"

data-cancel_on_tap_outside

此属性用于设置在用户点击提示以外的部分时，系统是否取消一键式验证请求。默认值为 true。如需停用此功能，请将值设置为 false。如需了解详情，请参阅下表：

类型	是否必须提供	示例
布尔值	可选	data-cancel_on_tap_outside="false"

data-prompt_parent_id

此属性用于设置容器元素的 DOM ID。如果未设置此政策，窗口右上角会显示一键快捷提示。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-prompt_parent_id="parent_id"

data-skip_prompt_cookie

如果指定 Cookie 具有非空值，则此属性会跳过一键快捷功能。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-skip_prompt_cookie="SID"

数据 Nonce

此属性是 ID 令牌用来防止重放攻击的随机字符串。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-nonce="biaqbm70g23"

Nonce 长度受环境支持的 JWT 大小上限以及各个浏览器和服务器 HTTP 大小限制的约束。

data-context

此属性用于更改一键式提示中显示的标题和消息的文本。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-context="use"

下表列出了所有可用上下文及其说明：

上下文
signin	“使用 Google 账号登录”
signup	“使用 Google 账号注册”
use	“通过 Google 使用”

data-moment_callback

此属性是提示界面状态通知监听器的函数名称。如需了解详情，请参阅数据类型 PromptMomentNotification。

如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-moment_callback="logMomentNotification"

HTML API 不支持命名空间中的 JavaScript 函数。 请改用不带命名空间的全局 JavaScript 函数。例如，使用 mylibCallback 而不是 mylib.callback。

data-state_cookie_domain

如果您需要在父网域及其子网域中显示一键快捷功能，请将父网域传递给此属性，以便使用单个共享状态 Cookie。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-state_cookie_domain="example.com"

data-ux_mode

此属性用于设置“使用 Google 账号登录”按钮使用的用户体验流程。默认值为 popup。此属性对一键式体验没有影响。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-ux_mode="redirect"

下表列出了可用的用户体验模式及其说明。

用户体验模式
popup	在弹出式窗口中执行登录用户体验流程。
redirect	通过全页重定向执行登录用户体验流程。

data-allowed_parent_origin

允许嵌入中间 iframe 的来源。如果显示此属性，一键快捷功能会在中间 iframe 模式下运行。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串或字符串数组	可选	data-allowed_parent_origin="https://example.com"

下表列出了受支持的值类型及其说明。

值类型
string	单个网域 URI。	“https://example.com”
string array	以英文逗号分隔的网域 URI 列表。	"https://news.example.com,https://local.example.com"

如果 data-allowed_parent_origin 属性的值无效，中间 iframe 模式的 One Tap 初始化将失败并停止。

也支持通配符前缀。例如，"https://*.example.com" 会匹配 example.com 及其所有级别的子网域（例如 news.example.com、login.news.example.com）。使用通配符时需要注意以下事项：

• 模式字符串不能仅由通配符和顶级域名组成。例如，https://*.com 和 https://*.co.uk 无效；如上所述，"https://*.example.com" 与 example.com 及其子网域匹配。您还可以使用逗号分隔列表来表示 2 个不同的网域。例如，"https://example1.com,https://*.example2.com" 与网域 example1.com、example2.com 和 example2.com 的子网域匹配
• 通配符网域必须以安全的 https:// 架构开头，因此 "*.example.com" 被视为无效。

data-intermediate_iframe_close_callback

当用户通过点按 One Tap 界面中的“X”按钮手动关闭 One Tap 时，替换默认的中间 iframe 行为。默认行为是立即从 DOM 中移除中间 iframe。

data-intermediate_iframe_close_callback 字段仅在 iframe 中间模式下有效。并且只会影响中间 iframe，而不是一键式 iframe。系统会在调用回调之前移除 One Tap 界面。

类型	是否必须提供	示例
函数	可选	data-intermediate_iframe_close_callback="logBeforeClose"

HTML API 不支持命名空间中的 JavaScript 函数。 请改用不带命名空间的全局 JavaScript 函数。例如，使用 mylibCallback 而不是 mylib.callback。

data-itp_support

此字段用于确定是否应在支持智能反跟踪 (ITP) 的浏览器上启用 升级后的一键式用户体验。默认值为 false。如需了解详情，请参阅下表：

类型	是否必须提供	示例
布尔值	可选	data-itp_support="true"

data-login_hint

如果您的应用事先知道应登录哪位用户，则可以向 Google 提供登录提示。成功后，系统会跳过账号选择步骤。接受的值包括：电子邮件地址或 ID 令牌 sub 字段。

如需了解详情，请参阅 login_hint 的 OpenID Connect 文档。

类型	是否必须提供	示例
字符串。可以是电子邮件地址或 ID 令牌中的 sub 字段值。	可选	data-login_hint="[e-mail]"

data-hd

如果用户有多个账号，并且应仅使用其 Workspace 账号登录，请使用此属性向 Google 提供域名提示。成功后，在选择账号期间显示的用户账号将仅限于所提供的网域。通配符值：* 仅向用户提供 Workspace 账号，并在账号选择期间排除个人账号 ([e-mail])。

如需了解详情，请参阅 hd 的 OpenID Connect 文档。

类型	是否必须提供	示例
字符串。完全限定域名或 *。	可选	data-hd="*"

data-use_fedcm_for_prompt

允许浏览器控制用户登录提示，并协调您网站和 Google 之间的登录流程。默认值为 false。如需了解详情，请参阅迁移到 FedCM 页面。

类型	是否必须提供	示例
布尔值	可选	data-use_fedcm_for_prompt="true"

data-enable_redirect_uri_validation

启用符合重定向 URI 验证规则的按钮重定向流程。

类型	是否必须提供	示例
布尔值	可选	data-enable_redirect_uri_validation="true"

包含类“g_id_signin”的元素

如果您向元素的 class 属性添加 g_id_signin，该元素将呈现为“使用 Google 账号登录”按钮。

您可以在同一页面上呈现多个“使用 Google 账号登录”按钮。每个按钮都可以有自己的视觉设置。这些设置由以下数据属性定义。

视觉数据属性

下表列出了视觉数据属性及其说明：

属性
data-type	按钮类型：图标或标准按钮。
data-theme	按钮主题。例如，filled_blue 或 filled_black。
data-size	按钮大小。例如，“小”或“大”。
data-text	按钮文本。例如，“使用 Google 账号登录”或“使用 Google 注册”。
data-shape	按钮形状。例如矩形或圆形。
data-logo_alignment	Google 徽标对齐方式：左对齐或居中对齐。
data-width	按钮宽度（以像素为单位）。
data-locale	按钮文本将以此属性中设置的语言呈现。
data-click_listener	如果已设置，系统会在用户点击“使用 Google 账号登录”按钮时调用此函数。
data-state	如果已设置，此字符串会随 ID 令牌一起返回。

属性类型

以下部分包含有关每个属性的类型的详细信息和一个示例。

data-type

按钮类型。默认值为 standard。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	是	data-type="icon"

下表列出了所有可用的按钮类型及其说明：

类型
standard	包含文字或个性化信息的按钮。
icon	不带文本的图标按钮。

data-theme

按钮主题。默认值为 outline。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-theme="filled_blue"

下表列出了可用主题及其说明：

主题
outline	标准按钮主题。
filled_blue	填充蓝色的按钮主题。
filled_black	填充了黑色的按钮主题。

data-size

按钮大小。默认值为 large。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-size="small"

下表列出了可用的按钮大小及其说明。

大小
large	一个大按钮。
medium	中等大小的按钮。
small	一个小按钮。

data-text

按钮文字。默认值为 signin_with。具有不同 data-text 属性的图标按钮的文本没有视觉差异。唯一的例外情况是，为实现无障碍功能而读出文本。

如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-text="signup_with"

下表列出了可用的按钮文字及其说明：

文本
signin_with	按钮文本为“使用 Google 账号登录”。
signup_with	按钮文本为“使用 Google 账号注册”。
continue_with	按钮文本为“使用 Google 账号继续”。
signin	按钮文字为“登录”。

data-shape

按钮形状。默认值为 rectangular。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-shape="rectangular"

下表列出了可用的按钮形状及其说明：

形状
rectangular	矩形按钮。如果用于 icon 按钮类型，则与 square 相同。
pill	药丸形状的按钮。如果用于 icon 按钮类型，则与 circle 相同。
circle	圆形按钮。如果用于 standard 按钮类型，则与 pill 相同。
square	方形按钮。如果用于 standard 按钮类型，则与 rectangular 相同。

data-logo_alignment

Google 徽标的对齐方式。默认值为 left。此属性仅适用于 standard 按钮类型。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-logo_alignment="center"

下表列出了可用的对齐方式及其说明：

logo_alignment
left	将 Google 徽标左对齐。
center	将 Google 徽标居中对齐。

数据宽度

按钮的最小宽度（以像素为单位）。可用的宽度上限为 400 像素。

如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-width=400

data-locale

可选。使用指定语言区域显示按钮文本，否则默认为用户的 Google 账号或浏览器设置。加载库时，将 hl 参数和语言代码添加到 src 指令，例如：gsi/client?hl=<iso-639-code>。

如果未设置，则使用浏览器的默认语言区域或 Google 会话用户的偏好设置。因此，不同的用户可能会看到不同版本的本地化按钮，并且可能具有不同的尺寸。

如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-locale="zh_CN"

data-click_listener

您可以使用 data-click_listener 属性定义一个 JavaScript 函数，以便在用户点击“使用 Google 账号登录”按钮时调用该函数。

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

在此示例中，当用户点击“使用 Google 账号登录”按钮时，控制台会记录“点击的 Google 账号登录...”消息。

数据状态

可选，由于同一网页上可以呈现多个“使用 Google 账号登录”按钮，因此您可以为每个按钮分配一个唯一的字符串。系统会将同一字符串随 ID 令牌一起返回，以便您确定用户点击了哪个按钮进行登录。

如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选	data-state="button 1"

服务器端集成

您的服务器端端点必须处理以下 HTTP POST 请求。

ID 令牌处理程序端点

ID 令牌处理程序端点会处理 ID 令牌。根据相应账号的状态，您可以让用户登录，并将他们定向到注册页面或将他们定向到账号关联页面以获取更多信息。

HTTP POST 请求包含以下信息：

格式	名称	说明
Cookie	g_csrf_token	一个随机字符串，随每个对处理程序端点的请求而改变。
请求参数	g_csrf_token	与上一个 Cookie 值 g_csrf_token 相同的字符串。
请求参数	credential	Google 签发的 ID 令牌。
请求参数	select_by	凭据的选择方式。
请求参数	state	此参数仅在用户点击“使用 Google 账号登录”按钮进行登录时定义，并且已指定该按钮的 state 属性。

凭据

解码后，ID 令牌如以下示例所示：

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "[e-mail]", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Eliza",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

sub 字段是 Google 账号的全局唯一标识符。仅使用 sub 字段作为用户的标识符，因为它在所有 Google 账号中必须具有唯一性，并且不得重复使用。请勿使用电子邮件地址作为标识符，因为 Google 账号在不同的时间点可以有多个电子邮件地址。

您可以使用 email、email_verified 和 hd 字段确定 Google 是否托管某个电子邮件地址并对其具有权威性。如果 Google 是权威机构，则会确认用户是合法账号所有者。

Google 具有权威性的情形：

• email 带有 @gmail.com 后缀，这是一个 Gmail 账号。
• email_verified 为 true 且已设置 hd，则表示这是 Google Workspace 账号。

用户无需使用 Gmail 或 Google Workspace 即可注册 Google 账号。 当 email 不包含 @gmail.com 后缀且 hd 不存在时，Google 不是权威的，我们建议使用密码或其他验证方法来验证用户身份。email_verified 也可能为 true，因为在创建 Google 账号时 Google 最初验证了用户，但第三方电子邮件账号的所有权后来可能发生了变化。

exp 字段会显示过期时间，以便您在服务器端验证令牌。从“使用 Google 账号登录”功能获得的 ID 令牌需要 1 小时的时间。您需要在过期时间之前验证令牌。请勿使用 exp 进行会话管理。ID 令牌过期并不意味着用户已退出账号。您的应用负责管理用户的会话。

select_by

下表列出了 select_by 字段的可能值。所用按钮的类型以及会话和用户意见征求状态用于设置值，

• 用户按下“一键登录”或“使用 Google 账号登录”按钮，或使用了免触摸的“自动登录”流程。

• 系统找到了现有会话，或者用户选择并登录了 Google 账号以建立新会话。

• 在与您的应用分享 ID 令牌凭据之前，用户必须满足以下条件之一：

  • 点按“确认”按钮，同意共享凭据；或者
  • 之前已授予同意，并使用“选择账号”选择了 Google 账号。

此字段的值设置为以下类型之一，

值	说明
auto	自动登录具有现有会话的用户，该用户之前已同意分享凭据。仅适用于不支持 FedCM 的浏览器。
user	已有会话并且之前已表示同意的用户按下了一键式“使用以下身份继续”按钮以分享凭据。仅适用于不支持 FedCM 的浏览器。
fedcm	用户按下“一键式”的“继续以...身份登录”按钮，以使用 FedCM 共享凭据。仅适用于 FedCM 支持的浏览器。
fedcm_auto	自动登录具有现有会话的用户，该用户之前已同意使用 FedCM One Tap 分享凭据。 仅适用于 FedCM 支持的浏览器。
user_1tap	具有现有会话的用户按下 One Tap 的“Continue as”（继续以...身份）按钮，以便授予同意并分享凭据。仅适用于 Chrome v75 及更高版本。
user_2tap	没有现有会话的用户按一键式“继续使用”按钮选择一个账号，然后按弹出式窗口中的“确认”按钮以授予同意并分享凭据。适用于基于非 Chromium 的浏览器。
btn	已开启现有会话且之前已同意共享凭据的用户点按“使用 Google 账号登录”按钮，然后从“选择账号”中选择一个 Google 账号。
btn_confirm	具有现有会话的用户按下“使用 Google 账号登录”按钮，然后按下“确认”按钮以授予同意并共享凭据。
btn_add_session	没有现有会话且之前已表示同意的用户按下了“使用 Google 账号登录”按钮，以选择 Google 账号并共享凭据。
btn_confirm_add_session	没有现有会话的用户先按“使用 Google 账号登录”按钮选择 Google 账号，然后按“确认”按钮同意并分享凭据。

州

只有在用户点击“使用 Google 账号登录”按钮进行登录，并且指定了所点击按钮的 data-state 属性时，此参数才会定义。此字段的值与您在按钮的 data-state 属性中指定的值相同。

由于同一网页上可以呈现多个“使用 Google 账号登录”按钮，因此您可以为每个按钮分配一个唯一的字符串。因此，您可以使用此 state 参数来确定用户点击了哪个按钮进行登录。

密码凭据处理程序端点

密码凭据处理程序端点会处理原生凭据管理器检索到的密码凭据。

HTTP POST 请求包含以下信息：

格式	名称	说明
Cookie	g_csrf_token	一个随机字符串，随每个对处理程序端点的请求而改变。
请求参数	g_csrf_token	与上一个 Cookie 值 g_csrf_token 相同的字符串。
请求参数	email	此 ID 令牌由 Google 签发。
请求参数	password	凭据的选择方式。

注意： 您可以使用数据属性更改 email 和 password 参数名称。