学習用にWebAuthnのAPIを叩いたりレスポンスを眺めるためのページを作った
最近 WebAuthn の仕様を眺めているのですが、いまいち理解できないときは実際に API を叩いて挙動を確認していました。 API を叩くだけならこちらのページのサンプルを叩くだけで叩けるのですが、レスポンスについては attestationObject が CBOR でエンコードされてたり、Authenticator Data はパースしないとなんだかわからなかったりして割と確認がめんどくさいところがあります。
なのでパラメータを指定してAPIを叩くとレスポンスをパースして表示するページを作りました。
利用イメージ
navigator.credentials.create() もしくは navigator.credentials.get() を選択してリクエストのパラメーターを入力します。
ボタンを押すとそれぞれの API が呼ばれます。
レスポンスはこんな感じで表示されます。
例えば WebAuthn の仕様の
If the timeout member of options is present, check if its value lies within a reasonable range as defined by the client and if not, correct it to the closest value lying within that range.
の挙動が実際どうなるのか気になった時とかに使うことを想定しています。
ちなみに普段使いの認証器でいろいろ試すとこうなってしまいます。
— inabajunmr (@inabajunmr) February 7, 2020
ページについて
Vue で書いて GitHub Pages で公開しています。
inabajunmr / webauthn-viewer | GitHub
値のパースについては以下の記事を大いに参考にさせていただきました。
WebAuthn/FIDO2: Verifying responses
特に attestationObject 周りはほとんどそのまま利用させていただいています。 まだ WebAuthn の仕様を読み終わってない & JavaScript がよくわからない状態でコードを書いてるので変な挙動があったら教えていただけますと幸いです。
参考資料
- WebAuthn/FIDO2: Verifying responses - Ackermann Yuriy - Medium
- Web Authentication: An API for accessing Public Key Credentials Level 1
- Web Authentication API - Web API | MDN
まとめ
- WebAuthnのリクエストパラメーターを指定してレスポンスをパースして表示するページを作りました
- WebAuthn Viewer
- 学習用です
クラスメソッド の事業開発部ではソフトウェアエンジニアを募集しています
現在私は事業開発部で prismatix というサービスの開発に携わっています。 そして、事業開発部ではソフトウェアエンジニアを募集しています。
もし興味のある方がいましたら、こちらのページを見ていただけますと幸いです。
私からは以上です。
