透過表單自動填入功能使用密碼金鑰登入

建立可利用密碼金鑰的登入體驗，同時也能支援現有的密碼使用者。

Eiji Kitamura

密碼金鑰可取代密碼，讓使用者在網路上的帳戶更加安全、簡單又好用。不過，從密碼驗證轉換為密碼金鑰驗證，可能會使使用者體驗變得複雜。使用表單自動填入功能建議密碼金鑰，有助於打造一致的使用體驗。

為什麼要使用表單自動填入功能搭配密碼金鑰登入？

使用密碼金鑰後，使用者只要透過指紋、臉部或裝置 PIN 碼，就能登入網站。

理想情況下，使用者不需要輸入密碼，驗證流程也只需要一個單一登入按鈕即可。使用者輕觸按鈕後，系統會彈出帳戶選取器對話方塊，使用者可以選擇帳戶，解鎖畫面進行驗證及登入。

不過，從密碼轉換為密碼金鑰驗證可能會比較困難。雖然使用者會改用密碼金鑰，但仍會有人使用密碼，因此網站必須同時支援這兩種使用者。使用者不必記得自己已在哪些網站上改用密碼金鑰，因此要求使用者事先選取要使用的驗證方法，會導致使用者體驗不佳。

密碼金鑰也是一項新技術，解釋這些功能並確保使用者能輕鬆使用，對網站來說可能相當困難。我們可以利用熟悉的使用者體驗，為密碼自動填入功能解決這兩個問題。

條件式 UI

如要為密碼金鑰和密碼使用者提供高效的使用者體驗，您可以在自動填入建議中加入密碼金鑰。這稱為「條件式 UI」，屬於 WebAuthn 標準的一部分。

使用者輕觸使用者名稱輸入欄位後，系統就會彈出自動填入建議對話方塊，並醒目顯示已儲存的密碼金鑰，以及密碼自動填入建議。使用者可以選擇帳戶，並使用裝置螢幕鎖定功能登入。

這樣一來，使用者可以透過現有表單登入網站，就像沒有任何變化一樣，但如果使用者有安全金鑰，則可享有額外的安全性優勢。

運作方式

如要使用密碼金鑰進行驗證，請使用 WebAuthn API。

密碼金鑰驗證流程中的四個元件如下： 使用者：

  • 後端：您的後端伺服器，用於儲存帳戶資料庫，其中儲存了公開金鑰和密碼金鑰的其他中繼資料。
  • 前端：與瀏覽器通訊並將擷取要求傳送至後端的前端。
  • 瀏覽器：執行 JavaScript 的使用者瀏覽器。
  • 驗證器：使用者的驗證器，用於建立及儲存密碼金鑰。這可能與瀏覽器位於同一裝置上 (例如使用 Windows Hello 時)，也可能位於手機等其他裝置上。
密碼金鑰驗證圖表
  1. 使用者一進入前端，就會向後端要求挑戰，以便透過密碼金鑰進行驗證，並呼叫 navigator.credentials.get() 以啟動密碼金鑰驗證程序。這會傳回 Promise。
  2. 當使用者將游標移至登入欄位時，瀏覽器會顯示密碼自動填入對話方塊，其中包含密碼金鑰。如果使用者選取密碼金鑰，系統會顯示驗證對話方塊。
  3. 使用者使用裝置的螢幕鎖定功能驗證身分後，承諾會解析，並將公開金鑰憑證傳回至前端。
  4. 前端會將公開金鑰憑證傳送至後端。後端會根據資料庫中相符的帳戶公開金鑰，驗證簽名。如果成功，使用者就會登入。

透過表單自動填入功能使用密碼金鑰驗證

當使用者想要登入時，您可以發出條件式 WebAuthn get 呼叫，指出自動填入建議中可能包含密碼金鑰。對 WebAuthn 的 navigator.credentials.get() API 發出條件式呼叫不會顯示 UI，並會一直處於待處理狀態，直到使用者從自動填入建議中選取要登入的帳戶為止。如果使用者選擇密碼金鑰，瀏覽器會使用憑證解析承諾，而不是填寫登入表單。接著，網頁就負責讓使用者登入。

為表單輸入欄位加上註解

視需要在使用者名稱 input 欄位中加入 autocomplete 屬性。接著附加 username 和 webauthn 做為符記，讓系統建議密碼金鑰。

<input type="text" name="username" autocomplete="username webauthn" ...>

特徵偵測

在叫用條件式 WebAuthn API 呼叫之前，請檢查以下事項：

  • 瀏覽器支援使用 PublicKeyCredential 的 WebAuthn。

瀏覽器支援

  • Chrome：67。
  • Edge：18。
  • Firefox：60。
  • Safari：13。

資料來源

  • 瀏覽器支援使用 PublicKeyCredential.isConditionalMediationAvailable() 的 WebAuthn 條件式 UI。

瀏覽器支援

  • Chrome：108。
  • Edge：108。
  • Firefox：119。
  • Safari：16 歲。

資料來源

// Availability of `window.PublicKeyCredential` means WebAuthn is usable.  
if (window.PublicKeyCredential &&  
    PublicKeyCredential.​​isConditionalMediationAvailable) {  
  // Check if conditional mediation is available.  
  const isCMA = await PublicKeyCredential.​​isConditionalMediationAvailable();  
  if (isCMA) {  
    // Call WebAuthn authentication  
  }  
}

從 RP 伺服器擷取挑戰

從 RP 伺服器擷取呼叫 navigator.credentials.get() 所需的驗證問題：

  • challenge：ArrayBuffer 中伺服器產生的驗證問題。你必須提供這個值來防範重送攻擊。請務必在每次登入嘗試時產生新的驗證，並在一段時間後或在登入嘗試未通過驗證後忽略該驗證。可視為 CSRF 權杖。
  • allowCredentials：此驗證可接受的憑證陣列。傳遞空陣列，讓使用者從瀏覽器顯示的清單中選取可用的密碼金鑰。

  • userVerification：指出使用裝置螢幕鎖定功能進行使用者驗證的結果為 "required"、"preferred" 或 "discouraged"。預設值為 "preferred"，表示驗證工具可能略過使用者驗證程序。將其設為 "preferred" 或省略屬性。

使用 conditional 標記呼叫 WebAuthn API，以便驗證使用者

呼叫 navigator.credentials.get() 開始等待使用者驗證。

// To abort a WebAuthn call, instantiate an `AbortController`.
const abortController = new AbortController();

const publicKeyCredentialRequestOptions = {
  // Server generated challenge
  challenge: ****,
  // The same RP ID as used during registration
  rpId: 'example.com',
};

const credential = await navigator.credentials.get({
  publicKey: publicKeyCredentialRequestOptions,
  signal: abortController.signal,
  // Specify 'conditional' to activate conditional UI
  mediation: 'conditional'
});
  • rpId：RP ID 是網域，網站可以指定其網域或可註冊的後置字串。這個值必須與建立密碼金鑰時使用的 rp.id 相符。

請務必指定 mediation: 'conditional'，以便將要求設為條件式。

將傳回的公開金鑰憑證傳送至 RP 伺服器

使用者選取帳戶並同意使用裝置的螢幕鎖定功能後，系統會解析承諾，並將 PublicKeyCredential 物件傳回 RP 前端。

承諾遭拒的原因有很多，您需要根據 Error 物件的 name 屬性，妥善處理錯誤：

  • NotAllowedError：使用者已取消作業。
  • 其他例外狀況：發生不明錯誤。瀏覽器會向使用者顯示錯誤對話方塊。

公開金鑰憑證物件包含下列屬性：

  • id：經驗證密碼金鑰憑證的 base64url 編碼 ID。
  • rawId：憑證 ID 的 ArrayBuffer 版本。
  • response.clientDataJSON：用於儲存用戶端資料的 ArrayBuffer。這個欄位包含多項資訊，例如驗證問題和 RP 伺服器必須驗證的來源。
  • response.authenticatorData：驗證器資料的 ArrayBuffer。這個欄位包含 RP ID 等資訊。
  • response.signature：簽名的 ArrayBuffer。這個值是憑證的核心元素，需要在伺服器上進行驗證。
  • response.userHandle：ArrayBuffer，當中包含建立時設定的使用者 ID。如果伺服器必須選擇要使用的 ID 值，或是後端想避免建立憑證 ID 索引，則可使用這個值而非憑證 ID。
  • authenticatorAttachment：如果憑證來自本機裝置，就會傳回 platform。否則，cross-platform 會在 使用者使用手機登入時特別有用。如果使用者需要使用手機登入，不妨提示他們在本機裝置上建立密碼金鑰。
  • type：這個欄位一律設為 "public-key"。

如果您使用程式庫在 RP 伺服器上處理公開金鑰憑證物件，建議您先使用 base64url 部分編碼，再將整個物件傳送至伺服器。

驗證簽名

在伺服器上收到公開金鑰憑證時，請將其傳遞至 FIDO 程式庫，以便處理物件。

使用 id 屬性查詢相符的憑證 ID (如果您需要判斷使用者帳戶，請使用 userHandle 屬性，也就是您在建立憑證時指定的 user.id)。查看憑證的 signature 是否可以使用儲存的公開金鑰驗證。為此，建議您使用伺服器端程式庫或解決方案，而非自行編寫程式碼。您可以在 awesome-webauth GitHub 存放區中找到開放原始碼程式庫。

憑證經過比對公開金鑰驗證後，請讓使用者登入。

請按照「伺服器端密碼金鑰驗證」中的詳細操作說明進行

資源