本參考資料頁面說明 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 輕觸和「使用 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 Cloud 控制台中找到並建立。詳情請參閱下表:
類型 | 必要 | 範例 |
---|---|---|
字串 | 是 | 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。
這個值必須與您在 Google Cloud 控制台中設定的 OAuth 2.0 用戶端其中一個已授權重新導向 URI 完全相符,且必須符合我們的重新導向 URI 驗證規則。
如果目前的網頁是登入頁面,則可省略這項屬性,根據預設,憑證會發布至這個頁面。
當使用者按一下「使用 Google 帳戶登入」按鈕,並使用重新導向 UX 模式時,ID 權杖憑證回應會發布至您的登入端點。
詳情請參閱下表:
類型 | 選用 | 範例 |
---|---|---|
網址 | 預設值為目前網頁的 URI,或是您指定的值。 只有在設定 ux_mode: "redirect" 時才能使用。 |
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
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 使用」 |
state_cookie_domain
如果需要在上層網域及其子網域中顯示 One Tap,請將上層網域傳送至這個欄位,讓系統使用單一共用狀態 Cookie。詳情請參閱下表:
類型 | 必要 | 範例 |
---|---|---|
字串 | 選用 | state_cookie_domain: "example.com" |
ux_mode
透過這個欄位,即可設定「使用 Google 帳戶登入」按鈕所使用的使用者體驗流程。預設值為 popup
。這項屬性不會對 OneTap 使用者體驗造成任何影響。詳情請參閱下表:
類型 | 必要 | 範例 |
---|---|---|
字串 | 選用 | 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
及其子網域相符。您也可以使用陣列來代表 2 個不同的網域。舉例來說,["https://example1.com", "https://
.example2.com"]
可比對example1.com
、example2.com
和example2.com
的子網域 - 萬用字元網域必須以安全 https:// 配置為開頭,因此系統會將
"*.example.com"
視為無效。
如果 allowed_parent_origin
欄位的值無效,則中繼 iframe 模式的 One Tap 初始化作業將會失敗並停止。
intermediate_iframe_close_callback
當使用者輕觸 One Tap UI 中的「X」按鈕手動關閉 One Tap 時,覆寫預設的中繼 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
。詳情請參閱下表:
類型 | 必要 | 範例 |
---|---|---|
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」頁面。 |
isDisplayed() |
這則通知是否有顯示時間,也是否已顯示 UI? 注意: 如果 啟用 FedCM,就不會觸發這則通知。詳情請參閱「遷移至 FedCM」頁面。 |
isNotDisplayed() |
此通知是否有顯示時間,而未顯示 UI? 注意: 如果 啟用 FedCM,就不會觸發這則通知。詳情請參閱「遷移至 FedCM」頁面。 |
getNotDisplayedReason() |
無法顯示 UI 的詳細原因。可能的值如下:
|
isSkippedMoment() |
這則通知是有略過的時刻嗎? |
getSkippedReason() |
略過時刻的詳細原因。可能的值如下:
|
isDismissedMoment() |
這則通知是否為關閉的訊息? |
getDismissedReason() |
取消訂閱的詳細原因。可能的值如下:
|
getMomentType() |
傳回時刻類型的字串。可能的值如下:
|
資料類型:CredentialResponse
叫用 callback
函式時,系統會將 CredentialResponse
物件做為參數傳遞。下表列出包含憑證回應物件中的欄位:
廣闊 | |
---|---|
credential |
這個欄位是傳回的 ID 權杖。 |
select_by |
這個欄位會設定憑證的選取方式。 |
state |
只有在使用者點選「使用 Google 帳戶登入」按鈕登入,且已指定按鈕的 state 屬性時,系統才會定義這個欄位。 |
憑證
這個欄位是採用 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,因為 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
也可能是真實的,因為 Google 最初在建立 Google 帳戶時已完成身分驗證,但是第三方電子郵件帳戶的擁有權可能已經改變。
exp
欄位會顯示您在伺服器端驗證權杖的到期時間。「使用 Google 帳戶登入」功能取得的 ID 權杖會在一小時內顯示。您必須在到期時間前驗證權杖。請勿使用 exp
管理工作階段。過期的 ID 憑證不代表使用者已登出。您的應用程式負責處理使用者的工作階段。
select_by
下表列出 select_by
欄位可能的值。與工作階段和同意聲明狀態搭配使用的按鈕類型,會用來設定值
使用者已按下 One Tap 或「使用 Google 帳戶登入」按鈕,或使用無接觸自動登入程序。
找到現有工作階段,或使用者選取並登入 Google 帳戶,即可建立新工作階段。
先向使用者提供 ID 權杖憑證前,
- 已按下「確認」按鈕,同意他們共用憑證
- 先前已取得同意,並使用選取帳戶 來選擇 Google 帳戶
這個欄位的值已設為其中一個類型
值 | 說明 |
---|---|
auto |
針對先前已同意共用憑證的現有工作階段,自動登入使用者。僅適用於不支援 FedCM 的瀏覽器。 |
user |
現有的工作階段使用者先前已取得同意聲明,按下 One Tap 的「繼續以其他方式繼續」按鈕共用憑證。僅適用於非 FedCM 支援的瀏覽器。 |
fedcm |
使用者已按下 One Tap 的「繼續以其他方式繼續」按鈕,透過 FedCM 共用憑證。僅適用於 FedCM 支援的瀏覽器。 |
fedcm_auto |
針對先前已同意透過 FedCM One Tap 共用憑證的現有工作階段自動登入使用者。僅適用於 FedCM 支援的瀏覽器。 |
user_1tap |
目前有工作階段的使用者按下 One Tap 的「繼續以其他方式繼續」按鈕,藉此表示同意並分享憑證。僅適用於 Chrome 75 以上版本。 |
user_2tap |
沒有現有工作階段的使用者已按下 One Tap 的「Continue as」按鈕選取帳戶,然後在彈出式視窗中按下「確認」按鈕,藉此表示同意並分享憑證。適用於非 Chromium 瀏覽器。 |
btn |
使用者必須取得現有工作階段,且先前已同意「使用 Google 帳戶登入」按鈕,並從「選擇帳戶」中選取 Google 帳戶以共用憑證。 |
btn_confirm |
已有工作階段的使用者按下「使用 Google 帳戶登入」按鈕,然後按下「確認」按鈕以提供同意聲明及分享憑證。 |
btn_add_session |
假如使用者沒有現有工作階段,且先前已取得同意聲明,則已按下「使用 Google 帳戶登入」按鈕選取 Google 帳戶並共用憑證。 |
btn_confirm_add_session |
沒有現有工作階段的使用者,請先按下「使用 Google 帳戶登入」按鈕選取 Google 帳戶,然後按下「確認」按鈕同意並分享憑證。 |
state
只有在使用者點選「使用 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 |
大小
按鈕大小。預設值為 large
。 詳情請參閱下表:
類型 | 必要 | 範例 |
---|---|---|
字串 | 選用 | size: "small" |
下表列出可用的按鈕大小及說明:
大小 | |
---|---|
large |
|
medium |
|
small |
text
按鈕文字。預設值為 signin_with
。 圖示按鈕的文字擁有不同 text
屬性,兩者沒有任何明顯差異。唯一的例外狀況是螢幕無障礙功能會朗讀的文字。
詳情請參閱下表:
類型 | 必要 | 範例 |
---|---|---|
字串 | 選用 | text: "signup_with" |
下表列出所有可用的按鈕文字及說明:
文字 | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
shape
按鈕形狀。預設值為 rectangular
。 詳情請參閱下表:
類型 | 必要 | 範例 |
---|---|---|
字串 | 選用 | shape: "rectangular" |
下表列出可用的按鈕形狀及說明:
形狀 | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
logo_alignment
Google 標誌的對齊方式。預設值為 left
。 這個屬性僅適用於 standard
按鈕類型。詳情請參閱下表:
類型 | 必要 | 範例 |
---|---|---|
字串 | 選用 | logo_alignment: "center" |
下表列出可用的對齊方式及相關說明:
logo_alignment | |
---|---|
left |
|
center |
寬度
按鈕寬度的下限 (以像素為單位)。寬度上限為 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 帳戶登入」按鈕。
state
選用:由於可以在同一個頁面上顯示多個「使用 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
回呼。載入「使用 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。
錯誤
這個欄位是字串值,如果撤銷方法呼叫失敗,則會包含詳細錯誤訊息,說明在成功時不會定義。