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
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
150
速いWebフレームワークを作る
yusukebe
5
1.7k
Rancher と Terraform
fufuhu
2
400
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
270
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
260
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
300
RDoc meets YARD
okuramasafumi
4
170
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
360
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.2k
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
100
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Thoughts on Productivity
jonyablonski
70
4.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The World Runs on Bad Software
bkeepers
PRO
70
11k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Bash Introduction
62gerente
615
210k
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でログインする方法は?
◦ ユーザーがデバイスを紛失した場合は? →感想:他のログイン方法と組み合わせると実装難易度が上がりそう