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
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Reading Rails 1.0 Source Code
okuramasafumi
0
250
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
510
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
440
私の後悔をAWS DMSで解決した話
hiramax
4
210
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
560
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
550
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Featured
See All Featured
Balancing Empowerment & Direction
lara
3
620
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Done Done
chrislema
185
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
How GitHub (no longer) Works
holman
315
140k
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でログインする方法は?
◦ ユーザーがデバイスを紛失した場合は? →感想:他のログイン方法と組み合わせると実装難易度が上がりそう