このページは Cloud Translation API によって翻訳されました。

オリジントライアル: スムーズなログインのための WebAuthn の即時メディエーション

José Luis Zapata

公開日: 2025 年 8 月 19 日

WebAuthn 即時仲介は、ユーザーのログインフローを効率化するために設計された新しいウェブ機能です。このオリジントライアルでは、この機能の概要、メリット、実装の詳細について説明します。ぜひご参加いただき、ウェブ認証の未来を形作るお手伝いをいただければ幸いです。

背景

ウェブでの認証は、ユーザーのログインを複雑にするため、摩擦が生じることがよくあります。既存の WebAuthn フローは強力ですが、特に認証情報がすぐに利用できない場合に [ログイン] ボタンで問題が発生し、標準フォームのフォールバックにつながります。

即時メディエーションフローの例

この新機能では、モバイルの preferImmediatelyAvailableCredentials API と同様のスムーズなログインフローが導入されています。ログインの煩わしさを軽減し、ユーザーエクスペリエンスを向上させることで、標準のログインフォームよりも前にログインを簡素化します。

仕組み

WebAuthn の即時仲介により、より直接的で効率的なログインエクスペリエンスが可能になります。これにより、ブラウザは、クロスデバイス認証やセキュリティキー認証を求めることなく、利用可能な認証情報を即座に提供したり、認証情報がないことをすぐに通知したりできるようになります。これにより、デベロッパーの実装が簡素化されます。

`immediate` メディエーションタイプ

navigator.credentials.get() リクエストに immediate メディエーションタイプを導入します。このオプションを設定すると、ローカルで利用可能な認証情報が見つからない場合、Promise は 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);
  }
}

注: 幅広いブラウザをサポートするため、getClientCapabilities() のポリフィルは WebAuthn Polyfills GitHub リポジトリから入手できます。

実装例

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 の即時仲介は、ユーザーのログインを効率化する 2 つの主なユースケースをサポートしています。1 つは、不要なフォールバックオプションを抑制する専用の [パスキーでログイン] ボタンを有効にすること、もう 1 つは、ユーザーの重要な操作の前に認証情報を事前に提供する動的なログインフローを容易にすることです。

ユースケース 1: ログインボタンを使用した明示的なログイン

このシナリオでは、専用のログインボタンを提供することに重点を置いています。これにより、予期しないプロンプトやログインページへの移動を伴うことなく、クリーンなユーザーエクスペリエンスを実現できます。

ユーザーがログインボタンをクリックしたときに、Chrome がすでに保存されている認証情報を提示するフロー。

ユーザーがログインを開始する: ユーザーが [ログイン] ボタンをクリックします。次に、証明書利用者は mediation: "immediate" を使用して navigator.credentials.get() を呼び出します。
認証情報の選択を求めるブラウザのプロンプト（利用可能な場合）: ブラウザは、ローカルで利用可能なパスキーまたはリクエストされたパスワードを確認します。見つかった場合は、ユーザーがアカウントを選択するためのモーダル UI がすぐに表示されます。アカウントは、最後に使用されたタイムスタンプの順に並べ替えられ、次にアルファベット順に並べ替えられます。注: 同じアカウントに対して複数のパスワードマネージャーのパスワードとパスキーの両方が見つかった場合、ブラウザはパスキーを優先します。同じアカウントに対して異なるプロバイダのパスキーが複数存在する場合、最後に使用されたパスキーが優先されます。
ログインに成功した場合: ユーザーがブラウザの UI でパスキーを選択します。ブラウザで確認が必要な場合は、以前に設定した方法（PIN、生体認証入力、パターンなど）を使用して本人確認を行うよう求めるメッセージが表示されます。ログインが正常に完了します。
フォールバックパス: パスキーがないか、ユーザーが閉じた場合: サイトで使用できるローカルパスキーまたはリクエストされたパスワードがない場合、またはユーザーがブラウザ UI を閉じた場合、ブラウザは NotAllowedError を証明書利用者（RP）にスローし、ブラウザはクロスデバイスオプションまたはセキュリティキーオプションの UI を表示しません。その後、証明書利用者は標準のログインページに進むか、代替の認証メカニズムを提供できます。

ユースケース 2: ユーザーアクション前の暗黙的なログインフロー

このシナリオでは、ユーザーが認証状態を必要とするアクション（購入手続きなど）を行う前に、パスキーとパスワードを提供するプロアクティブなログインエクスペリエンスを実現します。

ログインが必要な操作を行ったときに、Chrome が保存済みの認証情報を提供するフロー。

ユーザーがログインを必要とするアクションを開始する: ユーザーがログインを必要とするアクションのボタン（「購入手続き」ボタンなど）をクリックします。次に、証明書利用者（RP）は mediation: "immediate" を指定して navigator.credentials.get() を呼び出します。
認証情報の選択を求めるブラウザのプロンプト（利用可能な場合）: ブラウザは、ローカルで利用可能なパスキーまたはパスワードを確認します。見つかった場合は、ユーザーがアカウントを選択するためのモーダル UI がすぐに表示されます。アカウントは、最後に使用したタイムスタンプでランク付けされ、アルファベット順に並べ替えられ、重複が削除されて、アカウントごとに 1 つのエントリが表示されます。注: 同じアカウントに対して複数のパスワードマネージャーのパスワードとパスキーの両方が見つかった場合、ブラウザはパスキーを優先します。同じアカウントのパスキーが複数のプロバイダから存在する場合、最後に使用されたパスキーが優先されます。
ログイン成功: ユーザーがブラウザ UI から認証情報を選択します。ブラウザで確認が必要な場合は、以前に設定した方法（PIN、生体認証入力、パターンなど）を使用して本人確認を行うよう求めるメッセージが表示されます。ログインが正常に完了します。
フォールバックパス: 認証情報がないか、ユーザーが閉じた場合: サイトのローカル認証情報がない場合、またはユーザーがブラウザの UI を閉じた場合、ブラウザは NotAllowedError を証明書利用者にスローし、ブラウザは UI を表示しません。ユーザーのログインエクスペリエンスは、本日より変更されません。その後、信頼できるパーティはユーザーに詳細情報（メールアドレスなど）を尋ねたり、パスワードフォーム、SMS 認証、クロスデバイス認証システムをサポートする WebAuthn モーダルリクエストなどの代替認証メカニズムを表示したりできます。

利点

WebAuthn の即時仲介には、デベロッパーとユーザーにとっていくつかの重要なメリットがあります。

スムーズなログイン: ブラウザやパスワードマネージャーに保存されているパスキーやパスワードをすぐに利用できるユーザーに対して、よりスムーズで負担の少ないログインエクスペリエンスを提供します。
インテリジェントログイン: ユーザーがログインを必要とするアクティビティを実行しようとしたときに、API がログインフローを有効にします。これらは、ユーザーの認証情報のステータスに合わせてインテリジェントに調整されます。可能な場合はすぐに認証を行い、不要なリダイレクトを回避してフローを効率化します。
認証情報の管理の改善: 複数のパスワードマネージャーが同じアカウントの認証情報を提供している場合、ブラウザが最も適切なオプションをインテリジェントに選択し、ユーザーの認証情報管理を簡素化します。
ユーザーの混乱を軽減: 既知の認証情報を直接提示することで、複数のログインオプションや標準フォームでよく発生するユーザーの混乱を最小限に抑えます。
シームレスなフォールバック: 認証情報をすぐに利用できないユーザーに対して、標準のログインページへのシームレスなフォールバックを保証します。つまり、ユーザーエクスペリエンスは現在のフローから変更されません。

プライバシーとセキュリティ

WebAuthn の即時仲介により、ユーザーがログイン試行を明示的に承認する前に、サイトがすぐに利用可能な認証情報の存在を特定できます。ユーザーのプライバシーを保護し、不正使用を防止するため、Google はいくつかの重要な対策を実施しています。

ユーザー操作の要件: API 呼び出しにはユーザー操作（一時的なユーザーの有効化）が必要です。これにより、サイトによるサイレントプロービングとフィンガープリンティングが困難になります。
シークレットセッションとプライベートセッション: シークレットセッションまたはプライベートセッションでは、即時メディエーションリクエストは NotAllowedError をスローします。
allowCredentials リストの制限: allowCredentials リストを使用するリクエストは NotAllowedError をスローします。これにより、サイトがユーザーの操作履歴を推測したり、セッションをまたいでユーザーをトラッキングしたりすることを防ぐことができます。
キャンセル: メディエーションをすぐに開始するリクエストで signal パラメータを設定することは無効です。これにより、サイトがブラウザ UI をプログラムで閉じることができなくなります。

試してみる

WebAuthn の即時仲介を試してみることをおすすめします。

Chrome のステータス

この機能は、Chromium の開発サイクルに沿って進められています。

パソコン: Chrome 136 でデベロッパー試用版、Chrome 139 ～ 141 でオリジントライアル。
Android: Chrome 140 でデベロッパートライアルを実施。

ローカルテストの場合

WebAuthn 即時メディエーションをローカルでテストするには:

Chrome 139 をダウンロードする: パソコンで Chrome の最新バージョンを入手して開きます。
Immediate Mediation フラグを有効にする: アドレスバーで chrome://flags/#web-authentication-immediate-get に移動し、「Web Authentication Immediate Get」フラグを有効にします。
認証情報を準備する: 使用可能なパスキーとパスワードが保存されていることを確認します。
- Google パスワードマネージャーに保存されているパスワード。
- Google パスワードマネージャー（ログインして Chrome を Google アカウントと同期する必要がある）、Windows Hello、または iCloud キーチェーンに保存されているパスキー。

公開テスト（オリジントライアル）の場合

一般公開環境でオリジントライアルを使用して WebAuthn の即時メディエーションをテストするには:

登録: Chrome オリジントライアルのページにアクセスし、「WebAuthn immediate mediation」トライアルに登録します。
HTTP ヘッダーにトークンを追加する: 提供されたオリジントライアルトークンをサイトの HTTP ヘッダーに含めます。 HTML Origin-Trial: [YOUR_TRIAL_TOKEN]

注: JavaScript を使用してプログラムでトークンを指定することもできます。

テストシナリオ

リファレンス実装を提供しています。さまざまなシナリオをテストするために、独自のプロトタイプを構築することをおすすめします。

リファレンスデモ: https://deephand.github.io/webauthn-immediate-demo/ でリファレンス実装を試すことができます。
- プロトタイプを実装する: サイトにプロトタイプを実装する際は、ユーザーがクリックした後（[ログイン] ボタンや、ユーザーのログインが必要な操作など）に mediation: 'immediate' を使用して navigator.credentials.get() 呼び出しを行うようにしてください。
フロー 1: パスワードまたはパスキーなしでログインする: サイトで使用できるパスキーやパスワードがない場合、[ログイン] をクリックすると、ブラウザの UI が表示されることなく、標準のログインページに直接移動します。
フロー 2: すぐに利用可能なローカルパスキーでログインする: サイトに保存されているパスキーがある場合、[ログイン] をクリックすると、即時メディエーション UI がトリガーされ、パスキーを選択できるようになります。
フロー 3: ローカルパスキーまたはパスワードでログインする: パスキーとパスワードの両方が保存されている場合は、（コードで password: true を設定して）[パスワードをリクエスト] オプションを有効にします。[ログイン] をクリックすると、Immediate Mediation UI にパスキーとパスワードの両方のオプションが表示されます。

オリジン トライアル: スムーズなログインのための WebAuthn の即時メディエーション コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

背景

仕組み

immediate メディエーション タイプ