$30 off During Our Annual Pro Sale. View Details »

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

Yuma Ito
November 09, 2023

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

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

Yuma Ito

November 09, 2023
Tweet

Other Decks in Technology

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