Credential Management API

Meggin Kearney
Meggin Kearney

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

憑證管理 API:

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

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

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

瀏覽器支援

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

資料來源

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

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

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

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

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

登出

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

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

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

意見回饋