ログインの即時 UI モード

Eiji Kitamura
José Luis Zapata

公開日: 2026 年 5 月 12 日

ログインの即時 UI モードは、ログインフローを効率化するために設計されたウェブ機能です。この機能を使用すると、ユーザーが [ログイン] ボタンや [購入手続き] ボタンをクリックするなど、ログインのタイミングに達したときに、パスキーと管理対象パスワードをユーザーに直接提案できます。

概要

即時 UI モードは、認証情報がローカルで利用できない場合にすぐに失敗するモードを提供します。この動作は、Android や iOS などのモバイル プラットフォームにある preferImmediatelyAvailableCredentials API を反映したものです。認証情報が存在する場合、ブラウザはユーザーにすぐにログイン ダイアログを表示します。それ以外の場合は、Promise をサイレントに拒否し、ユーザー エクスペリエンスを損なうことなく、ログイン フォームなどの代替ログイン方法を提供できるようにします。

2026 年 5 月の時点で、即時 UI モードをサポートしているブラウザは Chrome のみです。

前提条件の確認

即時 UI モードを使用するには、ユーザーがデバイスのローカルで利用可能な対象の認証情報をすでに持っている必要があります。Chrome では、これらの認証情報には次のものが含まれます。

  • Google パスワード マネージャー、Windows Hello、iCloud キーチェーンなどのパスキー プロバイダに保存されているパスキー。
  • Google パスワード マネージャーに保存されているパスワード。

ローカル認証情報が存在しない場合、API は即時ログイン ダイアログを表示せずにリクエストを拒否します。

検出機能のサポート

即時 UI モードを呼び出す前に、PublicKeyCredential.getClientCapabilities() メソッドを使用して、ブラウザが immediateGet 機能をサポートしているかどうかを確認します。サポートされていない場合は、メールアドレスとパスワードのフォーム、電話番号の確認、ソーシャル ログインなど、既存のログイン方法にフォールバックします。

async function checkImmediateAvailability() {
  try {
    const capabilities = await PublicKeyCredential.getClientCapabilities();
    if (capabilities.immediateGet) {
      console.log("Immediate UI mode is supported.");
    } else {
      console.log("Immediate UI mode is NOT supported.");
    }
  } catch (error) {
    console.error("Error checking client capabilities:", error);
  }
}

より広範なブラウザをサポートするには、WebAuthn Polyfills GitHub リポジトリで入手可能なポリフィルを使用します。

認証情報をリクエストする

即時ログイン フローをトリガーするには、uiMode フィールドを 'immediate' に設定して navigator.credentials.get() を呼び出します。

リクエストに password: true を含めることで、ブラウザがパスワード認証情報をサポートしている場合、ユーザーはこのメリットを享受できます。

// This call must follow a user gesture, like a button click
button.addEventListener('click', async (event) => {
  event.preventDefault();
  try {
    const cred = await navigator.credentials.get({
      password: true,
      publicKey: {
        challenge: serverGeneratedChallenge,
        rpId: 'example.com'
      },
      uiMode: 'immediate',
    });
    // Handle successful sign-in
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      // Provide a fallback sign-in experience
      showFallbackUI();
    }
  }
});

フォールバックのログイン エクスペリエンスを提供するには、catch ブロックで NotAllowedError を処理する必要があります。

ログインフローを処理する

即時 UI モードは、主に 2 つのシナリオで実装できます。

ボタンでログインする

予期しないプロンプトが表示されない、すっきりとしたエクスペリエンスを提供する専用のログインボタンを用意します。

  1. ユーザーが [ログイン] ボタンをクリックします。
  2. サイトが uiMode: "immediate" を使用して navigator.credentials.get() を呼び出します。
  3. ブラウザはローカル認証情報を確認します。
  4. ブラウザが認証情報を見つけると、ユーザーがアカウントを選択するための即時ログイン ダイアログが表示されます。
  5. ブラウザで認証情報が見つからない場合や、ユーザーが即時ログイン ダイアログを閉じた場合は、NotAllowedError がスローされます。
  6. NotAllowedError がスローされると、サイトは標準のログインページに進みます。

購入手続き前にログインする

ユーザーがオンライン ショップで購入手続きフローを開始するなど、認証によってメリットが得られるアクションを実行する前に、認証情報を事前に提供します。

e コマースでは、ゲストユーザーは既存のアカウントにログインするか、ゲストとして購入するかを選択することがよくあります。ログイン ダイアログをすぐに表示することで、リピーターの購入手続きを効率化できます。

  1. ユーザーが、ショッピング フローで [購入手続き] ボタンをクリックするなど、アクションを開始します。
  2. サイトが uiMode: "immediate" を使用して navigator.credentials.get() を呼び出します。
  3. 認証情報が存在する場合は、ユーザーが 1 つを選択してログインを完了します。
  4. 認証情報が存在しない場合、ブラウザはエラーをスローし、すぐにログイン ダイアログを表示しません。ユーザー エクスペリエンスは変更されず、ユーザーを既存の購入手続き画面に移動できます。この画面では、他のログイン オプションやログインせずに決済フォームが表示される場合があります。

プライバシーとセキュリティ対策を確認する

ブラウザには、ユーザーのプライバシーを保護するための重要な対策が実装されています。

  • ユーザー ジェスチャーの要件: サイレント プロービングを防ぐため、クリックなどのユーザー ジェスチャーで API 呼び出しを開始する必要があります。この呼び出しではアクティベーションは消費されません。
  • シークレット モードの制限: シークレット セッションまたはプライベート セッションのリクエストは常に NotAllowedError をスローします。
  • 許可リストなし: 空ではない allowCredentials リストを含むリクエストは、セッション間のトラッキングを防ぐために NotAllowedError をスローします。
  • プログラムによるキャンセルなし: signal パラメータを使用して、即時ログイン ダイアログをプログラムで閉じることができません。