Slide 1
Slide 1 text
WebAuthnを使ったパスワードレス
認証をRailsアプリケーションで実装
する
2023/11/09 @After Kaigi on Rails Night
メドピア株式会社 伊藤悠真
Slide 2
Slide 2 text
Kaigi on Rails お疲れ様でした！
Slide 3
Slide 3 text
気になったセッション
Slide 4
Slide 4 text
自己紹介
● 伊藤悠真 (@yuma_ito_bd)
● フィッツプラス（メドピアの子会社）の
サーバーサイドエンジニア
○ 特定保健指導の効率化支援ツール
Tonoelの開
発
● Ruby/Rails歴2年弱
● 趣味：バスケ、コーヒー
Slide 5
Slide 5 text
パスワードを忘れたことがある人
✋
Slide 6
Slide 6 text
パスワードが不要な認証方式が
あります！
Slide 7
Slide 7 text
体験してみよう！
https://webauthn.io
Slide 8
Slide 8 text
3つのキーワード
● FIDO
● WebAuthn
● パスキー
Slide 9
Slide 9 text
FIDO
（Fast Identity Online）
とは？
● パスワードレスで認証するための技術
● 指紋や虹彩などの生体情報やPIN、専用の
セキュリティーキーを用いる
● 公開鍵暗号方式を利用し、サーバーにはパ
スワードではなく公開鍵を保存する
Slide 10
Slide 10 text
FIDO認証のメリット
● UXの向上
○ パスワードを覚える必要がない
● セキュリティーの向上
○ 秘匿情報を通信しない（秘密鍵は認証器に安全に保
存）
○ Webサービスごとに異なる公開鍵を登録できる
Slide 11
Slide 11 text
3つのキーワード
● FIDO
● WebAuthn
● パスキー
Slide 12
Slide 12 text
WebAuthn
＝WebブラウザでFIDO認証を
実現する仕様（API）
Slide 13
Slide 13 text
認証器 ブラウザ
WebAuthnの仕組み（登録）
サーバ
①チャレンジ要求
②チャレンジ生成
③本人認証を要求
④本人認証
⑤公開鍵/秘密鍵を
生成、端末に秘密鍵
を保存
⑥公開鍵など署名情報を送信 ⑦署名情報を検証
⑧公開鍵を保存
Slide 14
Slide 14 text
認証器 ブラウザ
WebAuthnの仕組み（認証）
サーバ
①チャレンジ要求
②チャレンジ生成
③本人認証を要求
④本人認証
⑤端末に保存された
秘密鍵で署名
⑥署名情報を送信 ⑦DBに保存された公開
鍵で署名情報を検証
Slide 15
Slide 15 text
3つのキーワード
● FIDO
● WebAuthn
● パスキー
Slide 16
Slide 16 text
秘密鍵をクラウドで同期する仕組み
例：認証器(iPhone)が変わっても同じAppleアカウン
トにログインしていればWebサービスにログインでき
る
（狭義の）パスキー
Slide 17
Slide 17 text
（広義の）パスキー
WebAuthnによるパスワードを使わない認証
パスキー対応サービス：
Google, Apple, Microsoft, Amazon, GitHub, 1Password,
Yahoo! JAPAN, ドコモ, メルカリなど続々対応！
Slide 18
Slide 18 text
RailsでWebAuthnの認証機能を
実装してみたい！
Slide 19
Slide 19 text
けど署名の検証とか仕様が難し
そう・・・
（実際、難しかったです）
Slide 20
Slide 20 text
アプリの公開が間に合いませんでした
Slide 21
Slide 21 text
WebAuthn用のGem
● webauthn-ruby
○ WebAuthnの認証サーバで必要な処理を担ってくれるGem
● warden-webauthn
○ RackベースのミドルウェアWardenでWebAuthn認証を行う
Gem
● devise-passkeys
○ devise（有名な認証用Gem）でWebAuthn認証を行うGem
Slide 22
Slide 22 text
WebAuthn用のnpmパッケージ
● フロントエンドで必要な処理（認証器へのリクエスト、
パラメータのbase64変換）を担う
● @github/webauthn-json (star: 680)
● @simplewebauthn (star: 981)
○ サーバサイド（Node.js）の処理やTypeScriptの型情報が用意されている
● @passwordless-id/webauthn (star: 213)
Slide 23
Slide 23 text
Model
● User
○ deviseの認証で使うモデル
○ webauthn_id (ユーザID)
● Passkey
○ 公開鍵を管理するモデル
○ label
○ public_key
○ external_id
○ sign_count
Slide 24
Slide 24 text
Model
Slide 25
Slide 25 text
routes
チャレンジ要求用エンドポイント
Slide 26
Slide 26 text
Controller （登録）
認証サーバー情報
チャレンジの生成
署名の検証、公開鍵の保存
Slide 27
Slide 27 text
JavaScript
チャレンジ生成用URL
ブラウザがサポート
しているか確認
navigator.credentials.
create()を内部で実行
Slide 28
Slide 28 text
まとめ
● FIDO認証、WebAuthenの仕組み、パスキーについ
て
● FIDO認証できる簡単なRailsアプリケーションのを実
装方法について
● FIDO認証の実装をぜひ検討してみてください！