ぬぬん!

やってみたこと,思ったこと

パスキー認証のチュートリアルをやったときメモ

久々の"ときメモ"です。
最近はscrapboxに乱雑に書き殴って、
自分が必要になった時に参照するくらいにしかしてないので.
たまにはブログに書こうの活動です。

WEB+DB Pressでパスキーの概念を知る

gihyo.jp

特集2 実戦投入パスキー いまこそ実現,パスワードレス認証!を読んで
日頃のwebアプリにたまに出てくる生体認証の仕組みを知った

それがパスキーと呼ばれる技術によるものと知ったので、もろもろ知ったことを自分の言葉でメモ書いておく

         指紋でピっと認証、パスキー認証っていうんだね
                認証気(デバイス)側に秘密鍵を保持しておいて、生体認証(FaceIDやTouchID)で秘密鍵を利用できる。認証画面でサービス側にある公開鍵と照らして認証OKにする。
                DB側に置いておくのは公開鍵。公開鍵だけではどうこうできないので生で保存しておけばおk
                「記憶させない、毎回違う、手入力しない」という点でセキュア
                保存は正規サイトのドメインごとに行う。偽サイトには使えない
                秘密鍵はキーチェーンに保存。認証時しか呼び出せない。iOS間で共有は可能
                パスキー is Discoverable Credential(ユーザ情報と設置で保存される鍵のこと)
                UX難しいねー
                    パスワード認証との共存は普通になし。2段認証にも使わない。使うなら単体。
                    パスワード認証と共存させるなら、IDの入力欄で選択したとにレコメンドで出てきてくれる感じのUI(ブラウザのオートフィル機能がやってくれる?)
                別デバイスで認証しようとした時の挙動
                    パスキーを持ってないデバイスで認証用とした時、QRコードを表示して、パスキー保存済みの認証機で読み込みー>ログイン
                    newデバイスでもパスキー作成のフローを表示させれると丁寧
            技術
                WebAuthAPIを使ってる
                その根幹のCredential Management APIがパスキーまわりのいろいろやる
                登録用API: PublicKeyCredential
                    https://developer.mozilla.org/ja/docs/Web/API/PublicKeyCredential
                    ドメインやユーザID、ドメイン名などを送ってパスキーを作る
                サーバに公開鍵を保存するリクエストをする
                    PublicKeyCredentialオブジェクトをそのままソイ
                    保存もそのまま

なんかこう覚える単語が多いな、と素直に思った.
あとtoC向けのサービスWEB屋するなら知っておかないといけない匂いがするなーと.
新規立ち上げ->サービス提供->価値提供しっかりできてきてユーザの利用安定してきたし、利用体験向上&セキュアがんばろっか!のフェーズで作らなきゃいけなくなる香りがした.

処理フローを理解する

なんか図で理解したいなーとおもったのでググったりしてて.
このQiitaの図が腹落ちしやすかった

qiita.com

チュートリアルをやってみる

本を読んだことで、
ブラウザが提供するWebAuthAPIというかPublicKeyCredentialで
公開鍵/秘密鍵を作ったりして、
バイスに保存されたパスキーをよびだしたり.

サーバ側に公開鍵保存してーって言って あとは秘密鍵と照らし合わせて検証したり

なんかゴニョゴニョやっていることはわかった

とりあえず手を動かさんことには.
なんかイメージつかないということで.
チュートリアルをやってみる

developers.google.com

これ

クライアント側(ブラウザ)がやること

  • パスキー生成
  • サーバ側に公開鍵渡し
  • 生体認証要求(デバイスとのやりとり)
  • クレデンシャルIDのローカル保存
  • パスキー生成/認証リクエスト時の前にオプション情報を取るリクエストする

な感じ

ブラウザによってパスキー認証できなかったりするから
その認証の表示切り替えとかも担当

サーバ側の実装については解説がなかった

あらかじめサーバサイドは用意があって解説はなし。
処理の流れくらいは参考になるけど、
実際利用するライブラリのサンプルコード見た方が良さ

大まか. パスキー実装するにあたってのサーバ側でやっていることは

  • アカウントの登録
  • パスキー作成時に必要になるオプション情報を返す
    • challenge/user.idなどなど
  • 公開鍵の保存
  • パスキー削除
  • 公開鍵と署名の検証

こんな感じだと思う

あとは実装はライブラリにのっかれば良さそう.
大体返す内容決まってそうだから、全力で乗っかりたい.
やるとしたら、どこまで自分で書かなきゃいけないんだろう怖い.

ライブラリ集はここ見てねとのこと: 

webauthn.io

github.com

あとHTTPでのやりとりだから.
base64encodeとdecodeがやり取り中で必要になるので忘れずにという感じ。

感想

初見の処理のフローのせいか、やることが多い〜〜〜という気持ちになる.
サーバ側もフロント側も実装するぞってなったらめちゃ重いな.
しかもWEB+DB Pressにもあったけど、パスワード認証との共存UIどうする問題重そうだし、別認証機での認証QRとかもやった方がいいし やることが多い〜〜〜〜(2回目.
よしななセットを求めてしまう. という気持ちです。

バックエンドをちゃんと作ってないのでとりあえず作りたい。