Credential Management API

Eiji Kitamura
Meggin Kearney
Meggin Kearney

Credential Management API 是一種以標準為準的瀏覽器 API，可在網站和瀏覽器之間提供程式輔助介面，讓使用者在不同裝置上都能順暢登入。

憑證管理 API：

  • 消除登入流程中的摩擦點：即使使用者的會話已過期，或是他們在其他裝置上儲存了憑證，系統仍可自動登入網站。
  • 允許使用者透過帳戶選擇器輕觸登入：使用者可以在原生帳戶選擇器中選擇帳戶。
  • 儲存憑證：應用程式可以儲存使用者名稱和密碼組合，甚至是聯合帳戶詳細資料。瀏覽器可在不同裝置間同步這些憑證。

想看看實際運作情形嗎？試用 Credential Management API 示範，並查看程式碼。

檢查憑證管理 API 的瀏覽器支援情形

瀏覽器支援

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

資料來源

使用憑證管理 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. 使用者成功登入或建立帳戶後，請使用使用者的電子郵件地址做為 ID，建立 FederatedCredential，並使用 FederatedCredentials.provider 指定身分識別提供者。
  2. 使用 navigator.credentials.store() 儲存憑證物件。

詳情請參閱「登入使用者」一文。

如果使用者使用使用者名稱和密碼登入：

  1. 使用者成功登入或建立帳戶後，請使用使用者 ID 和密碼建立 PasswordCredential。
  2. 使用 navigator.credentials.store() 儲存憑證物件。

詳情請參閱「透過表單儲存憑證」一文。

登出

使用者登出時，請呼叫 navigator.credentials.preventSilentAccess()，避免系統自動登入。

停用自動登入功能後，使用者就能輕鬆切換帳戶，例如公司帳戶和個人帳戶，或是共用裝置上的帳戶，而無須重新輸入登入資訊。

如要瞭解詳情，請參閱「登出」一文。

意見回饋