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
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
アセットのコンパイルについて
ojun9
0
130
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
260
Reading Rails 1.0 Source Code
okuramasafumi
0
250
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
400
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
rage against annotate_predecessor
junk0612
0
170
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
AI時代のUIはどこへ行く?
yusukebe
18
9k
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
74
5k
A Tale of Four Properties
chriscoyier
160
23k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Speed Design
sergeychernyshev
32
1.1k
Making Projects Easy
brettharned
117
6.4k
Side Projects
sachag
455
43k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
4 Signs Your Business is Dying
shpigford
184
22k
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でログインする方法は?
◦ ユーザーがデバイスを紛失した場合は? →感想:他のログイン方法と組み合わせると実装難易度が上がりそう