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
20231109_WebAuthnを使ったパスワードレス認証をRailsアプリケーション...
Search
Yuma Ito
November 09, 2023
Technology
0
5.2k
20231109_WebAuthnを使ったパスワードレス認証をRailsアプリケーションで実装する
After Kaigi on Rails Night LT登壇資料
メドピア株式会社 伊藤悠真
https://smartbank.connpass.com/event/299631/
Yuma Ito
November 09, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
「その開発、認知負荷高すぎませんか?」Platform Engineeringで始める開発者体験カイゼン術
sansantech
PRO
2
950
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
110
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
220
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
これでもう迷わない!Jetpack Composeの書き方実践ガイド
zozotech
PRO
0
1.1k
S3アクセス制御の設計ポイント
tommy0124
3
210
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
670
Rustから学ぶ 非同期処理の仕組み
skanehira
1
150
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
RailsConf 2023
tenderlove
30
1.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
WebAuthnを使ったパスワードレス 認証をRailsアプリケーションで実装 する 2023/11/09 @After Kaigi on Rails Night メドピア株式会社
伊藤悠真
Kaigi on Rails お疲れ様でした!
気になったセッション
自己紹介 • 伊藤悠真 (@yuma_ito_bd) • フィッツプラス(メドピアの子会社)の サーバーサイドエンジニア ◦ 特定保健指導の効率化支援ツール Tonoelの開
発 • Ruby/Rails歴2年弱 • 趣味:バスケ、コーヒー
パスワードを忘れたことがある人 ✋
パスワードが不要な認証方式が あります!
体験してみよう! https://webauthn.io
3つのキーワード • FIDO • WebAuthn • パスキー
FIDO (Fast Identity Online) とは? • パスワードレスで認証するための技術 • 指紋や虹彩などの生体情報やPIN、専用の セキュリティーキーを用いる
• 公開鍵暗号方式を利用し、サーバーにはパ スワードではなく公開鍵を保存する
FIDO認証のメリット • UXの向上 ◦ パスワードを覚える必要がない • セキュリティーの向上 ◦ 秘匿情報を通信しない(秘密鍵は認証器に安全に保 存)
◦ Webサービスごとに異なる公開鍵を登録できる
3つのキーワード • FIDO • WebAuthn • パスキー
WebAuthn =WebブラウザでFIDO認証を 実現する仕様(API)
認証器 ブラウザ WebAuthnの仕組み(登録) サーバ ①チャレンジ要求 ②チャレンジ生成 ③本人認証を要求 ④本人認証 ⑤公開鍵/秘密鍵を 生成、端末に秘密鍵
を保存 ⑥公開鍵など署名情報を送信 ⑦署名情報を検証 ⑧公開鍵を保存
認証器 ブラウザ WebAuthnの仕組み(認証) サーバ ①チャレンジ要求 ②チャレンジ生成 ③本人認証を要求 ④本人認証 ⑤端末に保存された 秘密鍵で署名
⑥署名情報を送信 ⑦DBに保存された公開 鍵で署名情報を検証
3つのキーワード • FIDO • WebAuthn • パスキー
秘密鍵をクラウドで同期する仕組み 例:認証器(iPhone)が変わっても同じAppleアカウン トにログインしていればWebサービスにログインでき る (狭義の)パスキー
(広義の)パスキー WebAuthnによるパスワードを使わない認証 パスキー対応サービス: Google, Apple, Microsoft, Amazon, GitHub, 1Password, Yahoo!
JAPAN, ドコモ, メルカリなど続々対応!
RailsでWebAuthnの認証機能を 実装してみたい!
けど署名の検証とか仕様が難し そう・・・ (実際、難しかったです)
アプリの公開が間に合いませんでした
WebAuthn用のGem • webauthn-ruby ◦ WebAuthnの認証サーバで必要な処理を担ってくれるGem • warden-webauthn ◦ RackベースのミドルウェアWardenでWebAuthn認証を行う Gem
• devise-passkeys ◦ devise(有名な認証用Gem)でWebAuthn認証を行うGem
WebAuthn用のnpmパッケージ • フロントエンドで必要な処理(認証器へのリクエスト、 パラメータのbase64変換)を担う • @github/webauthn-json (star: 680) • @simplewebauthn
(star: 981) ◦ サーバサイド(Node.js)の処理やTypeScriptの型情報が用意されている • @passwordless-id/webauthn (star: 213)
Model • User ◦ deviseの認証で使うモデル ◦ webauthn_id (ユーザID) • Passkey
◦ 公開鍵を管理するモデル ◦ label ◦ public_key ◦ external_id ◦ sign_count
Model
routes チャレンジ要求用エンドポイント
Controller (登録) 認証サーバー情報 チャレンジの生成 署名の検証、公開鍵の保存
JavaScript チャレンジ生成用URL ブラウザがサポート しているか確認 navigator.credentials. create()を内部で実行
まとめ • FIDO認証、WebAuthenの仕組み、パスキーについ て • FIDO認証できる簡単なRailsアプリケーションのを実 装方法について • FIDO認証の実装をぜひ検討してみてください!