はじめに

WebAuthnの勉強をしたいなーと思ったのだが、まずはどういう動作になるのかというのを確認したいので、デモサイトを試してみる。

上記サイトに多くの素晴らしいデモサイトがまとめてあるので、その中でもPHPのデモをローカルに構築して試してみる。

環境

1
2
3

MacOS Sonoma 14.4.1
Docker version 25.0.3, build 4debf41
Docker Compose version v2.24.6-desktop.1

動作の確認

まずは、以下の2サイトでどのような動作をするかを確かめてみた。

仕組み

下記のサイトを読んで理解する。

ローカルでデモを動かす

ローカルでWebauthnのデモを動かす時に、下記のデモが良さそうだったのでこれを使う。
https://github.com/web-auth/symfony-webauthn-demo

構築

  1. Gitクローンでプロジェクトをクローンする
1

git clone [email protected]:web-auth/symfony-demo.git

1
2
3
4
5
6
7

Cloning into 'symfony-demo'...
remote: Enumerating objects: 3763, done.
remote: Counting objects: 100% (790/790), done.
remote: Compressing objects: 100% (307/307), done.
remote: Total 3763 (delta 588), reused 629 (delta 453), pack-reused 2973
Receiving objects: 100% (3763/3763), 42.92 MiB | 9.61 MiB/s, done.
Resolving deltas: 100% (2386/2386), done.
  1. symfony-demoディレクトリに移動する
1

cd symfony-demo
  1. ビルドをする
1

make build
  1. コンテナ立ち上げ
1

make up
  1. プロセスチェック
1

docker compose ps

でプロセスのチェックをしてみると以下のようになっていた。

1
2
3
4
5

docker compose ps
NAME                      IMAGE                    COMMAND                   SERVICE    CREATED         STATUS                          PORTS
symfony-demo-database-1   postgres:15-alpine       "docker-entrypoint.s…"   database   4 minutes ago   Up 4 minutes                    0.0.0.0:64396->5432/tc
p                                                                                                                                                            symfony-demo-mailer-1     schickling/mailcatcher   "sh -c 'mailcatcher …"   mailer     4 minutes ago   Up 4 minutes                    0.0.0.0:64397->1025/tc
p, 0.0.0.0:64398->1080/tcp                                                                                                                                   symfony-demo-php-1        app-php                  "docker-entrypoint f…"   php        4 minutes ago   Restarting (2) 57 seconds ago

PHPが再起動を続けているので、logsで確認してみる。

1

make logs

すると下記のエラーが出ている。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

Verifying lock file contents can be installed on current platform.
php-1       | Your lock file does not contain a compatible set of packages. Please run composer update.
php-1       | 
php-1       |   Problem 1
php-1       |     - lcobucci/clock is locked to version 3.1.0 and an update of this package was not requested.
php-1       |     - lcobucci/clock 3.1.0 requires php ~8.2.0 -> your php version (8.3.6) does not satisfy that requirement.
php-1       |   Problem 2
php-1       |     - lcobucci/clock 3.1.0 requires php ~8.2.0 -> your php version (8.3.6) does not satisfy that requirement.
php-1       |     - web-auth/metadata-service 4.7.7 requires lcobucci/clock ^2.2|^3.0 -> satisfiable by lcobucci/clock[3.1.0].
php-1       |     - web-auth/metadata-service is locked to version 4.7.7 and an update of this package was not requested.

PHP8.3だと新しすぎるようなので、DockerfileをいじってPHP8.2にする。

  1. Dockerfileの修正
1
2
3
4

# Versions
-FROM dunglas/frankenphp:latest-alpine AS frankenphp_upstream
+FROM dunglas/frankenphp:latest-php8.2.18-alpine AS frankenphp_upstream
FROM composer/composer:2-bin AS composer_upstream
  1. 再度ビルドする。
1

make build
  1. コンテナ終了&立ち上げ
1
2

make down
make up

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

[+] Running 4/4
 ✔ Container symfony-demo-database-1  Removed                              0.2s 
 ✔ Container symfony-demo-php-1       Re...                                0.0s 
 ✔ Container symfony-demo-mailer-1    Removed                              0.2s 
 ✔ Network symfony-demo_default       Re...                                0.1s 
[+] Running 3/4
 ⠇ Network symfony-demo_default       Cr...                                0.8s 
 ✔ Container symfony-demo-mailer-1    Started                              0.6s 
 ✔ Container symfony-demo-database-1  Started                              0.7s 
 ✔ Container symfony-demo-php-1       St...                                0.7s

1

docker compose ps

1
2
3
4
5

~/workspace/symfony-demo$docker compose ps
NAME                      IMAGE                    COMMAND                   SERVICE    CREATED          STATUS                             PORTS
symfony-demo-database-1   postgres:15-alpine       "docker-entrypoint.s…"   database   26 seconds ago   Up 25 seconds                      0.0.0.0:64876->5432/tcp
symfony-demo-mailer-1     schickling/mailcatcher   "sh -c 'mailcatcher …"   mailer     26 seconds ago   Up 25 seconds                      0.0.0.0:64874->1025/tcp, 0.0.0.0:64875->1080/tcp
symfony-demo-php-1        app-php                  "docker-entrypoint f…"   php        26 seconds ago   Up 25 seconds (health: starting)   0.0.0.0:80->80/tcp, 0.0.0.0:443->443/tcp, 0.0.0.0:443->443/udp, 2019/tcp
  1. make init実行
1

make init

1
2
3
4

~/workspace/symfony-demo$make init
Database "app" for connection named default already exists. Skipped.

 [OK] Already at the latest version ("DoctrineMigrations\Version20230619191051")
  1. フロントエンドの構築
1

make frontend

デモサイトへのアクセス

https://localhost

webauthn-demo-01

アクセスできたので試してみる。

  1. 右上のLoginからログインページへ移動する。
  2. Register nowを 選択する。
webauthn-demo-02
  1. Registration formでUsernameとDisplaynameを適当に入力し、Registerを選択する。
webauthn-demo-03
  1. 「パスキーを作成する」のポップアップが出てくる。
webauthn-demo-04
  1. iCloudキーチェーンで作成する。

TouchID搭載の端末なので、指紋認証でキーチェーンを作成した。

  1. ログインできる。
webauthn-demo-05

再度ログインできるか試す。

  1. ログアウトし、右上のLoginを選択する。
webauthn-demo-06
  1. 指紋認証でログインする
webauthn-demo-07

ここまででWebauthnのデモを試した。

参考サイト

参考動画

  • 【#38 ネスペ直前対策】FIDO

  • #15【サクッと学べる支援士対策】FIDO認証

おわりに

自分のサイトにも組み込めるようにさらに勉強していきたい。