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

此參考頁面將說明登入 JavaScript API。您可以使用這個 API 在網頁上顯示 One Tap 提示或「使用 Google 帳戶登入」按鈕。

方法:google.accounts.id.Initial

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 使用者體驗模式會使用這項屬性。
login_uri 登入端點的網址。「使用 Google 帳戶登入」按鈕 redirect 使用者體驗模式會使用這項屬性。
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 之間的登入流程。

client_id

這個欄位是應用程式的用戶端 ID,可在 Google Developers Console 中找到並建立。詳情請參閱下表:

類型 必要 範例
字串 client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

這個欄位會決定當只有一個 Google 工作階段之前已核准您的應用程式時,是否會自動傳回 ID 權杖,且使用者完全沒有互動。預設值為 false。詳情請參閱下表:

類型 必要 範例
boolean 選用 auto_select: true

回呼

這個欄位是 JavaScript 函式,會處理 One Tap 提示或彈出式視窗傳回的 ID 權杖。如果您使用 Google One Tap 或「使用 Google 帳戶登入」按鈕 popup 使用者體驗模式,就必須提供這項屬性。詳情請參閱下表:

類型 必要 範例
函式 必須使用 One Tap 和 popup 使用者體驗模式 callback: handleResponse

login_uri

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

這個值必須與您在 API 控制台中設定的 OAuth 2.0 用戶端的其中一個已授權重新導向 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,則可停用該功能。詳情請參閱下表:

類型 必要 範例
boolean 選用 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 服務」

如果需要在上層網域和子網域中顯示 One Tap,請將上層網域傳遞至這個欄位,使用單一共用狀態 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.comlogin.news.example.com)。使用萬用字元時,請注意下列事項:

  • 模式字串不能僅由萬用字元和頂層網域組成。舉例來說,https://.comhttps://.co.uk 無效。如上所述,"https://.example.com" 會比對 example.com 及其子網域。您也可以使用陣列來代表 2 個不同的網域。舉例來說,["https://example1.com", "https://.example2.com"]example1.comexample2.com 網域和 example2.com 的子網域相符
  • 萬用字元網域必須以安全的 https:// 配置開頭,因此系統會將 "*.example.com" 視為無效。

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

intermediate_iframe_close_callback

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

只有在中繼 iframe 模式下,intermediate_iframe_close_callback 欄位才會生效。這只會影響中間 iframe,不會像 One Tap iframe 而受到影響。系統會在叫用回呼前移除 One Tap UI。

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

itp_support

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

類型 必要 範例
boolean 選用 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」頁面。

類型 必要 範例
boolean 選用 use_fedcm_for_prompt: true

方法:google.accounts.id.prompt

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

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

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

通知會在以下時刻觸發:

  • 顯示時刻:發生在呼叫 prompt() 方法後。通知會包含布林值,指出 UI 是否顯示。
  • 略過的時刻:如果 One Tap 提示遭到自動取消、手動取消,或 Google 無法核發憑證 (例如所選工作階段登出 Google) 時,就會發生此情況。

    在這些情況下,建議您繼續使用下一個識別資訊提供者 (如果有的話)。

  • 已關閉的時刻:當 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 時,不會觸發這則通知。詳情請參閱「遷移至 FedCM」頁面。
isDisplayed() 這則通知是否是為了顯示並顯示 UI ?

注意: 當 FedCM 啟用 FedCM 時,不會觸發這則通知。詳情請參閱「遷移至 FedCM」頁面。
isNotDisplayed() 這則通知是否為顯示時刻才發出,而 UI 沒有顯示?

注意: 當 FedCM 啟用 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 這個欄位設定憑證的選取方式。

憑證

這個欄位是以採用 Base64 編碼的 JSON Web Token (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 帳戶的全域專屬 ID。使用 sub 欄位做為使用者的 ID,因為所有 Google 帳戶均有專屬的 ID,也絕不會重複使用。請勿使用電子郵件地址做為 ID,因為 Google 帳戶可在不同的時間點有多個電子郵件地址。

您可以使用 emailemail_verifiedhd 欄位判斷 Google 是否代管,以及是否為某個電子郵件地址的權威性。在 Google 獲得授權的情況下,使用者會確認為合法帳戶擁有者。

具公信力的案件如下:

  • email 的字尾有 @gmail.com,這是 Gmail 帳戶。
  • email_verified 為 true,且 hd 已設定,則這是 Google Workspace 帳戶。

使用者註冊 Google 帳戶時,不必使用 Gmail 或 Google Workspace。 如果 email 不含 @gmail.com 字尾,但 hd 為非 Google 並非官方,建議採用密碼或其他驗證方法來驗證使用者。email_verfied 也可以在 Google 帳戶建立時首次驗證使用者時為 True,但第三方電子郵件帳戶的擁有權可能已改變。

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

select_by

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

  • 使用者按下「One Tap」或「使用 Google 帳戶登入」按鈕,或使用無接觸自動登入程序。

  • 找到現有工作階段,或使用者選取並登入 Google 帳戶來建立新的工作階段。

  • 與使用者分享 ID 權杖憑證前,

    • 按下「確認」按鈕,同意分享憑證。
    • 先前已徵得同意,並使用「選取帳戶」選擇 Google 帳戶

這個欄位的值會設為以下類型之一

說明
auto 在使用者先前已同意分享憑證的現有工作階段中,自動登入該使用者。
user 使用者目前擁有工作階段,且先前已授予同意聲明,並按下 One Tap 的「Continue as」按鈕分享憑證。
user_1tap 透過現有工作階段的使用者按下 One Tap 的「Continue as」按鈕,即可同意授權及分享憑證。僅適用於 Chrome 75 以上版本。
user_2tap 沒有現有工作階段的使用者按下「One Tap 的『繼續』按鈕」以選取帳戶,接著在彈出式視窗中按下「確認」按鈕,即可同意授權及分享憑證。適用於非 Chromium 式瀏覽器。
btn 已在現有工作階段中取得同意聲明的使用者,點選「使用 Google 帳戶登入」按鈕,並從「選擇帳戶」中選取 Google 帳戶以共用憑證。
btn_confirm 透過現有工作階段的使用者按下「使用 Google 帳戶登入」按鈕,並按下「確認」按鈕,即可授予同意聲明及分享憑證。
btn_add_session 使用者未透過現有工作階段取得同意聲明,且曾按下「使用 Google 帳戶登入」按鈕,選取 Google 帳戶並共用憑證。
btn_confirm_add_session 沒有現有工作階段的使用者先按下「使用 Google 帳戶登入」按鈕並選取 Google 帳戶,然後按下「確認」按鈕,同意並分享憑證。

方法: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 帳戶登入」按鈕時,系統會呼叫此函式。

屬性類型

以下各節將詳細說明每個屬性的類型和相關範例。

類型

按鈕類型。預設值為 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
按鈕文字為「Continue with Google」。
signin
按鈕文字為「登入」。

shape

按鈕形狀。預設值為 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 屬性定義使用者點選「使用 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...")
  }
  

在本範例中,當使用者點選「Sign in with Google」(使用 Google 帳戶登入) 按鈕時, 訊息會記錄到控制台。

資料類型:憑證

叫用 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 回呼。載入「使用 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 處理常式。

以下程式碼範例說明如何搭配 ID 使用 revoke 方法。

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

資料類型:RevocationResponse

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

欄位
successful 這個欄位是方法呼叫的傳回值。
error 這個欄位可以視需要提供詳細的錯誤回應訊息。

成功

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

錯誤

這個欄位是字串值,如果撤銷方法呼叫失敗,系統不會定義此字串值,而是包含詳細的錯誤訊息。