WebOTP を使用してパスキー登録が 100% 増加した Amedia

Henning Haaland Kulander

Yu Tsuno

公開日: 2026 年 6 月 30 日

Amedia はノルウェー最大のローカル編集メディア出版社で、100 以上の新聞タイトルを管理し、毎日 200 万人以上の読者にリーチしています。Amedia は、統合された シームレスなエクスペリエンスを提供するために、社内デジタル ID ソリューションである aID を使用しています。この標準ベースのフェデレーション アカウント システムにより、ユーザーは Amedia のネットワーク全体にアクセスできるだけでなく、ノルウェーとデンマークの他の新聞社でも採用されています。

課題: 多様なユーザー層へのパスキーの導入

Amedia にとって、ログイン プロセスはコンテンツへの入り口です。煩わしさが 1 秒増えるごとに、読者数に直接影響します。通常のパスワードと SMS ベースの 2 要素認証（2FA）は、外出中のユーザーにとって非常に煩雑です。 パスキーに直接移行すると、予期しない 障害が発生しました。それは、まったく馴染みがないことでした。

aID は、ユーザーがパスキーに初めて触れる機会であることが多いため、馴染みのない生体認証プロンプトに急に変更すると、躊躇するユーザーもいました。Amedia は、テクノロジーを導入するだけでなく、ユーザーがパスキーの使い方を理解できるようにする必要があることに気づきました。

解決策: WebOTP とパスキーのフローを組み合わせる

Amedia は、ユーザーに古い習慣（SMS）とまったく新しいコンセプト（パスキー）のどちらかを選択させるのではなく、両方を組み合わせて、1 つの流動的なオンボーディング エクスペリエンスを実現しました。WebOTP API を使用して、馴染みのある SMS 認証プロセスを効率化しながら、バックエンドでパスワードレス ログインのインフラストラクチャを静かに設定しました。

1. プラットフォームをまたいだスムーズな登録

ユーザーが aID に登録する際に、名前、電話番号、メールアドレスを入力します。 Amedia は SMS でワンタイム パスワード（OTP）を送信します。Amedia は、メールではなく SMS OTP を使用しています。これは、スカンジナビアでは複数の電話番号を持っていることが少なく、モバイル プロバイダを切り替える際に番号がシームレスに移行されるためです。 この安定性により、電話番号はログインの信頼できるプライマリ識別子となり、拡張ユーザー プロファイルの構築に一貫したデータポイントとなります。Amedia は、ユーザーにブラウザを離れてメッセージ アプリを開き、コードを覚えて入力させるのではなく、 Amedia は WebOTP API を使用しています。対応しているモバイル ブラウザでは、ボトムシート プロンプトが表示され、ユーザーは [確認] をタップするだけで済みます。ブラウザは SMS から OTP を自動的に取得してフォームを送信します。

さらに、Amedia は SMS 配信を更新して、標準化されたオリジン バウンド メッセージ形式（例: @www.aid.no #123456）を使用し、より広範なエコシステム全体でスムーズなログインを実現しました。この標準は、Android とパソコンの Chrome、Opera、Vivaldi などのブラウザで WebOTP API を強化するだけでなく、Safari のautocomplete="one-time-code" 機能をシームレスに有効にします。その結果、モバイル プラットフォームとパソコン プラットフォームのユーザーは、プラットフォーム固有のバックエンド ロジックを必要とせずに、安全な自動 OTP フローを利用できます。詳しくは、SMS 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 は、パスキーをオプションの設定ではなくデフォルトのエクスペリエンスにすることで、登録成功率を瞬時に 2 倍にしました。

この即時プロンプトは非常に効果的でしたが、チームは 「条件付き 作成」 を使用してエクスペリエンスをさらに効率化しようとしました。これは、ユーザーが直接操作しなくても、バックグラウンドでパスキーを完全に生成するメカニズムです。ただし、技術的なハードルに直面しました。条件付き作成では、パスワード マネージャーに保存されている有効なパスワードを使用して事前にログインする必要があります。Amedia の WebOTP フローは完全にパスワードレスであるため、このセキュリティ基準を満たしていません。この制約を回避するため、Amedia は条件付き作成を通常の 2 要素ログインフロー（パスワードと OTP コード）にのみ予約し、パスワードレス オンボーディングには連結されたユーザー ジェスチャーを使用しています。

信頼性の高いエクスペリエンスを確保するため、システムは標準の登録フローを使用します。 これにより、ブラウザの 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 は自動的にパスキー ログインをトリガーします。自動プロンプトが表示される前にユーザーがページを操作した場合、または自動プロンプトが閉じられた場合、システムはパスキー フォーム の自動入力を適切に使用します。

これにより、ユーザーはブラウザ/OS のプロンプトまたはキーボードの自動入力候補を操作してパスキーを選択するだけで済み、手動でフォームを入力する必要がないため、ログイン プロセスが迅速になります。

// 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% がパスキーを作成: パスキーの作成を促すことで、Amedia は WebOTP 認証の直後にパスキー登録のコンバージョン率を非常に高く達成しました。これは、以前の選択ベースのオンボーディング フローと比較して 100% 増加しています。
• ログインが 82% 高速化: リピーターは、パスワードや手動での OTP 入力などの代替方法と比較して、パスキーを使用すると 5 倍以上 速く認証できます。

最終的に、広範なデジタル エコシステムはパスキーの用語とユーザー教育に関する課題に引き続き取り組んでいますが、Amedia の積極的なアプローチは成功の青写真を提供しています。パスキーを毎日何百万人ものユーザーが使用する高頻度のサービスに統合することで、メディア業界のシームレスなアクセスの新しい標準が確立され、ユーザー維持率を犠牲にすることなく、永続的なセキュリティ アップグレードが実現します。