此页面由 Cloud Translation API 翻译。

Sign In With Google JavaScript API（使用 Google JavaScript API 参考文档）

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

方法：google.accounts.id.initialize

google.accounts.id.initialize 方法会根据配置对象初始化 Google 登录客户端。请参阅以下方法代码示例：

google.accounts.id.initialize(IdConfiguration)

以下代码示例使用 onload 函数实现了 google.accounts.id.initialize 方法：

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  };
</script>

google.accounts.id.initialize 方法会创建一个“使用 Google 账号登录”客户端实例，同一网页中的所有模块都可以隐式使用该实例。

即使您在同一网页中使用多个模块（例如一键登录、个性化按钮、撤消等），也只需调用一次 google.accounts.id.initialize 方法。
如果您确实多次调用 google.accounts.id.initialize 方法，系统只会记住并使用最后一次调用中的配置。

实际上，每当您调用 google.accounts.id.initialize 方法时，系统都会重置配置，并且同一网页中的所有后续方法都会立即使用新配置。

数据类型：IdConfiguration

下表列出了 IdConfiguration 数据类型的字段和说明：

字段
`client_id`	应用的客户端 ID
`auto_select`	启用自动选择。
`callback`	用于处理 ID 令牌的 JavaScript 函数。Google 一键登录和“使用 Google 账号登录”按钮 `popup` 用户体验模式使用此属性。
`login_uri`	登录端点的网址。“使用 Google 账号登录”按钮 `redirect` 用户体验模式会使用此属性。
`native_callback`	用于处理密码凭据的 JavaScript 函数。
`cancel_on_tap_outside`	如果用户点击提示以外的区域，则取消提示。
`prompt_parent_id`	单点登录提示容器元素的 DOM ID
`nonce`	ID 令牌的随机字符串
`context`	“一键登录”提示中的标题和字词
`state_cookie_domain`	如果您需要在父网域及其子网域中调用 One Tap，请将父网域传递给此字段，以便使用单个共享 Cookie。
`ux_mode`	“使用 Google 账号登录”按钮的用户体验流程
`allowed_parent_origin`	允许嵌入中间 iframe 的来源。如果存在此字段，则以中间 iframe 模式运行 One Tap。
`intermediate_iframe_close_callback`	替换用户手动关闭“一键登录”时的默认中间 iframe 行为。
`itp_support`	在 ITP 浏览器上启用升级版的一键登录用户体验。
`login_hint`	通过提供用户提示跳过账号选择。
`hd`	按网域限制账号选择。
`use_fedcm_for_prompt`	允许浏览器控制用户登录提示，并在您的网站与 Google 之间协调登录流程。
`use_fedcm_for_button`	此字段用于确定是否应在 Chrome（桌面版 M125 及更高版本和 Android 版 M128 及更高版本）上使用 FedCM 按钮用户体验。默认值为 `false`。
`button_auto_select`	是否为 FedCM 按钮流程启用自动选择选项。如果启用，系统会自动登录具有有效 Google 会话的回访用户，从而绕过账号选择器提示。默认值为 `false`。

client_id

此字段是应用的客户端 ID，可在 Google Cloud 控制台中找到并创建。如需了解详情，请参阅下表：

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

auto_select

此字段用于确定在只有 1 个 Google 会话之前批准过您的应用的情况下，是否自动返回 ID 令牌而无需任何用户互动。默认值为 false。如需了解详情，请参阅下表：

类型	是否必须提供	示例
布尔值	可选	`auto_select: true`

callback

此字段是用于处理从单点登录提示或弹出式窗口返回的 ID 令牌的 JavaScript 函数。如果使用 Google 一键登录或“使用 Google 账号登录”按钮 popup 界面模式，则必须添加此属性。如需了解详情，请参阅下表：

类型	是否必须提供	示例
函数	对于“一键式”和 `popup` 用户体验模式，此参数是必需的	`callback: handleResponse`

login_uri

此属性是登录端点的 URI。

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

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

当用户点击“使用 Google 账号登录”按钮并使用重定向用户体验模式时，系统会将 ID 令牌凭据响应发布到您的登录端点。

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

类型	可选	示例
网址	默认为当前网页的 URI 或您指定的值。仅在设置了 `ux_mode: "redirect"` 时使用。	`login_uri: "https://www.example.com/login"`

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

native_callback

此字段是 JavaScript 函数的名称，该函数用于处理从浏览器的内置凭据管理器返回的密码凭据。如需了解详情，请参阅下表：

类型	是否必须提供	示例
函数	可选	`native_callback: handleResponse`

cancel_on_tap_outside

此字段用于设置在用户点击提示框外部时是否取消一键登录请求。默认值为 true。如果将该值设置为 false，则可以停用该功能。如需了解详情，请参阅下表：

类型	是否必须提供	示例
布尔值	可选	`cancel_on_tap_outside: false`

prompt_parent_id

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

类型	是否必须提供	示例
字符串	可选	`prompt_parent_id: 'parent_id'`

nonce

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

类型	是否必须提供	示例
字符串	可选	`nonce: "biaqbm70g23"`

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

上下文

此字段会更改单次点按提示中显示的标题和消息的文本，但对 ITP 浏览器没有影响。默认为 signin。

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

类型	是否必须提供	示例
字符串	可选	`context: "use"`

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

上下文
`signin`	“登录”
`signup`	“注册”
`use`	“使用”

state_cookie_domain

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

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

ux_mode

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

类型	是否必须提供	示例
字符串	可选	`ux_mode: "redirect"`

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

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

allowed_parent_origin

允许嵌入中间 iframe 的来源。如果存在此字段，One Tap 会以中间 iframe 模式运行。如需了解详情，请参阅下表：

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

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

值类型
`string`	单个网域 URI。	`"https://example.com"`
`string array`	网域 URI 数组。	`["https://news.example.com", "https://local.example.com"]`

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

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

如果 allowed_parent_origin 字段的值无效，则中间 iframe 模式的“一键登录”初始化会失败并停止。

intermediate_iframe_close_callback

当用户通过点按“一键登录”界面中的“X”按钮手动关闭“一键登录”时，此方法会替换默认的中间 iframe 行为。默认行为是立即从 DOM 中移除中间 iframe。

intermediate_iframe_close_callback 字段仅在中间 iframe 模式下生效。并且仅对中间 iframe（而非一键登录 iframe）产生影响。在调用回调之前，系统会移除“一键登录”界面。

类型	是否必须提供	示例
函数	可选	`intermediate_iframe_close_callback: logBeforeClose`

itp_support

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

类型	是否必须提供	示例
布尔值	可选	`itp_support: true`

login_hint

如果您的应用预先知道应登录哪个用户，则可以向 Google 提供登录提示。如果成功，则跳过账号选择。可接受的值为：电子邮件地址或 ID 令牌 sub 字段值。

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

类型	是否必须提供	示例
字符串，电子邮件地址或来自 ID 令牌 `sub` 字段的值。	可选	`login_hint: 'elisa.beckett@gmail.com'`

高清

当用户有多个账号，但只能使用其 Workspace 账号登录时，请使用此属性向 Google 提供域名提示。成功后，账号选择期间显示的用户账号将仅限于所提供的网域。通配符值：* 仅向用户提供 Workspace 账号，并在账号选择期间排除个人用户版账号 (user@gmail.com)。

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

类型	是否必须提供	示例
字符串。完全限定域名或“*”。	可选	`hd: '*'`

use_fedcm_for_prompt

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

类型	是否必须提供	示例
布尔值	可选	`use_fedcm_for_prompt: true`

use_fedcm_for_button

此字段用于确定是否应在 Chrome（桌面版 M125 及更高版本和 Android 版 M128 及更高版本）上使用 FedCM 按钮用户体验。默认值为 false。如需了解详情，请参阅下表：

类型	是否必须提供	示例
布尔值	可选	`use_fedcm_for_button: true`

button_auto_select

此字段用于确定是否为 FedCM 按钮流程启用自动选择选项。如果启用此功能，系统会自动登录具有有效 Google 会话的回访用户，从而绕过账号选择器提示。默认为 false。您需要在选择启用流程启动期间明确启用按钮自动登录功能。如需了解详情，请参阅下表：

类型	是否必须提供	示例
布尔值	可选	`button_auto_select: true`

方法：google.accounts.id.prompt

在调用 initialize() 方法后，google.accounts.id.prompt 方法会显示一键登录提示或浏览器内置的凭据管理器。请参阅以下方法代码示例：

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

通常，系统会在网页加载时调用 prompt() 方法。由于 Google 端的会话状态和用户设置，可能不会显示一键登录提示界面。如需在不同时刻收到界面状态通知，请传递一个函数来接收界面状态通知。

系统会在以下时刻触发通知：

展示时刻：在调用 prompt() 方法后发生。通知包含一个布尔值，用于指示界面是否显示。
跳过的时刻：当用户因自动取消、手动取消或 Google 无法发放凭据（例如当所选会话已退出 Google 账号时）而关闭一键登录提示时，系统会发生此情况。

在这种情况下，我们建议您继续使用下一个身份提供方（如果有）。
关闭时刻：当 Google 成功检索到凭据或用户想要停止凭据检索流程时，系统会触发此事件。例如，当用户开始在登录对话框中输入用户名和密码时，您可以调用 google.accounts.id.cancel() 方法来关闭一键式提示并触发关闭时刻。

警告：在被关闭的时刻，请勿尝试任何后续身份提供方。

以下代码示例实现了跳过的时刻：

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

数据类型：PromptMomentNotification

下表列出了 PromptMomentNotification 数据类型的方法和说明：

方法
`isDisplayMoment()`	相应通知是否与展示时刻相关？注意：当 FedCM 处于启用状态时，不会触发此通知。如需了解详情，请参阅迁移到 FedCM 页面。
`isDisplayed()`	相应通知是否用于显示时刻，并且界面是否已显示？注意：当 FedCM 处于启用状态时，不会触发此通知。如需了解详情，请参阅迁移到 FedCM 页面。
`isNotDisplayed()`	此通知是否用于显示时刻，但界面未显示？注意：当 FedCM 处于启用状态时，不会触发此通知。如需了解详情，请参阅迁移到 FedCM 页面。
`getNotDisplayedReason()`	界面未显示的详细原因。可能的值如下： `browser_not_supported` `invalid_client` `missing_client_id` `opt_out_or_no_session` `secure_http_required` `suppressed_by_user` `unregistered_origin` `unknown_reason` 注意：启用 FedCM 后，不支持此方法。如需了解详情，请参阅迁移到 FedCM 页面。
`isSkippedMoment()`	此通知是否与跳过的时刻有关？
`getSkippedReason()`	跳过时刻的详细原因。可能的值如下： `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` 注意：启用 FedCM 后，不支持此方法。如需了解详情，请参阅迁移到 FedCM 页面。
`isDismissedMoment()`	相应通知是否与已关闭的时刻相关？
`getDismissedReason()`	解雇的详细原因。可能的值如下： `credential_returned` `cancel_called` `flow_restarted`
`getMomentType()`	返回时刻类型的字符串。可能的值如下： `display` `skipped` `dismissed`

数据类型：CredentialResponse

当您的 callback 函数被调用时，系统会传递一个 CredentialResponse 对象作为参数。下表列出了凭据响应对象中包含的字段：

字段
`credential`	Google 签发的已编码 JWT ID 令牌。
`select_by`	用户登录的方式。
`state`	仅当用户点击“使用 Google 账号登录”按钮进行登录，且指定了该按钮的 `state` 属性时，系统才会定义此字段。

凭据

此字段是采用 base64 编码的 JSON Web 令牌 (JWT) 字符串形式的 ID 令牌。

解码后，JWT 如下例所示：

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": "elisa.g.beckett@gmail.com", // 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": "Elisa",
  "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 账号中都是唯一的，并且永远不会重复使用。

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

Google 具有权威性的情况：

email 带有 @gmail.com 后缀，因此是 Gmail 账号。
如果 email_verified 为 true 且设置了 hd，则表示这是 Google Workspace 账号。

用户可以注册 Google 账号，而无需使用 Gmail 或 Google Workspace。如果 email 不包含 @gmail.com 后缀且缺少 hd，则 Google 不具有权威性，建议使用密码或其他质询方法来验证用户。email_verfied 也可能为 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`	具有现有会话的用户按了“一键登录”的“以…身份继续”按钮，以授予同意并分享凭据。仅适用于 Chrome v75 及更高版本。
`user_2tap`	没有现有会话的用户按了“以…身份继续”单点触控按钮来选择账号，然后按了弹出式窗口中的“确认”按钮来授予同意并分享凭据。适用于非基于 Chromium 的浏览器。
`itp`	之前已授予同意权限且会话处于有效状态的用户在 ITP 浏览器中按了单点登录按钮。
`itp_confirm`	具有现有会话的用户在 ITP 浏览器上按了单点登录按钮，然后按了“确认”按钮以授予同意并分享凭据。
`itp_add_session`	没有现有会话且之前已授予同意权限的用户在 ITP 浏览器中按了“一键登录”来选择 Google 账号并分享凭据。
`itp_confirm_add_session`	没有现有会话的用户首先在 ITP 浏览器上按了“一键登录”来选择 Google 账号，然后按了“确认”按钮来表示同意并分享凭据。
`btn`	具有现有会话且之前已授予同意权限的用户按下了“使用 Google 账号登录”按钮，并从“选择账号”中选择了一个 Google 账号来分享凭据。
`btn_confirm`	具有现有会话的用户按了“使用 Google 账号登录”按钮，然后按了“确认”按钮以授予同意权限并分享凭据。
`btn_add_session`	没有现有会话的用户之前已授予同意权限，现在按了“使用 Google 账号登录”按钮来选择 Google 账号并分享凭据。
`btn_confirm_add_session`	没有现有会话的用户首先按了“使用 Google 账号登录”按钮来选择 Google 账号，然后按了“确认”按钮来表示同意并分享凭据。

州

仅当用户点击“使用 Google 账号登录”按钮进行登录，且点击的按钮指定了 state 属性时，此字段才会被定义。此字段的值与您在按钮的 state 属性中指定的值相同。

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

方法：google.accounts.id.renderButton

google.accounts.id.renderButton 方法会在网页中呈现“使用 Google 账号登录”按钮。

请参阅以下方法代码示例：

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

数据类型：GsiButtonConfiguration

下表列出了 GsiButtonConfiguration 数据类型的字段和说明：

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

属性类型

以下部分详细介绍了每种属性的类型，并提供了一个示例。

类型

按钮类型。默认值为 standard。

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

类型	是否必须提供	示例
字符串	是	`type: "icon"`

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

类型
`standard`	包含文字或个性化信息的按钮。
`icon`	没有文字的图标按钮。

主题

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

类型	是否必须提供	示例
字符串	可选	`theme: "filled_blue"`

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

主题
`outline`	标准按钮主题。
`filled_blue`	蓝色填充按钮主题。
`filled_black`	一种黑色填充按钮主题。

size

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

类型	是否必须提供	示例
字符串	可选	`size: "small"`

下表列出了可用的按钮尺寸及其说明：

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

text

按钮文字。默认值为 signin_with。对于具有不同 text 属性的图标按钮，其文本在视觉上没有区别。唯一的例外情况是，当文本被读取以实现屏幕无障碍功能时。

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

类型	是否必须提供	示例
字符串	可选	`text: "signup_with"`

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

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

形状

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

类型	是否必须提供	示例
字符串	可选	`shape: "rectangular"`

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

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

logo_alignment

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

类型	是否必须提供	示例
字符串	可选	`logo_alignment: "center"`

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

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

width

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

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

类型	是否必须提供	示例
字符串	可选	`width: "400"`

语言区域

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

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

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

类型	是否必须提供	示例
字符串	可选	`locale: "zh_CN"`

click_listener

您可以使用 click_listener 属性定义在点击“使用 Google 账号登录”按钮时要调用的 JavaScript 函数。

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }

在此示例中，当点击“使用 Google 账号登录”按钮时，系统会将消息 Sign in with Google button clicked... 记录到控制台。

州

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

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

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

数据类型：凭据

当您的 native_callback 函数被调用时，系统会传递一个 Credential 对象作为参数。下表列出了对象中包含的字段：

字段
`id`	用于标识用户。
`password`	密码

方法：google.accounts.id.disableAutoSelect

当用户从您的网站退出账号时，您需要调用方法 google.accounts.id.disableAutoSelect 以在 Cookie 中记录状态。这可防止出现用户体验死循环。请参阅以下方法代码段：

google.accounts.id.disableAutoSelect()

以下代码示例使用 onSignout() 函数实现了 google.accounts.id.disableAutoSelect 方法：

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

方法：google.accounts.id.storeCredential

此方法是浏览器内置凭据管理器 API 的 store() 方法的封装容器。因此，它只能用于存储密码凭据。请参阅以下方法代码示例：

google.accounts.id.storeCredential(Credential, callback)

以下代码示例使用 onSignIn() 函数实现了 google.accounts.id.storeCredential 方法：

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

方法：google.accounts.id.cancel

如果您从信赖方 DOM 中移除提示，则可以取消一键式流程。如果已选择凭据，则忽略取消操作。请参阅以下方法代码示例：

google.accounts.id.cancel()

以下代码示例使用 onNextButtonClicked() 函数实现了 google.accounts.id.cancel() 方法：

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

库加载回调：onGoogleLibraryLoad

您可以注册 onGoogleLibraryLoad 回调。在加载 Google 登录 JavaScript 库后，系统会通知该对象：

window.onGoogleLibraryLoad = () => {
    ...
};

此回调只是 window.onload 回调的快捷方式。行为方面没有任何差异。

以下代码示例实现了 onGoogleLibraryLoad 回调：

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

方法：google.accounts.id.revoke

google.accounts.id.revoke 方法会撤消用于共享指定用户的 ID 令牌的 OAuth 授权。请参阅以下方法代码段： javascript google.accounts.id.revoke(login_hint, callback)

参数	类型	说明
`login_hint`	字符串	用户的 Google 账号的电子邮件地址或唯一 ID。该 ID 是 credential 载荷的 `sub` 属性。
`callback`	函数	可选的 RevocationResponse 处理程序。

以下代码示例展示了如何将 revoke 方法与 ID 搭配使用。

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

数据类型：RevocationResponse

当您的 callback 函数被调用时，系统会传递一个 RevocationResponse 对象作为参数。下表列出了撤消响应对象中包含的字段：

字段
`successful`	此字段是方法调用的返回值。
`error`	此字段可以选择性地包含详细的错误响应消息。

成功

此字段是一个布尔值，如果撤消方法调用成功，则设置为 true；如果失败，则设置为 false。

错误

此字段是一个字符串值，如果撤消方法调用失败，则包含详细的错误消息；如果调用成功，则此字段未定义。

Sign In With Google JavaScript API（使用 Google JavaScript API 参考文档） 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

方法：google.accounts.id.initialize

数据类型：IdConfiguration

client_id

auto_select

callback

login_uri

native_callback

cancel_on_tap_outside

prompt_parent_id

nonce

上下文

state_cookie_domain

ux_mode

allowed_parent_origin

intermediate_iframe_close_callback

itp_support

login_hint

高清

use_fedcm_for_prompt

use_fedcm_for_button

button_auto_select

方法：google.accounts.id.prompt

数据类型：PromptMomentNotification

数据类型：CredentialResponse

凭据

select_by

州

方法：google.accounts.id.renderButton

数据类型：GsiButtonConfiguration

属性类型

类型

主题

size

text

形状

logo_alignment

width

语言区域

click_listener

州

数据类型：凭据

方法：google.accounts.id.disableAutoSelect

方法：google.accounts.id.storeCredential

方法：google.accounts.id.cancel

库加载回调：onGoogleLibraryLoad

方法：google.accounts.id.revoke

数据类型：RevocationResponse

成功

错误

Sign In With Google JavaScript API（使用 Google JavaScript API 参考文档）