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

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

Chrome 108 では、自動入力の候補を含むパスキーがサポートされています。これにより を使用して、簡単かつ安全なログイン方法を構築できます。

パスキーとは

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

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

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

条件付き UI

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

<ph type="x-smartling-placeholder">
</ph>
従来の UI でログインするユーザー

仕組み

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

条件付き UI の使用方法

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

写真撮影: Scott GrahamUnsplash より)