Credential Management API

Eiji Kitamura
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 前，請先確認 PasswordCredential 或 FederatedCredential 受到支援。

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() 防止使用者自動重新登入。

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

詳情請參閱： 登出。

意見回饋