パスキーのデモサイトをまとめてみた

## はじめに
この記事は、[NTTテクノクロス Advent Calendar 2024](https://qiita.com/advent-calendar/2024/ntt-tx)（シリーズ 2） 9日目の記事です。

こんにちは。NTTテクノクロスの安達です。
社内では認証関連のプロダクトの戦略担当をしていたり、部署では勉強会を主催したり、社内ICT部門でSaaSの導入を担当していたり、色々とやっています。

さて、「**パスキー**」についてご存知でしょうか。
パスキーとは、**パスワードに代わる簡単かつ安全な最新の認証方式**で、最近では任天堂やドコモ、ソニー、メルカリなど数多くのWebサイト/Webサービスで採用されています。

パスキー認証は、利用者のデバイスに保存される秘密鍵（本人だけが知っている情報）と、サービス側に保存される公開鍵（誰でもアクセスできる情報）のペアを「パスキー」として使用し、顔認証や指紋認証などの画面ロック解除と同じ操作で簡単にログインでき、フィッシング攻撃に強いという特徴があります。

パスキーの詳細については別のブログでも解説していますので、ぜひこちらもご覧ください。

https://www.trustbind.jp/column/passkeys-20240314.html

そんなパスキーですが、パスワードの代わりと言われてもいまいち動きが分からない方や、パスキーについて勉強したい人、パスキーを実装したい開発者向けのデモサイトがWeb上で多く公開されています。

**本記事ではそのデモサイトの一部について、独断と偏見で「初心者向け」と「開発者向け」に分けて紹介していきます。**
（本記事は2024年12月時点の内容となっています）

## [初心者向け] パスキーの動きをサクッと体験したい
### 1. Passkeys.io

https://www.passkeys.io/

HANKO というオープンソースの認証システムによる公式のデモサイトです。
メールアドレスを使ってのユーザー登録が必要ですが、パスキーの登録とパスキーでの認証を簡単に体験することができます。
また、基本操作に加えてパスキーの追加や削除といった操作も本デモサイトで可能です。
### 2. Passkeys Demo

https://passkeys-demo.appspot.com/

Google で公開されているパスキーのデモサイトです。
ユーザー登録不要かつ登録時に必要なパスワードはダミーのものになりますが、パスキーについてはクロスデバイスも含めてしっかりと体験できます。
また、ソースコードも Github で公開されています。
ただし、過去に誰かが利用したであろうユーザー名を使うと自分で登録していないパスキーが表示されてしまうことがあります。
このデモサイトでも基本操作に加えてパスキーの追加や削除といった操作が可能となっています。

### 3. Passage Passkey Demo

https://passage.1password.com/demo

Passage というパスワードレス認証を実現するソリューションを提供している 1Password（パスワード管理ソフトの企業）が運営するデモサイトです。
メールアドレスもしくは電話番号での登録が必要で、デモサイトで体験できることも登録と認証のみとかなり限定的です。

### 4. Descope Passkeys Demo

https://passkeys.guru/

Descope というCIAMプラットフォームを提供している企業が運営しているパスキーのデモサイトです。
メールアドレスでの登録が必要かつ、体験できるデモはパスキーの登録とパスキーでの認証のみと非常に簡素なものとなっています。

### 5. Passkey.org

https://passkey.org/

YubiKey というセキュリティキーを開発・販売している Yubico が運営しているパスキーのデモサイトです。
任意のユーザー名で一時的にユーザーを作成する必要がありますが、メールアドレス等の登録は不要です。
パスキーを使ってのユーザー登録と認証を体験することができ、認証後のページでは登録したパスキーの一覧を確認することができます。
ただし、デモで体験できることは登録、認証、パスキーの追加と限定的になります。

## [開発者向け] 開発のためにパスキーについて学びたい
### 1. Webauthn.io

https://webauthn.io/

Duo Security という多要素認証やシングルサインオンのソリューションによる公式のデモサイトです。
このデモサイトでは「Advanced Settings」ボタンからパスキー（WebAuthn）の設定を変更することで、デモで体験する際の動作を変えることができます。
設定を変更することにより様々な条件でパスキー認証の動作を確認することができます。
また、サイト内でパスキー（WebAuthn）を自分のサイトに追加するためのライブラリやローカルでデモするためのgithubへのリンクも公開されていて、パスキーの実装に役立つ情報が多く掲載されています。

### 2. Passkeys Playground

https://learnpasskeys.io/ja/demo

Auth0 というクラウド型の認証プラットフォームを提供している Okta が運営しているパスキーの動作を体験できるデモサイトです。
数少ない日本語に対応しているパスキーのデモサイトで、解説も豊富です。
このデモサイトの特徴として、実際のリクエストやレスポンスの内容が確認できるようになっています。
また、デモの体験以外にもパスキーに関するコンテンツが多くあり、日本人の開発者がパスキーについて学ぶには有用なサイトです。
ただし一方で１ステップずつ確認しながら進む手順になっているので、手軽にパスキーの動作を確認したいといった用途には不向きかもしれません。

### 3. PKaaSデモ

https://idp-demo.yahoo-net.jp/

LINEヤフーが運営しているパスキー認証（FIDO認証）に関するデモサイトです。
LINEヤフーが構想しているプロダクトである「PKaaS」を試験的に公開するためのデモサイトになっています。
「やさしい大学の新入生」という仮想シナリオに沿ってパスキー認証（FIDO認証）の登録と認証を体験することができます。
開発者向けのデモとしては簡易なものとなっていますが、今どこのサーバーで処理を行っているのかが一目でわかるような工夫があったり、解説が豊富だったりします。
もちろんですが、このデモサイトも日本語に対応しています。

## おわりに
**パスキーの体験ができるデモサイトについてまとめてみました。**

パスキーはとても新しい技術なので、今後も同じようなデモサイトは増えていくでしょう。また、今回紹介したデモサイトもアップデートされるかもしれません。
パスキーの動作や仕様で確認したいことがあれば、本記事を思い出していただき、目的に合ったデモサイトを使ってみましょう。

引き続き、[NTTテクノクロス Advent Calendar 2024](https://qiita.com/advent-calendar/2024/ntt-tx) をお楽しみください！

---
※本記事に掲載されている商品またはサービスなどの名称は、各社の商標または登録商標です。