WebAuthn パスキーの自動入力を使用したフォームへのパスワードレス ログイン

WebAuthn 条件付き UI は、ブラウザのフォーム自動入力機能を活用して、従来のパスワードベースのフローでユーザーがパスキーでシームレスにログインできるようにします。

Chrome 108 では、自動入力候補など、パスキーがサポートされています。これにより、サイトはより安全で簡単なログイン エクスペリエンスを構築できます。

パスキーとは

パスキーは、ユーザー アカウントとウェブサイトまたはアプリに関連付けられたデジタル認証情報です。パスキーはパスワードよりも安全です。パスキーを使用すると、ユーザーは生体認証センサー(指紋や顔認識など)、PIN、パターンのいずれかでアプリとウェブサイトにログインできるため、パスワードを覚えておく必要も管理する必要もありません。WebAuthn 認証情報であるため、次のセキュリティ機能が含まれています。

  • パスキーは公開鍵暗号を使用しているため、サイトはパスワードやシークレットを保存する必要がありません。
  • パスキーは作成したウェブサイトまたはアプリでのみ使用できるため、ユーザーがフィッシングの被害に遭うことはありません。

ウェブサイトは、ブラウザのモーダル UI を介して、デバイスとセキュリティ キーで WebAuthn 認証情報を作成して使用できます。そのため、ウェブサイトはログインフローを再設計し、ユーザーが別のボタンを使用して WebAuthn フローを選択できるようにする必要がありました。パスキーで自動入力を有効にできるようにすることで、ウェブサイトはパスワード ユーザーとパスキー ユーザーの両方に同じエクスペリエンスを提供できるようになりました。

条件付き UI

モーダル UI をトリガーせずにウェブサイトが WebAuthn リクエストを実行できるようにすることを「条件付きメディエーション」といいます。この自動入力の統合は、条件付き UI とも呼ばれます。

条件付き UI でログインするユーザー

仕組み

ユーザーがユーザー名入力フィールドをタップすると、保存されているパスキーとパスワードの自動入力候補が表示された自動入力候補ダイアログがポップアップ表示されます。ユーザーはアカウントを選択し、デバイスの画面ロックを使用してログインできます。これにより、ユーザーは何も変更されていないかのように既存のパスワード フォームを使用してウェブサイトにログインできますが、パスキーの追加のセキュリティ上のメリットがあります。

条件付き UI の使用方法

WebAuthn の条件付き UI を使用するには、パスワードなしでログインするためのパスキーを作成するフォームの自動入力でパスキーを使用してログインするをご覧ください。

写真: Scott GrahamUnsplash