Credential Management API 是標準的瀏覽器 API,可提供網站與瀏覽器之間的程式輔助介面,讓使用者在各種裝置上順暢登入。
Credential Management API:
- 移除登入流程的阻礙:即使工作階段已過期,或已在其他裝置儲存憑證,使用者仍可自動重新登入網站。
- 允許使用帳戶選擇工具單鍵登入:使用者可以在原生帳戶選擇工具中選擇帳戶。
- 儲存憑證:應用程式可以儲存使用者名稱和密碼的組合,甚至是聯合帳戶詳細資料。這些憑證可在所有裝置上保持同步。
想要看看實際運作情形嗎?不妨透過 Credential Management API 示範查看,並查看程式碼。
確認 Credential Management API 瀏覽器支援
使用 Credential Management API 前,請先檢查是否支援 PasswordCredential
或 FederatedCredential
。
if (window.PasswordCredential || window.FederatedCredential) {
// Call navigator.credentials.get() to retrieve stored
// PasswordCredentials or FederatedCredentials.
}
登入使用者
如要登入使用者,請從瀏覽器的密碼管理工具擷取憑證,然後用來登入使用者。
例如:
- 使用者到達網站,但未登入時,請呼叫
navigator.credentials.get()
。 - 使用擷取的憑證讓使用者登入。
- 更新 UI,指出使用者已登入。
進一步瞭解登入使用者。
儲存或更新使用者憑證
如果使用者透過聯合識別資訊提供者 (例如 Google 登入、Facebook、GitHub) 登入:
- 使用者成功登入或建立帳戶後,請建立
FederatedCredential
,並以使用者的電子郵件地址做為 ID,並使用FederatedCredentials.provider
指定識別資訊提供者。 - 使用
navigator.credentials.store()
儲存憑證物件。
進一步瞭解登入使用者。
如果使用者以使用者名稱和密碼登入:
- 使用者成功登入或建立帳戶後,請使用使用者 ID 和密碼建立
PasswordCredential
。 - 使用
navigator.credentials.store()
儲存憑證物件。
詳情請參閱透過表單儲存憑證。
登出
當使用者登出時,請呼叫 navigator.credentials.preventSilentAccess()
,避免使用者自動重新登入。
停用自動登入功能也可讓使用者在不需重新輸入登入資訊的情況下,輕鬆切換帳戶,例如工作帳戶和個人帳戶,或在共用裝置上切換不同帳戶。
如要瞭解詳情,請登出。