Drupal でパスキーを使えるようにする、 WebAuthn (Passkey) モジュールの動作確認を行います。
環境
- WSL2
- DDEV
- Drupal 11
インストール
https://www.drupal.org/project/wa をモジュールとしてインストールし、有効化しておきます。
RC 版しかなく、単に composer require drupal/wa とするとインストールできないため留意。
composer require 'drupal/wa:@RC'
drush en wa
事前準備
「Configuration > Passkey settings」から、以下の3つを設定します。
1. Enable Passkey Login
デフォルトでは無効になっています。チェックを入れて有効化します。
2. Allowed Roles
パスキーを利用できるロールを選択します。デフォルトでは空（誰も使えない状態）です。
3. Allowed authenticators
許可する認証器を指定します。
デフォルト空なので、これをしておかないと登録で下記のようなエラーが出ます。
Error registering passkey: This authenticator is not allowed for passkey login. (Ticket ID: WA-697c74a3a0479)
メール送信設定について
パスキー登録時に通知メールが送信されます。ローカル開発環境ではメール送信の設定が必要です。
DDEV を使っている場合は Mailpit が組み込みで使えますが、 drupal/symfony_mailer を追加でインストールする必要があります。
composer require drupal/symfony_mailer
drush en symfony_mailer
これにより、 settings.ddev.php に記述された Mailpit 向けの設定が有効になります。
また、パスキーを登録するユーザーにメールアドレスが設定されていないと、メール送信でエラーが発生します。テスト用ユーザーにもメールアドレスを設定しておきましょう。
一般ユーザでの設定
「test_user」という ID のユーザを作成し、パスキーを使ってログインする動作を確認します。
パスキー登録まで
「Add New Passkey」をクリックすると、パスキーを作成するウィンドウが開かれる。
なお、ブラウザに Bitwarden を入れているので、まずは Bitwarden でパスキーの作成が促される。
「Use your devece or hardware key」を選ぶと、「Microsoft Password Manager (Edge Browser のパスワードマネージャ)」が起動し、パスキーの作成を促される。
「Save another way」をクリックすると、 Windows Security でパスキーを作成することを促される。
「これは Windows デバイスに保存されます」の横の「変更」を押すと、保存先をスマートフォン等に指定できる。スマートフォンを指定した場合は QR コードが表示され、これを読み込むことによってスマートフォンでのパスキー作成を行うことができる。
今回は、スマートフォン側でパスキーを作ってみる。
QR を読み込むと、 PC 側での表示も変わる。今回は iphone 標準の「Password」アプリで登録。
成功のメッセージ。
パスキーが登録されたことが確認できた。
なお、パスキー登録時にはメールが送信される。 DDEV の Mailpit で確認ができる。
ログイン
ログインメニューにオプションとして表示されている、「Sign in with Passkey」をクリック。登録時同様に、 QR コードが表示されるので、それを読み込んでログイン。
iphone 側で、先ほど作成した鍵を選択するとログインできることが確認できた。
終わりに
「です・ます」調と「だ・である」調が混ざっていますが、ご容赦ください。
基本的な「登録・ログイン」の流れを確認できました。