パスキーの WebAuthn 機能検出の簡素化

getClientCapabilities() を使用して WebAuthn 機能を検出し、ユーザーに合わせて認証ワークフローを調整する方法を確認する。

公開日: 2025 年 1 月 22 日

認証ワークフローをユーザーのブラウザとデバイスにシームレスに適応させるにはどうすればよいですか?

Chrome 133 以降では、getClientCapabilities() WebAuthn API を使用して、ブラウザでサポートされている認証機能を特定できます。PublicKeyCredential.getClientCapabilities() を呼び出すと、サポートされている機能のリストを取得し、それに応じて認証ワークフローを調整できます。

この機能強化により、デベロッパーはユーザーの環境に合わせて、より堅牢でユーザー フレンドリーな認証フローを作成できるようになります。

実装方法は次のとおりです。

if (window.PublicKeyCredential &&
    PublicKeyCredential.getClientCapabilities) {
  const capabilities = await PublicKeyCredential.getClientCapabilities();
  if (capabilities.conditionalGet === true &&
      capabilities.passkeyPlatformAuthenticator === true) {
    // The browser supports passkeys and conditional mediation.
  }
}

この方法では、パスキー、条件付きメディエーション(ダイアログでのパスキー自動入力)、ハイブリッド トランスポート(Bluetooth を使用したクロスデバイス認証)、拡張機能など、サポートされている機能を特定することで、ユーザーの認証エクスペリエンスをカスタマイズできます。

特徴検出が重要である理由

クライアントの機能を理解することで、次のようなことができます。

  • 実装をクライアントのサポートされている機能に合わせて調整することで、スムーズなユーザー エクスペリエンスを実現し、認証の信頼性を高めることができます。
  • サポートされていない WebAuthn 機能によって発生するエラーを減らす。

getClientCapabilites() を使用すると、さまざまなデバイスやブラウザで動作する認証エクスペリエンスを確実に作成できます。

探索を始める

すぐに実装したい場合は、getClientCapabilities() を使用した簡単な WebAuthn 機能検出で、機能の完全なリスト、詳細な手順、ベスト プラクティスを確認してください。

パスキーとパスワードなしのログインについて詳しくは、パスキーの Chrome ページをご覧ください。