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

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

Clock Icon2020.02.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

最近 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のリクエストパラメーターを指定してレスポンスをパースして表示するページを作りました

クラスメソッド の事業開発部ではソフトウェアエンジニアを募集しています

現在私は事業開発部で prismatix というサービスの開発に携わっています。 そして、事業開発部ではソフトウェアエンジニアを募集しています。

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

私からは以上です。

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.