原始碼試用：WebAuthn 即時中介服務，可順暢登入

José Luis Zapata

發布日期：2025 年 8 月 19 日

WebAuthn 立即仲介是專為簡化使用者登入流程設計的全新網路功能。這項原始碼試用計畫將概略介紹這項功能、優點和實作詳細資料，邀請您參與並協助塑造網路驗證的未來。

背景

網頁上的驗證程序通常會造成阻礙，讓使用者登入時遇到困難。現有的 WebAuthn 流程雖然功能強大，但「登入」按鈕卻難以處理，尤其是在憑證無法立即使用時，導致標準表單備援。

立即中介服務流程範例

這項新功能會導入低摩擦登入流程，類似於行動裝置上的 preferImmediatelyAvailableCredentials API。這項功能可減少操作障礙並提升使用者體驗，簡化登入程序 (通常在標準登入表單之前)。

運作方式

WebAuthn 即時中介服務可提供更直接有效率的登入體驗。這項功能可讓瀏覽器立即提供可用憑證，或立即發出憑證不存在的信號，不必提示進行跨裝置或安全金鑰驗證，因此開發人員可輕鬆導入。

immediate 中介服務類型

我們即將推出 immediate 中介服務類型，適用於 navigator.credentials.get() 請求。設定這個選項後，如果找不到本機可用的憑證，承諾就會以 NotAllowedError 拒絕。如果存在憑證，瀏覽器會照常處理驗證程序。

網站可靈活調整登入流程，在無法立即提供憑證時，改用其他方法。

請注意，瀏覽器仍可傳回 NotAllowedError，以維護使用者隱私權和安全性，避免指紋辨識或追蹤等問題。

特徵偵測

您可以使用 PublicKeyCredential.getClientCapabilities() 偵測是否可立即中介。開發人員可以檢查回傳的 capabilities 物件是否具備 immediateGet 功能。

async function checkImmediateMediationAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet && window.PasswordCredential) {
      console.log("Immediate Mediation with passwords supported.");
    } else if (capabilities.immediateGet) {
      console.log("Immediate Mediation without passwords supported.");
    } else { console.log("Immediate Mediation unsupported."); }
  } catch (error) {
    console.error("Error getting client capabilities:", error);
  }
}

注意：如要擴大瀏覽器支援範圍，請從 WebAuthn Polyfills GitHub 存放區取得 getClientCapabilities() 的 Polyfill。

導入範例

如要使用 API，請使用 mediation: 'immediate' 呼叫 navigator.credentials.get()。建議您在要求中加入 password: true，因為大多數使用者目前可能都已儲存密碼，可立即享有這項體驗。

button.addEventListener('click', async (event) => {
  event.preventDefault();
  event.stopPropagation();
  const cred = await navigator.credentials.get({
    password: true,
    publicKey: {
      challenge, // Your server-generated challenge
      rpId: 'example.com' // Your Relying Party ID
    },
    mediation: 'immediate',
  });
});

開發人員應在 catch 區塊中處理 NotAllowedError，以提供優雅的備用登入體驗。

立即中介服務的逐步流程

WebAuthn 即時調解支援兩種主要用途，可簡化使用者登入程序：啟用專用的「使用密碼金鑰登入」按鈕，隱藏不必要的備援選項；以及提供動態登入流程，在使用者執行重要動作前主動提供憑證。

用途 1：使用登入按鈕明確登入

這個情境的重點是提供專屬的登入按鈕，確保使用者體驗良好，不會出現非預期的提示或前往登入頁面。

流程：使用者點選登入按鈕時，Chrome 會提供已儲存的憑證。
  1. 使用者啟動登入程序：使用者點選「登入」按鈕。然後，信賴方會使用 mediation: "immediate" 呼叫 navigator.credentials.get()。
  2. 瀏覽器提示選取憑證 (如有)：瀏覽器會檢查是否有任何本機可用的密碼金鑰或要求的密碼。如果找到任何帳戶，系統會立即顯示模式 UI，供使用者選擇帳戶。帳戶會依上次使用時間戳記排序，然後依字母順序排序。 注意：如果瀏覽器在多個密碼管理工具中，找到同一帳戶的密碼和密碼金鑰，會優先使用密碼金鑰。如果同一帳戶有多個來自不同供應商的密碼金鑰，系統會優先使用最後使用的密碼金鑰。
  3. 成功登入：使用者從瀏覽器 UI 選取密碼金鑰。如果瀏覽器需要驗證，系統會提示使用者透過先前設定的方法 (例如 PIN 碼、生物特徵辨識輸入或解鎖圖案) 驗證身分。順利完成登入程序。
  4. 備援路徑：沒有密碼金鑰或使用者關閉：如果網站沒有可用的本機密碼金鑰或要求密碼，或是使用者關閉瀏覽器 UI，瀏覽器會向信賴方擲回 NotAllowedError，且不會顯示任何跨裝置或安全金鑰選項的 UI。接著，信賴方可以繼續使用標準登入頁面，或提供替代驗證機制。

應用情境 2：使用者動作前的隱含登入流程

這個情境可提供主動登入體驗，在使用者執行需要驗證狀態的動作 (例如結帳) 前，提供密碼金鑰和密碼。

流程：使用者執行需要登入的動作時，Chrome 會提供已儲存的憑證。
  1. 使用者發起需要登入的動作：使用者點選需要登入才能執行的動作按鈕 (例如「結帳」按鈕)。然後，信賴方會使用 mediation: "immediate" 呼叫 navigator.credentials.get()。

  2. 瀏覽器提示選取憑證 (如有)：瀏覽器會檢查是否有任何可用的本機密碼金鑰或密碼。如果找到這些項目，系統會立即顯示模式 UI，供使用者選擇帳戶。系統會依據上次使用時間戳記排序帳戶，然後依字母順序排序，並進行重複資料刪除，每個帳戶只會顯示一個項目。注意：如果系統在多個密碼管理工具中找到同一帳戶的密碼和密碼金鑰，瀏覽器會優先使用密碼金鑰。如果同一帳戶有多個來自不同供應商的密碼金鑰，系統會優先使用最近使用的密碼金鑰。

  3. 成功登入：使用者從瀏覽器 UI 選取憑證。如果瀏覽器需要驗證，系統會提示使用者使用先前設定的方法 (例如 PIN 碼、生物特徵辨識輸入或解鎖圖案) 驗證身分。順利完成登入程序。

  4. 備用路徑：沒有憑證或使用者關閉：如果網站沒有可用的本機憑證，或使用者關閉瀏覽器 UI，瀏覽器會向信賴方擲回 NotAllowedError，且瀏覽器不會顯示任何 UI。使用者登入體驗與目前相同。然後，信賴方可以要求使用者提供更多詳細資料 (例如電子郵件地址)，或顯示替代驗證機制，例如密碼表單、簡訊驗證或支援跨裝置驗證器的 WebAuthn 模式要求。

優點

WebAuthn 即時調解可為開發人員和使用者帶來多項主要優勢：

  • 流暢的登入體驗：如果使用者有可立即使用的密碼金鑰，或是在瀏覽器或密碼管理工具中儲存密碼，就能享有更流暢、更輕鬆的登入體驗。
  • 智慧登入：如果使用者想執行需要登入的活動，API 會啟用登入流程。這些項目會根據使用者的憑證狀態智慧調整。盡可能提供即時驗證，避免不必要的重新導向，並簡化流程。
  • 改善憑證管理功能：如果多個密碼管理工具提供相同帳戶的憑證，瀏覽器會智慧選取最合適的選項，簡化使用者的憑證管理作業。
  • 減少使用者困惑：直接顯示已知憑證，可減少使用者在多個登入選項或標準表單中感到困惑的情況。
  • 流暢的備援機制：如果使用者沒有立即可用的憑證，系統會流暢地備援至標準登入頁面，因此使用者體驗與目前的流程相同。

隱私權與安全性

WebAuthn 即時仲介功能可讓網站在使用者明確授權登入嘗試前，識別出可立即使用的憑證。為保護使用者隱私權及防範潛在的濫用行為，我們採取了幾項重要措施：

  • 使用者手勢規定：API 呼叫需要使用者手勢 (任何暫時性使用者啟用)。這會讓網站難以進行無聲探查和指紋辨識。
  • 無痕和私人工作階段：在無痕或私人工作階段中，任何即時中介服務請求都會擲回 NotAllowedError。
  • allowCredentials 清單的限制：使用 allowCredentials 清單的要求會擲回 NotAllowedError。這樣一來，網站就無法推斷使用者互動記錄，或跨工作階段追蹤使用者。
  • 取消：在要求中設定 signal 參數並立即中介服務無效。這樣一來，網站就無法透過程式輔助方式關閉任何瀏覽器 UI。

立即試用

建議您試用 WebAuthn 即時仲介功能。

Chrome 中的狀態

這項功能正在 Chromium 開發週期中逐步推進：

  • 電腦：Chrome 136 的開發人員試用，以及 Chrome 139 至 141 的來源試用。
  • Android：Chrome 140 中的開發人員試用版。

適用於本機測試

如要在本機測試 WebAuthn 即時中介服務，請按照下列步驟操作：

  1. 下載 Chrome 139：在桌機上取得並開啟最新版 Chrome。
  2. 啟用「立即中介服務」旗標：前往網址列中的 chrome://flags/#web-authentication-immediate-get，然後啟用「Web Authentication Immediate Get」旗標。
  3. 準備憑證：確認您已儲存可用的密碼金鑰和密碼：
    • 儲存在 Google 密碼管理工具中的密碼。
    • 儲存在 Google 密碼管理工具的密碼金鑰 (必須登入並將 Chrome 與 Google 帳戶同步)、Windows Hello 或 iCloud 鑰匙圈。

公開測試 (來源試用)

如要在公開環境中，透過來源試用測試 WebAuthn 即時中介服務，請按照下列步驟操作：

  1. 註冊：前往 Chrome 來源試用頁面，並註冊「WebAuthn immediate mediation」試用。
  2. 在 HTTP 標頭中加入權杖：在網站的 HTTP 標頭中加入提供的原始碼試用權杖： HTML Origin-Trial: [YOUR_TRIAL_TOKEN]

注意：您也可以使用 JavaScript 以程式輔助方式提供權杖。

測試情境

我們提供參考實作，建議您自行建構原型，測試各種情境。

  • 參考範例：您可以在 https://deephand.github.io/webauthn-immediate-demo/ 試用參考實作方式。
    • 導入原型：在網站上導入原型時，請務必在使用者點按 (例如「登入」按鈕，或任何需要使用者登入的互動) 後，使用 mediation: 'immediate' 進行 navigator.credentials.get() 呼叫。
  • 流程 1：不使用密碼或密碼金鑰登入：如果沒有網站適用的密碼金鑰或密碼，按一下「登入」會直接前往標準登入頁面，不會顯示瀏覽器使用者介面。
  • 流程 2：使用可立即使用的本機密碼金鑰登入：如果網站已儲存密碼金鑰，按一下「登入」應會觸發「立即仲介」使用者介面，提供密碼金鑰供選取。
  • 流程 3：使用本機密碼金鑰或密碼登入：如果您同時儲存密碼金鑰和密碼，請啟用「要求密碼」選項 (在程式碼中設定 password: true)。點選「登入」後，立即中介服務 UI 應會提供密碼金鑰和密碼選項。