Credential Management API

Meggin Kearney
Meggin Kearney

Credential Management API 是一種標準的瀏覽器 API,提供程式輔助介面 也能在不同裝置上流暢登入。

Credential Management API:

  • 提供順暢的登入流程:即使使用者的工作階段已過期,或是儲存在其他裝置中,使用者仍可自動重新登入網站。
  • 可讓使用者輕觸以帳戶選擇工具登入 - 使用者可以在原生帳戶選擇工具中選擇帳戶。
  • 儲存憑證 - 應用程式可儲存使用者名稱和密碼組合,甚至是聯合帳戶詳細資料。這些憑證可透過瀏覽器同步處理到所有裝置上。
,瞭解如何調查及移除這項存取權。

想要看看實際運作情況嗎?試試 Credential Management API 示範 查看 程式碼

可檢查 Credential Management API 瀏覽器支援

瀏覽器支援

  • Chrome:51.
  • Edge:18。
  • Firefox:60。
  • Safari:13.

資料來源

使用 Credential Management API 前,請先確認 PasswordCredentialFederatedCredential 受到支援。

if (window.PasswordCredential || window.FederatedCredential) {
  // Call navigator.credentials.get() to retrieve stored
  // PasswordCredentials or FederatedCredentials.
}
敬上

登入使用者

如要登入使用者,請從瀏覽器密碼擷取憑證 並用來登入使用者帳戶。

例如:

  1. 如果使用者到達您的網站但未登入帳戶 呼叫 navigator.credentials.get()
  2. 使用擷取的憑證登入使用者。
  3. 更新 UI,指出使用者已經登入。

詳情請參閱: 登入使用者

儲存或更新使用者憑證

使用者透過聯合識別資訊提供者 (例如 Google) 登入 登入、Facebook、GitHub:

  1. 在使用者成功登入或建立帳戶之後,以該使用者的電子郵件地址建立 FederatedCredential 並使用 FederatedCredentials.provider 指定識別資訊提供者。
  2. 使用 navigator.credentials.store() 儲存憑證物件。

詳情請參閱: 登入使用者

如果使用者透過使用者名稱和密碼登入:

  1. 當使用者成功登入或建立帳戶後,請使用 User-ID 建立 PasswordCredential,並 。
  2. 使用 navigator.credentials.store() 儲存憑證物件。

詳情請參閱: 透過表單儲存憑證

登出

請在使用者登出時呼叫 navigator.credentials.preventSilentAccess() 防止使用者自動重新登入。

停用自動登入功能後,使用者也能輕鬆切換帳戶, 例如工作和個人帳戶之間,或是 共用裝置,無需重新輸入登入資訊。

詳情請參閱: 登出

意見回饋