学習用にWebAuthnのAPIを叩いたりレスポンスを眺めるためのページを作った

最近 WebAuthn の仕様を眺めているのですが、いまいち理解できないときは実際に API を叩いて挙動を確認していました。 API を叩くだけならこちらのページのサンプルを叩くだけで叩けるのですが、レスポンスについては attestationObject が CBOR でエンコードされてたり、Authenticator Data はパースしないとなんだかわからなかったりして割と確認がめんどくさいところがあります。

なのでパラメータを指定してAPIを叩くとレスポンスをパースして表示するページを作りました。

WebAuthn Viewer

利用イメージ

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.

の挙動が実際どうなるのか気になった時とかに使うことを想定しています。

ちなみに普段使いの認証器でいろいろ試すとこうなってしまいます。

pic.twitter.com/MCxLsFL9o1

— 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 というサービスの開発に携わっています。 そして、事業開発部ではソフトウェアエンジニアを募集しています。

もし興味のある方がいましたら、こちらのページを見ていただけますと幸いです。

私からは以上です。