20231109_WebAuthnを使ったパスワードレス認証をRailsアプリケーションで実装する

After Kaigi on Rails Night LT登壇資料
メドピア株式会社 伊藤悠真
https://smartbank.connpass.com/event/299631/

Transcript

1. WebAuthnを使ったパスワードレス
   認証をRailsアプリケーションで実装
   する
   2023/11/09 @After Kaigi on Rails Night
   メドピア株式会社 伊藤悠真
   

   View Slide

2. Kaigi on Rails お疲れ様でした！
   

   View Slide

3. 気になったセッション
   

   View Slide

4. 自己紹介
   ● 伊藤悠真 (@yuma_ito_bd)
   ● フィッツプラス（メドピアの子会社）の
   サーバーサイドエンジニア
   ○ 特定保健指導の効率化支援ツール
   Tonoelの開
   発
   ● Ruby/Rails歴2年弱
   ● 趣味：バスケ、コーヒー
   

   View Slide

5. パスワードを忘れたことがある人
   ✋
   

   View Slide

6. パスワードが不要な認証方式が
   あります！
   

   View Slide

7. 体験してみよう！
   https://webauthn.io
   

   View Slide

8. 3つのキーワード
   ● FIDO
   ● WebAuthn
   ● パスキー
   

   View Slide

9. FIDO
   （Fast Identity Online）
   とは？
   ● パスワードレスで認証するための技術
   ● 指紋や虹彩などの生体情報やPIN、専用の
   セキュリティーキーを用いる
   ● 公開鍵暗号方式を利用し、サーバーにはパ
   スワードではなく公開鍵を保存する
   

   View Slide

10. FIDO認証のメリット
    ● UXの向上
    ○ パスワードを覚える必要がない
    ● セキュリティーの向上
    ○ 秘匿情報を通信しない（秘密鍵は認証器に安全に保
    存）
    ○ Webサービスごとに異なる公開鍵を登録できる
    

    View Slide

11. 3つのキーワード
    ● FIDO
    ● WebAuthn
    ● パスキー
    

    View Slide

12. WebAuthn
    ＝WebブラウザでFIDO認証を
    実現する仕様（API）
    

    View Slide

13. 認証器 ブラウザ
    WebAuthnの仕組み（登録）
    サーバ
    ①チャレンジ要求
    ②チャレンジ生成
    ③本人認証を要求
    ④本人認証
    ⑤公開鍵/秘密鍵を
    生成、端末に秘密鍵
    を保存
    ⑥公開鍵など署名情報を送信 ⑦署名情報を検証
    ⑧公開鍵を保存
    

    View Slide

14. 認証器 ブラウザ
    WebAuthnの仕組み（認証）
    サーバ
    ①チャレンジ要求
    ②チャレンジ生成
    ③本人認証を要求
    ④本人認証
    ⑤端末に保存された
    秘密鍵で署名
    ⑥署名情報を送信 ⑦DBに保存された公開
    鍵で署名情報を検証
    

    View Slide

15. 3つのキーワード
    ● FIDO
    ● WebAuthn
    ● パスキー
    

    View Slide

16. 秘密鍵をクラウドで同期する仕組み
    例：認証器(iPhone)が変わっても同じAppleアカウン
    トにログインしていればWebサービスにログインでき
    る
    （狭義の）パスキー
    

    View Slide

17. （広義の）パスキー
    WebAuthnによるパスワードを使わない認証
    パスキー対応サービス：
    Google, Apple, Microsoft, Amazon, GitHub, 1Password,
    Yahoo! JAPAN, ドコモ, メルカリなど続々対応！
    

    View Slide

18. RailsでWebAuthnの認証機能を
    実装してみたい！
    

    View Slide

19. けど署名の検証とか仕様が難し
    そう・・・
    （実際、難しかったです）
    

    View Slide

20. アプリの公開が間に合いませんでした
    

    View Slide

21. WebAuthn用のGem
    ● webauthn-ruby
    ○ WebAuthnの認証サーバで必要な処理を担ってくれるGem
    ● warden-webauthn
    ○ RackベースのミドルウェアWardenでWebAuthn認証を行う
    Gem
    ● devise-passkeys
    ○ devise（有名な認証用Gem）でWebAuthn認証を行うGem
    

    View Slide

22. WebAuthn用のnpmパッケージ
    ● フロントエンドで必要な処理（認証器へのリクエスト、
    パラメータのbase64変換）を担う
    ● @github/webauthn-json (star: 680)
    ● @simplewebauthn (star: 981)
    ○ サーバサイド（Node.js）の処理やTypeScriptの型情報が用意されている
    ● @passwordless-id/webauthn (star: 213)
    

    View Slide

23. Model
    ● User
    ○ deviseの認証で使うモデル
    ○ webauthn_id (ユーザID)
    ● Passkey
    ○ 公開鍵を管理するモデル
    ○ label
    ○ public_key
    ○ external_id
    ○ sign_count
    

    View Slide

24. Model
    

    View Slide

25. routes
    チャレンジ要求用エンドポイント
    

    View Slide

26. Controller （登録）
    認証サーバー情報
    チャレンジの生成
    署名の検証、公開鍵の保存
    

    View Slide

27. JavaScript
    チャレンジ生成用URL
    ブラウザがサポート
    しているか確認
    navigator.credentials.
    create()を内部で実行
    

    View Slide

28. まとめ
    ● FIDO認証、WebAuthenの仕組み、パスキーについ
    て
    ● FIDO認証できる簡単なRailsアプリケーションのを実
    装方法について
    ● FIDO認証の実装をぜひ検討してみてください！
    

    View Slide