Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
DenoとHonoでWebAuthnを使ったログインを実装する
Search
ayame113
February 15, 2024
Programming
1
1.4k
DenoとHonoでWebAuthnを使ったログインを実装する
toranoana.deno #15 の発表資料です
https://yumenosora.connpass.com/event/307235/
ayame113
February 15, 2024
Tweet
Share
More Decks by ayame113
See All by ayame113
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
ayame113
5
1.5k
Other Decks in Programming
See All in Programming
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
1.9k
Deep Dive into Kotlin Flow
jmatsu
1
360
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.8k
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
🔨 小さなビルドシステムを作る
momeemt
4
690
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
420
rage against annotate_predecessor
junk0612
0
170
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
160
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
560
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Docker and Python
trallard
46
3.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How to Ace a Technical Interview
jacobian
279
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Transcript
DenoとHonoでWebAuthnを 使ったログインを実装する ayame113 (2024/2/14)
自己紹介 • ayame113 ◦ https://github.com/ayame113 ◦ https://twitter.com/_ayame113_ ◦ • 学生です(大学院生)
• ふだんは研究の一環として、奈良の大学院のカーシェアサービスを作ってい る ◦ 乗り捨て OK、気軽にカーシェア 奈良先端大の実証実験(朝日新聞) ◦ Denoで作ってます https://naismon.deno.dev ◦ ここでWeb Authnを使いたかったので、DenoとWeb Authnを組み合わせられるか試してみた
つくったもの:2文字チャット • 2文字しか入力できないチャット • https://pass-key-memo.deno.dev/
使った技術 • https://pass-key-memo.deno.dev/ • Deno • デプロイ先 - deno deploy
• フロントエンドフレームワーク - 🍋Fresh • バックエンドフレームワーク - 🔥Hono (RPCモード) • WebAuthn用のJSライブラリ - SimpleWebAuthn • 認証ライブラリ - Firebase Authentication • データベース - Deno KV • tailwind
パスキーによるログイン • パスキーを使ってログインする仕組みを採用 • デバイスの生体認証を使える (ユーザーがパスワードを覚えておく必要が無い) • ログインの際にユーザー名とパスワードを入力する必 要なし •
iOS, Android, Windows等が対応 • 秘密鍵による署名を使ったログイン方式
パスキーによるログイン 認証器 (ユーザーのデバイス) ブラウザ サーバー ①ランダム文字列(challenge) ※サーバー側で生成して認証器に渡す ②ランダム文字列(challenge)に秘密鍵で署名したもの ※認証器で署名してサーバーに渡す 署名が公開鍵で検証出来たら
ログイン成功!
パスキーによるログイン • サーバー側で保存する必要がある情報 ◦ ユーザーID ◦ 認証器ID ◦ 認証器の公開鍵 ↓こういうDBが必要
認証器ID 認証器に紐づいた公開鍵 xxxxx Uint8Array [0, 12, 71, …] yyyyy Uint8Array [36, 41, 53, …] zzzzz Uint8Array [97, 11, 25, …] …
開発でよかったところ • FreshとHonoの相性がいい ◦ どちらもWeb標準APIベース ◦ Freshのハンドラー:Requestオブジェクトを受け取ってResponseオブジェクトを返す関数 ◦ Honoのハンドラー:Requestオブジェクトを受け取ってResponseオブジェクトを返す関数 ◦
→そのまま渡せる!! // routes/api/[...path].ts const app = new Hono() .basePath("/api") .get("/hello", (c) => c.text("hello")); export const handler: Handler = app.fetch;
よかったところ • HonoのRPCモードが便利 ◦ HonoのRPCモード=バックエンド側のAPIエンドポイントを、フロント側からメソッド呼び出 しのように呼び出せる機能 ◦ SimpleWebAuthn(Web Authn用のライブラリ)の型定義が複雑だった ◦
フロントエンドとバックエンドの間で、複雑な形式のオブジェクトを受け渡しする必要があ る ◦ HonoのRPCモードを使うと、型定義がフロントエンドとバックエンドの間で共用できるので、 安全にフロントエンドとバックエンドの間でオブジェクトの受け渡しができる • Deno KV ◦ Web Authnで扱う必要があるUint8Arrayなどのデータをそのまま保存できて便利だった
開発でつまづいたところ • WebAuthnのログイン方法は(だいたい)3種類ある ◦ 2段階認証の2段階目としてWeb Authnを使うパターン ▪ GitHubとか ◦ ユーザー名
+ Web Authn でログインするパターン(Web Authnはパスワード代わり) ◦ Web Authnだけでログインするパターン(Discoverable Credential) ▪ ログイン時にユーザー名を入力する必要が無いので手軽 ▪ 今回はこの方式を採用 qiitaなどのWebAuthnの紹介記事でも、使われている方式は様々 →どの記事を参照して実装すればいいのか迷った
開発でつまずいたところ • WebAuthnが担当するのはログイン処理まで ◦ →ログインした後の認証のしくみは、cookieやJWTを使って自分で実装する必要がある ◦ 今回は、ログインが成功したらFirebase Authenticationのカスタムトークンを発行し、 ログイン後のトークンの管理はFirebaseのライブラリに任せた •
DenoでFirebase AuthenticationのJWT検証部分が動かなかった ◦ Node.jsのポリフィルが不完全なのが原因ぽい ◦ 別のjwt検証ライブラリ(jose)を使って回避した
まとめ • HonoとFresh便利 • WebAuthn単体のログインの実装はライブラリを使えばそれほど難しくない • 本番運用する際は、WebAuthn以外のログイン方法を組み合わせる必要がある かもしれない ◦ Windowsでログインした後、同じアカウントを使ってAndroidでログインする方法は?
◦ ユーザーがデバイスを紛失した場合は? →感想:他のログイン方法と組み合わせると実装難易度が上がりそう