Credential Management API 是一種以標準為準的瀏覽器 API,可在網站和瀏覽器之間提供程式輔助介面,讓使用者在不同裝置上都能順暢登入。
憑證管理 API:
- 消除登入流程中的摩擦點:即使使用者的會話已過期,或是他們在其他裝置上儲存了憑證,系統仍可自動登入網站。
- 允許使用者透過帳戶選擇器輕觸登入:使用者可以在原生帳戶選擇器中選擇帳戶。
- 儲存憑證:應用程式可以儲存使用者名稱和密碼組合,甚至是聯合帳戶詳細資料。瀏覽器可在不同裝置間同步這些憑證。
想看看實際運作情形嗎?試用 Credential Management API 示範,並查看程式碼。
檢查憑證管理 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 等聯合身分提供者登入:
- 使用者成功登入或建立帳戶後,請使用使用者的電子郵件地址做為 ID,建立
FederatedCredential
,並使用FederatedCredentials.provider
指定身分識別提供者。 - 使用
navigator.credentials.store()
儲存憑證物件。
詳情請參閱「登入使用者」一文。
如果使用者使用使用者名稱和密碼登入:
- 使用者成功登入或建立帳戶後,請使用使用者 ID 和密碼建立
PasswordCredential
。 - 使用
navigator.credentials.store()
儲存憑證物件。
詳情請參閱「透過表單儲存憑證」一文。
登出
使用者登出時,請呼叫 navigator.credentials.preventSilentAccess()
,避免系統自動登入。
停用自動登入功能後,使用者就能輕鬆切換帳戶,例如公司帳戶和個人帳戶,或是共用裝置上的帳戶,而無須重新輸入登入資訊。
如要瞭解詳情,請參閱「登出」一文。