パスキー認証のチュートリアルをやったときメモ
久々の"ときメモ"です。
最近はscrapboxに乱雑に書き殴って、
自分が必要になった時に参照するくらいにしかしてないので.
たまにはブログに書こうの活動です。
WEB+DB Pressでパスキーの概念を知る
特集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の図が腹落ちしやすかった
チュートリアルをやってみる
本を読んだことで、
ブラウザが提供するWebAuthAPIというかPublicKeyCredentialで
公開鍵/秘密鍵を作ったりして、
デバイスに保存されたパスキーをよびだしたり.
サーバ側に公開鍵保存してーって言って あとは秘密鍵と照らし合わせて検証したり
なんかゴニョゴニョやっていることはわかった
とりあえず手を動かさんことには.
なんかイメージつかないということで.
チュートリアルをやってみる
これ
クライアント側(ブラウザ)がやること
な感じ
ブラウザによってパスキー認証できなかったりするから
その認証の表示切り替えとかも担当
サーバ側の実装については解説がなかった
あらかじめサーバサイドは用意があって解説はなし。
処理の流れくらいは参考になるけど、
実際利用するライブラリのサンプルコード見た方が良さ
大まか. パスキー実装するにあたってのサーバ側でやっていることは
- アカウントの登録
- パスキー作成時に必要になるオプション情報を返す
- challenge/user.idなどなど
- 公開鍵の保存
- パスキー削除
- 公開鍵と署名の検証
こんな感じだと思う
あとは実装はライブラリにのっかれば良さそう.
大体返す内容決まってそうだから、全力で乗っかりたい.
やるとしたら、どこまで自分で書かなきゃいけないんだろう怖い.
ライブラリ集はここ見てねとのこと:
あとHTTPでのやりとりだから.
base64encodeとdecodeがやり取り中で必要になるので忘れずにという感じ。
感想
初見の処理のフローのせいか、やることが多い〜〜〜という気持ちになる.
サーバ側もフロント側も実装するぞってなったらめちゃ重いな.
しかもWEB+DB Pressにもあったけど、パスワード認証との共存UIどうする問題重そうだし、別認証機での認証QRとかもやった方がいいし
やることが多い〜〜〜〜(2回目.
よしななセットを求めてしまう.
という気持ちです。
バックエンドをちゃんと作ってないのでとりあえず作りたい。