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.6k
Other Decks in Programming
See All in Programming
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
230
開発生産性を上げるための生成AI活用術
starfish719
3
1.5k
CSC305 Lecture 09
javiergs
PRO
0
300
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
110
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
120
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
CSC305 Lecture 08
javiergs
PRO
0
270
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
930
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
3
670
contribution to astral-sh/uv
shunsock
0
430
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
7k
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Producing Creativity
orderedlist
PRO
347
40k
Side Projects
sachag
455
43k
The Language of Interfaces
destraynor
162
25k
We Have a Design System, Now What?
morganepeng
53
7.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Site-Speed That Sticks
csswizardry
13
920
It's Worth the Effort
3n
187
28k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
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でログインする方法は?
◦ ユーザーがデバイスを紛失した場合は? →感想:他のログイン方法と組み合わせると実装難易度が上がりそう