Google 会使用 AI 技术将内容翻译成您偏好的语言。AI 翻译可能包含错误。

Google 登录 JavaScript API 参考文档

此参考页面介绍了“使用 Google 账号登录”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
`color_scheme`	应用于一键提示的配色方案。
`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 令牌的随机字符串
`essential_claims`	要包含在 Google 返回的 ID 令牌中的其他声明。
`context`	一键登录提示中的标题和文字
`state_cookie_domain`	如果您需要在父网域及其子网域中调用一键登录，请将父网域传递到此字段，以便使用单个共享 Cookie。
`ux_mode`	“使用 Google 账号登录”按钮的用户体验流程
`allowed_parent_origin`	允许嵌入中间 iframe 的源。如果此字段存在，一键式登录将在中间 iframe 模式下运行。
`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"`

color_scheme

此字段是应用于一键登录提示的配色方案。如需了解详情，请参阅下表：

类型	是否必须提供	示例
字符串	可选。默认采用用户的系统默认配色方案。	`color_scheme: "dark"`

下表列出了可用的配色方案及其说明。

配色方案
`default`	应用用户系统的默认配色方案，具体取决于用户偏好方案是浅色还是深色。
`light`	应用浅色配色方案。
`dark`	应用深色配色方案。

auto_select

此字段决定了当只有一个 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 请求。select_by 不包含在向 login_uri 或 data-login_uri 发出的 HTTP POST 请求中，并且仅在传递给 JavaScript callback 函数的 CredentialResponse 对象中返回。

native_callback

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

类型	是否必须提供	示例
函数	可选	`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"`

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

essential_claims

此字段是一个字符串，用于请求在 Google 返回的 ID 令牌中包含其他声明。如需查看 Google 接受的声明的完整列表，请参阅支持的声明。

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

类型	是否必须提供	示例
字符串	可选	`essential_claims: "auth_time, amr"`

context

此字段会更改一键快捷提示中显示的标题和消息的文本，对 ITP 浏览器没有影响。默认为 signin。

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

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

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

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

state_cookie_domain

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

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

ux_mode

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

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

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

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

allowed_parent_origin

允许嵌入中间 iframe 的源。如果此字段存在，一键快捷功能会在中间 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) 的浏览器上启用升级版一键快捷 UX。默认值为 false。如需了解详情，请参阅下表：

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

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

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

 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()`	如果显示一键登录提示，则返回 `true`。注意：启用 FedCM 后，系统不支持此通知。如需了解详情，请参阅迁移到 FedCM 页面。
`isDisplayed()`	如果时刻类型为 `PromptMoment.DISPLAY` 且显示了一键快捷提示，则返回 `true`。注意：启用 FedCM 后，系统不支持此通知。如需了解详情，请参阅迁移到 FedCM 页面。
`isNotDisplayed()`	如果时刻类型为 `PromptMoment.DISPLAY` 且未显示一键快捷提示，则返回 `true`。注意：启用 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()`	如果时刻类型为 `PromptMoment.SKIPPED`，则返回 `true` 注意：启用 FedCM 后，此方法会受到部分支持。具体而言，它不支持跳过原因 `user_cancel`。如需了解详情，请参阅迁移到 FedCM 页面。
`getSkippedReason()`	跳过时刻的详细原因。可能的值如下： `auto_cancel` `user_cancel` `tap_outside` `issuing_failed` 注意：启用 FedCM 后，此方法会部分受支持。具体而言，它不支持 `user_cancel` 的跳过原因。如需了解详情，请参阅迁移到 FedCM 页面。
`isDismissedMoment()`	如果时刻类型为 `PromptMoment.DISMISSED`，则返回 `true`。注意：启用 FedCM 后，此方法将完全受支持。如需了解详情，请参阅迁移到 FedCM 页面。
`getDismissedReason()`	驳回的详细原因。可能的值如下： `credential_returned` `cancel_called` `flow_restarted` 注意：启用 FedCM 后，此方法会得到完全支持。如需了解详情，请参阅迁移到 FedCM 页面。
`getMomentType()`	返回时刻类型的字符串。可能的值如下： `display` `skipped` `dismissed`

数据类型：CredentialResponse

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

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

凭据

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

解码后，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 Google Workspace email address
  "auth_time": 1748875426,
  "amr": ["mfa", "pwd", "tel"],
  "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 creation time
  "exp": 1596477600, // Unix timestamp of the assertion 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 账号。

用户无需使用 Gmail 或 Google Workspace 即可注册 Google 账号。如果 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 一键快捷功能分享凭据的用户。仅适用于支持 FedCM 的浏览器。
`user_1tap`	已有会话的用户按下一键快捷登录“以…身份继续”按钮，以授予同意并分享凭据。仅适用于 Chrome 75 及更高版本。
`user_2tap`	没有现有会话的用户按下一键快捷登录“以…身份继续”按钮选择账号，然后在弹出式窗口中按“确认”按钮授予许可并分享凭据。适用于非基于 Chromium 的浏览器。
`itp`	之前已授予同意的用户在 ITP 浏览器上按了一键快捷功能。
`itp_confirm`	未授予同意的用户在 ITP 浏览器上按下一键快捷功能，然后按“继续”按钮授予同意并分享凭据。
`btn`	之前已授予同意的用户按下了“使用 Google 账号登录”按钮，并从“选择账号”中选择了一个 Google 账号来分享凭证。
`btn_confirm`	未授予同意的用户按下了“使用 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`	标准按钮主题。	填充：#FFFFFF 描边：#747775 \| 1px \| 内部字体：#1F1F1F \| Roboto Medium \| 14/20 个性化：#1F1F1F \| Roboto \| Medium 12/14 \| Regular 11/13
`filled_blue`	蓝色填充按钮主题。	填充：#0B57D0 描边：#OB57D0 \| 1 像素 \| 内部字体：#FFFFFF \| Google Sans Medium \| 14/20 个性化：#FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13
`filled_black`	黑色填充按钮主题，带有对比色徽标。	填充：#202124 描边：#OB57D0 \| 1px \| 内部字体：#FFFFFF \| Google Sans Medium \| 14/20 个性化：#FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13
`outline_dark`	黑色填充按钮主题。	填充：#131314 描边：#8E918F \| 1px \| 内部字体：#FFFFFF \| Google Sans Medium \| 14/20 个性化：#FFFFFF \| Roboto \| Medium 12/14 \| Regular 11/13

大小

按钮大小。默认值为 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 账号或浏览器设置。加载库时，将 hl 参数和语言代码添加到 src 指令中，例如：gsi/client?hl=<iso-639-code>。

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

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

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

click_listener

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

  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 账号登录”按钮时，系统会将消息已点击“使用 Google 账号登录”按钮…记录到控制台。

州

可选，因为可以在同一页面上呈现多个“使用 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

此方法是浏览器内置 Credential Manager 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 是凭据载荷的 `sub` 属性。
`callback`	函数	可选 RevocationResponse 处理程序。

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

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

数据类型：RevocationResponse

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

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

成功

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

错误

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

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

方法：google.accounts.id.initialize

数据类型：IdConfiguration

client_id

color_scheme

auto_select

callback

login_uri

native_callback

cancel_on_tap_outside

prompt_parent_id

nonce

essential_claims

context

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

属性类型

类型

主题

大小

text

形状

logo_alignment

width

语言区域

click_listener

州

数据类型：凭证

方法：google.accounts.id.disableAutoSelect

方法：google.accounts.id.storeCredential

方法：google.accounts.id.cancel

库加载回调：onGoogleLibraryLoad

方法：google.accounts.id.revoke

数据类型：RevocationResponse

成功

错误

Google 登录 JavaScript API 参考文档