Google Identity 服務即將遷移至 FedCM API。請參閱遷移指南，瞭解有哪些可能的變更，避免使用者登入網站受到負面影響。

本頁面由 Cloud Translation API 翻譯而成。

「使用 Google JavaScript API 登入」參考資料

本參考頁面說明 Sign-In JavaScript API。您可以使用這個 API，在網頁上顯示 One Tap 提示或「使用 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 帳戶登入用戶端例項，可由同一個網頁中的所有模組隱含使用。

即使您在同一個網頁中使用多個模組 (例如 One Tap、個人化按鈕、撤銷等)，也只需要呼叫 google.accounts.id.initialize 方法一次。
如果多次呼叫 google.accounts.id.initialize 方法，系統只會記住並使用上次呼叫的設定。

實際上，每次呼叫 google.accounts.id.initialize 方法時都要重設設定，且同一網頁中的所有後續方法都會立即使用新設定。

資料類型：IdConfiguration

下表列出 IdConfiguration 資料類型的欄位和說明：

欄位
`client_id`	應用程式的用戶端 ID
`auto_select`	啟用自動選取功能。
`callback`	處理 ID 權杖的 JavaScript 函式。Google One Tap 和「使用 Google 帳戶登入」按鈕的 `popup` UX 模式會使用這項屬性。
`login_uri`	登入端點的網址。「使用 Google 帳戶登入」按鈕的 `redirect` UX 模式會使用這項屬性。
`native_callback`	負責處理密碼憑證的 JavaScript 函式。
`cancel_on_tap_outside`	如果使用者點選提示訊息外側的區域，系統就會取消提示訊息。
`prompt_parent_id`	One Tap 提示訊息容器元素的 DOM ID
`nonce`	ID 權杖的隨機字串
`context`	One Tap 提示中的標題和字詞
`state_cookie_domain`	如果您需要在上層網域及其子網域中呼叫 One Tap，請將上層網域傳遞至這個欄位，使用單一共用 Cookie。
`ux_mode`	「使用 Google 帳戶登入」按鈕的使用者體驗流程
`allowed_parent_origin`	允許嵌入中繼 iframe 的來源。如果這個欄位存在，One Tap 就會在中介 iframe 模式下執行。
`intermediate_iframe_close_callback`	在使用者手動關閉 One Tap 時，覆寫預設的中繼 iframe 行為。
`itp_support`	在 ITP 瀏覽器上啟用升級版 One Tap 使用者體驗。
`login_hint`	提供使用者提示，略過帳戶選取程序。
`hd`	依網域限制帳戶選取範圍。
`use_fedcm_for_prompt`	允許瀏覽器控管使用者登入提示，並調解網站和 Google 之間的登入流程。
`enable_redirect_uri_validation`	啟用符合重新導向 URI 驗證規則的按鈕重新導向流程。

client_id

這個欄位是應用程式的用戶端 ID，您可以在 Google Cloud 控制台中找到並建立這個 ID。詳情請參閱下表：

類型	必填	範例
字串	是	`client_id: "CLIENT_ID.apps.googleusercontent.com"`

auto_select

這個欄位會決定，如果只有一個 Google 工作階段先前核准過您的應用程式，系統是否會在沒有任何使用者互動情況下自動傳回 ID 權杖。預設值為 false。詳情請參閱下表：

類型	必填	範例
布林值	選用	`auto_select: true`

回呼

這個欄位是 JavaScript 函式，可處理從 One Tap 提示或彈出式視窗傳回的 ID 權杖。如果使用 Google One Tap 或「使用 Google 帳戶登入」按鈕 popup UX 模式，就必須設定這個屬性。詳情請參閱下表：

類型	必填	範例
函式	適用於 One Tap 和 `popup` UX 模式	`callback: handleResponse`

login_uri

這個屬性是登入端點的 URI。

這個值必須與 OAuth 2.0 用戶端的其中一個授權重新導向 URI 完全相符，您可以在 Google Cloud 控制台中設定這類 URI，且必須符合我們的重新導向 URI 驗證規則。

如果目前的頁面是登入頁面，可以省略這項屬性。在此情況下，憑證會預設為張貼在此頁面。

當使用者按一下「使用 Google 帳戶登入」按鈕並使用重新導向使用者體驗模式時，系統會將 ID 權杖憑證回應張貼至登入端點。

詳情請參閱下表：

類型	選用	範例
網址	預設為目前網頁的 URI，或您指定的值。只有在設定 `ux_mode: "redirect"` 時才會使用。	`login_uri: "https://www.example.com/login"`

您的登入端點必須處理包含 credential 金鑰、主體中 ID 權杖值的 POST 要求。

以下是登入端點的範例要求：

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

credential=ID_TOKEN

native_callback

這個欄位是 JavaScript 函式的名稱，負責處理從瀏覽器原生憑證管理工具傳回的密碼憑證。詳情請參閱下表：

類型	必填	範例
函式	選用	`native_callback: handleResponse`

cancel_on_tap_outside

這個欄位會設定使用者點選提示訊息外部時，是否要取消 One Tap 要求。預設值為 true。您可以將值設為 false 來停用該功能。詳情請參閱下表：

類型	必填	範例
布林值	選用	`cancel_on_tap_outside: false`

prompt_parent_id

這個屬性會設定容器元素的 DOM ID。如果未設定，視窗的右上角會顯示「One Tap」提示。詳情請參閱下表：

類型	必填	範例
字串	選用	`prompt_parent_id: 'parent_id'`

Nonce

這個欄位是 ID 權杖用來防範重送攻擊的隨機字串。詳情請參閱下表：

類型	必填	範例
字串	選用	`nonce: "biaqbm70g23"`

Nonce 長度會受到環境支援的 JWT 大小上限，以及個別瀏覽器和伺服器 HTTP 大小限制的限制。

context

這個欄位可變更 One Tap 提示中的標題和訊息文字。詳情請參閱下表：

類型	必填	範例
字串	選用	`context: "use"`

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

背景資訊
`signin`	「使用 Google 帳戶登入」
`signup`	註冊 Google
`use`	「與 Google 服務整合」

state_cookie_domain

如果您需要在父網域及其子網域中顯示 One Tap，請將父網域傳遞至這個欄位，以便使用單一共用狀態 Cookie。詳情請參閱下表：

類型	必填	範例
字串	選用	`state_cookie_domain: "example.com"`

ux_mode

請使用這個欄位設定「使用 Google 帳戶登入」按鈕使用的使用者體驗流程。預設值為 popup。這個屬性不會對 OneTap 使用者體驗造成影響。詳情請參閱下表：

類型	必填	範例
字串	選用	`ux_mode: "redirect"`

下表列出可用的 UX 模式及其說明。

使用者體驗模式
`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 及其子網域。您也可以使用陣列來代表 2 個不同的網域。例如，["https://example1.com", "https://.example2.com"] 符合 example2.com 的 example1.com、example2.com 和子網域
萬用字元網域必須以安全的 https:// 配置開頭，因此 "*.example.com" 會視為無效。

如果 allowed_parent_origin 欄位的值無效，則中繼 iframe 模式的 One Tap 初始化作業會失敗並停止。

intermediate_iframe_close_callback

在使用者輕觸 One Tap UI 中的「X」按鈕手動關閉時，覆寫預設的中繼 iframe 行為。預設行為是立即從 DOM 中移除中介 iframe。

intermediate_iframe_close_callback 欄位只會在中繼 iframe 模式生效。而且，這項設定只會影響中繼 iframe，而非 One Tap iframe。在叫用回呼之前，系統會移除 One Tap UI。

類型	必填	範例
函式	選用	`intermediate_iframe_close_callback: logBeforeClose`

itp_support

這個欄位會決定是否應在支援智慧防追蹤 (ITP) 的瀏覽器中啟用升級版 One Tap UX。預設值為 false。詳情請參閱下表：

類型	必填	範例
布林值	選用	`itp_support: true`

login_hint

如果應用程式事先知道應登入哪位使用者，就能向 Google 提供登入提示。成功後，系統會略過帳戶選取程序。可接受的值包括電子郵件地址或 ID 權杖 sub 欄位值。

詳情請參閱 OpenID Connect 說明文件中的 login_hint 欄位。

類型	必填	範例
字串、電子郵件地址或 ID 權杖 `sub` 欄位的值。	選用	`login_hint: 'elisa.beckett@gmail.com'`

HD 高畫質

如果使用者擁有多個帳戶，且只應使用 Workspace 帳戶登入，請使用這個選項向 Google 提供網域名稱提示。成功後，在帳戶選取期間顯示的使用者帳戶會限於提供的網域。萬用字元值：* 會向使用者提供 Workspace 帳戶，並在帳戶選取期間排除消費者帳戶 (user@gmail.com)。

詳情請參閱 OpenID Connect 說明文件中的 hd 欄位。

類型	必填	範例
字串。完整網域名稱或 *。	選用	`hd: '*'`

use_fedcm_for_prompt

允許瀏覽器控管使用者登入提示，並調解網站和 Google 之間的登入流程。預設值為 false。詳情請參閱「遷移至 FedCM」頁面。

類型	必填	範例
布林值	選用	`use_fedcm_for_prompt: true`

enable_redirect_uri_validation

啟用符合重新導向 URI 驗證規則的按鈕重新導向流程。

類型	必填	範例
布林值	選用	`enable_redirect_uri_validation: true`

方法：google.accounts.id.prompt

在 initialize() 方法叫用後，google.accounts.id.prompt 方法會顯示 One Tap 提示或瀏覽器原生憑證管理工具。請參閱下列方法的程式碼範例：

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

一般來說，載入網頁時會呼叫 prompt() 方法。由於 Google 端的工作階段狀態和使用者設定，One Tap 提示 UI 可能不會顯示。如要接收不同時間點的 UI 狀態通知，請傳遞函式來接收 UI 狀態通知。

通知會在下列時機觸發：

顯示時刻：這是在呼叫 prompt() 方法後發生的事件。通知包含布林值，用於指出是否要顯示 UI。
略過時刻：當 One Tap 提示訊息遭到自動取消、手動取消，或是 Google 無法核發憑證時 (例如所選工作階段已登出 Google)，就會發生這種情況。

在這種情況下，建議您繼續使用其他身分識別服務供應商 (如有)。
Dismissed moment：當 Google 成功擷取憑證，或使用者想要停止憑證擷取流程時，就會發生這個事件。舉例來說，當使用者開始在登入對話方塊中輸入使用者名稱和密碼時，您可以呼叫 google.accounts.id.cancel() 方法來關閉 One Tap 提示，並觸發已關閉的狀態。

警告： 在遭到駁回的情況下，請勿嘗試使用其他身分識別服務供應器。

以下程式碼範例會實作略過的片段：

<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()`	這個通知是否用於顯示時刻，且未顯示 UI？注意：當 FedCM 已啟用時，系統不會觸發這項通知。詳情請參閱「遷移至 FedCM」頁面。
`getNotDisplayedReason()`	未顯示 UI 的詳細原因。以下是可能的值： `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`	這個欄位是傳回的 ID 權杖。
`select_by`	這個欄位會設定憑證的選取方式。
`state`	只有在使用者點選「使用 Google 帳戶登入」按鈕登入，且已指定按鈕的 `state` 屬性時，系統才會定義此欄位。

憑證

這個欄位是 ID 權杖，以 base64 編碼的 JSON Web Token (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 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 帳戶的全域專屬 ID。僅使用 sub 欄位做為使用者的 ID，因為該 ID 在所有 Google 帳戶中是唯一的，且不會重複使用。請勿使用電子郵件地址做為 ID，因為 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 也可能為真，因為 Google 在建立 Google 帳戶時已驗證使用者，但第三方電子郵件帳戶的擁有權可能已變更。

exp 欄位會顯示到期時間，讓您在伺服器端驗證權杖。透過「使用 Google 帳戶登入」取得的 ID 權杖則為一小時。您必須在到期時間之前驗證憑證。請勿將 exp 用於工作階段管理。已過期的 ID 權杖不代表使用者已登出。您的應用程式負責管理使用者的工作階段。

select_by

下表列出 select_by 欄位的可能值。系統會使用工作階段和同意聲明狀態，搭配所用按鈕的類型來設定值。

使用者按下「One Tap」或「使用 Google 帳戶登入」按鈕，或使用無觸控的自動登入程序。
系統找到現有工作階段，或使用者選取並登入 Google 帳戶，以建立新的工作階段。
與應用程式使用者共用 ID 權杖憑證前
- 按下「確認」按鈕，授權共用憑證。
- 先前曾授予同意聲明並透過「選取帳戶」選擇 Google 帳戶

這個欄位的值會設為下列其中一種類型：

值	說明
`auto`	自動登入使用者，該使用者擁有現有工作階段，且先前已同意分享憑證。僅適用於非 FedCM 支援的瀏覽器。
`user`	使用者擁有現有工作階段，先前已同意按下「繼續以身分」按鈕來分享憑證。僅適用於不支援 FedCM 的瀏覽器。
`fedcm`	使用者按下 One Tap「繼續以身分」按鈕，透過 FedCM 分享憑證。僅適用於 FedCM 支援的瀏覽器。
`fedcm_auto`	如果現有工作階段先前已同意透過 FedCM One Tap 分享憑證，則自動讓使用者登入該工作階段。僅適用於 FedCM 支援的瀏覽器。
`user_1tap`	使用者在現有工作階段中按下 One Tap「繼續以身分」按鈕，授予同意聲明並分享憑證。僅適用於 Chrome 75 以上版本。
`user_2tap`	目前無現有工作階段的使用者，按下 One Tap「以下列身分繼續」按鈕選取帳戶，然後在彈出式視窗中按下「確認」按鈕，藉此同意並共用憑證。適用於非 Chromium 架構的瀏覽器。
`itp`	使用者擁有現有工作階段，且先前已同意按下 ITP 瀏覽器上的 One Tap。
`itp_confirm`	使用者在現有工作階段中按下「One Tap」ITP 瀏覽器，然後按下「確認」按鈕，授予同意聲明並分享憑證。
`itp_add_session`	使用者沒有現有的工作階段，但先前已同意授權，因此按下 ITP 瀏覽器上的 One Tap 按鈕，選取 Google 帳戶並分享憑證。
`itp_confirm_add_session`	目前還沒有工作階段的使用者先按下 One Tap 瀏覽器 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`	按鈕主題。例如「fill_blue」或「fill_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`	黑色填滿的按鈕主題。

大小

按鈕大小。預設值為 large。詳情請參閱下表：

類型	必填	範例
字串	選用	`size: "small"`

下表列出可用的按鈕大小及其說明：

大小
`large`	大型按鈕。
`medium`	中型按鈕。
`small`	一個小按鈕。

文字

按鈕文字。預設值為 signin_with。具有不同 text 屬性的圖示按鈕文字在外觀上沒有差異。唯一的例外狀況是為了螢幕輔助功能而讀取文字。

詳情請參閱下表：

類型	必填	範例
字串	選用	`text: "signup_with"`

下表列出所有可用的按鈕文字及其說明：

文字
`signin_with`	按鈕文字為「使用 Google 帳戶登入」。
`signup_with`	按鈕文字為「使用 Google 帳戶註冊」。
`continue_with`	按鈕文字為「Continue with Google」。
`signin`	按鈕文字為「登入」。

形狀

按鈕形狀。預設值為 rectangular。詳情請參閱下表：

類型	必填	範例
字串	選用	`shape: "rectangular"`

下表列出可用的按鈕形狀及其說明：

圖案
`rectangular`	矩形按鈕。如果用於 `icon` 按鈕類型，則與 `square` 相同。
`pill`	The pill-shaped button. 如果用於 `icon` 按鈕類型，則與 `circle` 相同。
`circle`	圓形按鈕。如果用於 `standard` 按鈕類型，則與 `pill` 相同。
`square`	正方形按鈕。如果用於 `standard` 按鈕類型，則與 `rectangular` 相同。

logo_alignment

Google 標誌的對齊方式。預設值為 left。這個屬性僅適用於 standard 按鈕類型。詳情請參閱下表：

類型	必填	範例
字串	選用	`logo_alignment: "center"`

下表列出可用的對齊方式及其說明：

logo_alignment
`left`	將 Google 標誌對齊左側。
`center`	將 Google 標誌置中對齊。

寬度

按鈕的寬度下限 (以像素為單位)。寬度上限為 400 像素。

詳情請參閱下表：

類型	必填	範例
字串	選用	`width: "400"`

語言代碼

選用設定。以指定的語言代碼顯示按鈕文字，否則會預設為使用者的 Google 帳戶或瀏覽器設定。載入程式庫時，請將 hl 參數和語言代碼新增至 src 指令，例如：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 中移除提示，即可取消 One Tap 流程。如果已選取憑證，系統會忽略取消作業。請參閱下列方法的程式碼範例：

google.accounts.id.cancel()

以下程式碼範例會使用 onNextButtonClicked() 函式實作 google.accounts.id.cancel() 方法：

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

程式庫載入回呼：onGoogleLibraryLoad

您可以註冊 onGoogleLibraryLoad 回呼。載入「Sign In with 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 處理程序。

以下程式碼範例說明如何使用含有 ID 的 revoke 方法。

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

資料類型：RevocationResponse

呼叫 callback 函式時，系統會將 RevocationResponse 物件傳遞做為參數。下表列出撤銷回應物件中包含的欄位：

欄位
`successful`	這個欄位是方法呼叫的傳回值。
`error`	這個欄位可選擇包含詳細的錯誤回應訊息。

成功

如果撤銷方法呼叫成功，這個欄位會設為 true；失敗時，這個欄位會設為 false。

錯誤

這個欄位是字串值，如果撤銷方法呼叫失敗，將會在成功時未定義此欄位，其中包含詳細的錯誤訊息。