Amedia 使用 WebOTP 後，密碼金鑰註冊率提升 100%

Henning Haaland Kulander

Yu Tsuno

發布日期：2026 年 6 月 30 日

Amedia 是挪威最大的地方編輯媒體發布商，管理超過 100 種報紙，每日讀者人數超過 200 萬。為提供統一且流暢的體驗，Amedia 使用aID，這是他們自家的數位身分識別解決方案。這個以標準為基礎的同盟帳戶系統不僅可讓使用者存取 Amedia 的整個網路，也已獲得其他挪威和丹麥報紙採用。

挑戰：向多元使用者族群介紹密碼金鑰

對 Amedia 而言，登入程序是存取內容的入口。每增加一秒的摩擦，都會直接影響讀者人數。對行動使用者來說，一般密碼和簡訊雙重驗證 (2FA) 相當不便，但直接採用密碼金鑰卻會造成不熟悉的問題。

由於 aID 通常是使用者第一次接觸密碼金鑰，因此強制突然變更為不熟悉的生物特徵辨識提示，會導致部分使用者猶豫不決。Amedia 發現他們不能只是部署這項技術，還必須協助使用者瞭解如何使用密碼金鑰。

解決方案：結合 WebOTP 和密碼金鑰流程

Amedia 並未強迫使用者在舊習慣 (簡訊) 和完全陌生的概念 (密碼金鑰) 之間做出選擇，而是將兩者結合，提供流暢的單一新手上路體驗。他們使用 WebOTP API 簡化了常見的簡訊驗證程序，同時在後端悄悄設定無密碼登入的基礎架構。

1. 跨平台輕鬆註冊

使用者註冊 aID 時，會輸入姓名、電話號碼和電子郵件地址。Amedia 會透過簡訊傳送動態密碼 (OTP)。Amedia 特別採用簡訊 OTP，而非電子郵件，是因為在斯堪地那維亞，擁有超過一組電話號碼的情況並不常見，而且更換行動電信業者時，號碼可以順利轉移。因此電話號碼是可靠的登入主要 ID，也是建立擴充使用者設定檔的一致資料點。Amedia 使用 WebOTP API，不必強制使用者離開瀏覽器、開啟訊息應用程式、記住驗證碼並輸入。在支援的行動瀏覽器上，系統會顯示底部功能表提示，使用者只要輕觸「驗證」即可。瀏覽器會自動從簡訊擷取動態密碼，並提交表單。

此外，Amedia 也更新了簡訊傳送方式，改用標準化的來源繫結訊息格式 (例如 @www.aid.no #123456)，讓使用者在更廣泛的生態系統中順暢登入。這項標準不僅支援 Android 和桌機上 Chrome、Opera 和 Vivaldi 等瀏覽器的 WebOTP API，還能順暢啟用 Safari 的autocomplete="one-time-code"功能。因此，行動裝置和電腦平台的使用者都能體驗安全且自動化的 OTP 流程，無須平台專屬的後端邏輯。詳情請參閱「簡訊 OTP 表單最佳做法」。

// Detect feature support using OTPCredential availability
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;

    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', (e) => {
         ac.abort();
      });
    }

    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: ac.signal
    }).then(otp => {
      // Automatically fill the input and submit the form
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error('WebOTP error:', err);
    });
  });
}

2. 立即註冊密碼金鑰

先前，使用者完成 WebOTP 驗證後，Amedia 會提供選項：建立一般密碼或設定密碼金鑰。可想而知，遇到不熟悉的技術用語時，大多數使用者會選擇最簡單的方式：完全略過這個步驟，或改用標準密碼。

2 月中旬，Amedia 團隊改變了做法，他們在驗證後流程中立即整合密碼金鑰註冊提示，甚至在向使用者顯示選項之前就整合了。為遵守 Chrome 和 Safari 等瀏覽器嚴格的使用者手勢規定，Amedia 無縫串連了互動。由於使用者會先確認 OTP，因此這項初始輕觸動作會做為必要的使用者手勢，直接叫用 navigator.credentials.create() 提示。Amedia 將密碼金鑰設為預設體驗，而非選用設定，註冊成功率立即提高一倍。

雖然這個即時提示非常有效，但團隊仍嘗試使用「條件式建立」機制進一步簡化體驗，這個機制完全在背景中產生密碼金鑰，不需要使用者直接操作。不過，他們遇到技術障礙：有條件建立帳戶需要先使用密碼管理工具中儲存的有效密碼登入。由於 Amedia 的 WebOTP 流程完全不需要密碼，因此不符合這項安全條件。為解決這項限制，Amedia 現在只會保留一般雙重驗證登入流程 (密碼和動態密碼) 的條件式建立作業，並使用鏈結式使用者手勢進行免密碼新手上路程序。

為確保體驗穩定，系統會使用標準註冊流程。 這會觸發瀏覽器 UI 對話方塊，系統會安全地提示瀏覽器的密碼金鑰註冊 UI。使用者透過裝置的螢幕鎖定功能 (生物特徵辨識或 PIN 碼) 建立密碼金鑰。在 WebOTP 之後鏈結這項權限，使用者就能完成設定，完全不需要記住密碼。

// Triggered immediately after successful WebOTP verification
async function registerPasskey(creationOptionsFromServer) {
  try {
    const credential = await navigator.credentials.create({
      publicKey: {
        ...creationOptionsFromServer,
        authenticatorSelection: {
          residentKey: "required",
          userVerification: "required"
        }
      }
    });

    // Send the new credential to the server for registration
    await sendCredentialToServer(credential);
  } catch (error) {
    console.error("Passkey registration failed", error);
  }
}

3. 快速後續登入

使用者下次在同一部裝置上造訪 Amedia 出版物時，aID 會自動觸發密碼金鑰登入程序。如果使用者在自動提示顯示前與頁面互動，或自動提示遭到關閉，系統會正常使用密碼金鑰表單自動填入功能。

這樣一來，使用者只需要與瀏覽器/作業系統提示或鍵盤的自動填入建議互動，選取密碼金鑰，完全略過手動輸入表單的步驟，即可快速登入。

// Triggering conditional UI for autofill suggestions
async function authenticateWithPasskey(requestOptionsFromServer) {
  try {
    const credential = await navigator.credentials.get({
      publicKey: requestOptionsFromServer,
      mediation: "conditional" // Enables autofill integration
    });

    // Authenticate the user on the server
    await verifyAssertionWithServer(credential);
  } catch (error) {
    console.error("Passkey authentication failed", error);
  }
}

影響：透過鏈結功能順暢採用

Amedia 創新了新手指引流程，大幅減少新讀者和回訪讀者的阻力。結合 WebOTP 和密碼金鑰後，作業和使用體驗明顯改善：

• 大幅加快註冊速度：由於系統會自動輸入 WebOTP，且完全不需要手動建立密碼，因此建立新 aID 帳戶所需的時間大幅縮短。
• 48% 的新使用者會建立密碼金鑰：在 WebOTP 驗證後立即提示建立密碼金鑰，Amedia 的密碼金鑰註冊轉換率極高，與先前的選擇式新手上路流程相比，增加了 100%。
• 登入速度快 82%：與密碼或手動輸入動態密碼等替代方法相比，回訪者使用密碼金鑰驗證身分的速度快了五倍以上。

總而言之，雖然更廣泛的數位生態系統持續面臨密碼金鑰術語和使用者教育方面的挑戰，但 Amedia 的積極做法提供了一份成功的藍圖。將密碼金鑰整合至每日有數百萬人使用的高頻率服務，為媒體業建立無縫存取的新標準，在不影響使用者留存率的情況下，永久提升安全性。