OmniAuthから学ぶOAuth2.0 [Kaigi on Rails 2024]

Kaigi on Rails 2024の登壇資料です。 GitHub : https://github.com/ykpythemind/kaigi-on-rails-2024

Transcript

1. Kaigi on Rails 2024 / ykpythemind OmniAuthから学ぶOAuth 2.0
2. ykpythemind (ゆきぽよ) STORES 株式会社 エンジニアリングマネージャ ・音楽制作 ・ホラー映像制作 ・苦手な食べ物が多いです
3. OmniAuthに隠されている 認証・認可のプロトコル 今日のテーマ
4. OmniAuth gemを使ったことはありますか？ 4 https://github.com/omniauth/omniauth
5. 今日のテーマ : OmniAuthに隠されている認証・認可のプロトコル 5 そもそも認証・認可とは？ OmniAuthでかんたん実装 3分でわかるOAuth 2.0とOpenID Connect OmniAuthなしで実装してみよう おまけ: 明日から使える Tips (1) (2) (3) (4) (5)
6. OmniAuthのマジックがわかるようになります 6
7. START!
8. そもそも認証・認可とは？ (1)
9. そもそも認証・認可とは？ 9 認証：個人を識別すること。 　　　「誰であるか」 認可：対象物に権限を与えること。 　　　「権限があるか」
10. そもそも認証・認可とは？ 10 16:35- MOROHASHI Kyosuke
11. そもそも認証・認可とは？ 11 Railsの認証 : authenticate_by https://github.com/rails/rails/blob/e009430309111c58f5fe67acec07aa9339bab931/guides/source/action_controller_overview.md
12. そもそも認証・認可とは？ 12 Railsの認証 : authenticate_by https://github.com/rails/rails/blob/8ac995453a2a2efd789810a90319e6bb6f0e2aea/activerecord/lib/active_record/secure_password.rb#L41
13. そもそも認証・認可とは？ 13 Railsの認可 : ロールの例 adminロールだけ 認可されている
14. そもそも認証・認可とは？ 14 Railsの認可 : gem • CanCanCommunity/cancancan • varvet/pundit • palkan/action_policy …
15. 󰥗「Googleでログインさせたい」 これだけじゃない、実世界によくある話
16. OmniAuthでかんたん実装 (2)
17. OmniAuthでかんたん実装 17 サンプル: https://github.com/ykpythemind/kaigi-on-rails-2024 01_omniauth_google_signin
18. OmniAuthでかんたん実装 18 https://www.youtube.com/watch?v=4TP1lchNE6w
19. OmniAuthでかんたん実装 19 • GoogleOAuth2 ストラテジを使う宣言 • クライアントIDとシークレットの設定 • 使うScopeの宣言 Rackを理解し Railsアプリケー ション開発の足腰を鍛えよう 11:35〜 hogelog
20. OmniAuthでかんたん実装 20 / Googleログインを開始するボタ ンを表示するページ /auth/google_oauth2/callback 認証結果をGoogleから受け取る エンドポイント
21. OmniAuthでかんたん実装 21 OmniAuthによる実装の隠蔽 このエンドポイントは何を しているのか？？？ AuthHashとは何か？？
22. OmniAuthに隠されている 認証・認可のプロトコル OmniAuthの抽象化が優秀。でも、今日のテーマをおさらい
23. 3分でわかるOAuth 2.0と OpenID Connect (3)
24. 3分でわかるOAuth, OpenID Connect 24 OAuth 2.0 Webアプリの認可のためのプロトコル OpenID Connect Webアプリの認証のためのプロトコル OAuth2.0 を拡張して作られている The OAuth 2.0 Authorization Framework https://openid-foundation-japan.github.io/rfc6749.ja.html OpenID Connect Core 1.0 https://openid-foundation-japan.github.io/openid-connect-core-1_0.ja.html
25. 3分でわかるOAuth, OpenID Connect 25 つまり OpenID Connectを覚えておけばつぶしが効く 典型的なサードパーティログインの用途ではOpenID Connectを用いるほうが適している
26. 3分でわかるOAuth, OpenID Connect 26 OpenIDによる認証フローの概要 サードパーティログインさせたいときにOmniAuthが裏側やっていること ※ 認可コードフロー クライアントからIDプロバイダに認証リクエストを送る 認証レスポンスが返ってきたらトークンリクエストを送る 返ってきたIDトークンを検証して認証。必要に応じてアクセストークンを使 用 (1) (2) (3)
27. 3分でわかるOAuth, OpenID Connect 27 クライアントからIDプロバイダに認証リクエストを送る 認証レスポンスが返ってきたらトークンリクエストを送る 返ってきたIDトークンを検証して認証。必要に応じてアクセストークンを使用 (1) (2) (3) 認証されたことを証明 するトークン (OpenID) 認可されたリソース にアクセスするため のトークン (OAuth)
28. 🤯 3分ではわからないですね...
29. OmniAuthなしで 実装してみよう (4)
30. OmniAuth Philosophy 30 https://github.com/omniauth/omniauth/wiki/Philosophy
31. GoogleOAuth2 ストラテジ 31 このエンドポイントは何を しているのか？？？ GoogleOAuth2ストラテジのRequest Phaseを開始 答え
32. GoogleOAuth2 ストラテジ -> OAuth2ストラテジ 32 https://github.com/zquestz/omniauth-google-oauth2/blob/11af0784aeb6a195d4e1857bdf0f696dc6f80e4b/lib/omniauth/strategies/google_oauth2.rb https://github.com/omniauth/omniauth-oauth2/blob/c830138e399b207ad3ce832ed4db51e67030cdcb/README.md
33. OAuth2ストラテジ の Request Phase を読む 33 ※1 OAuth2.0の文脈で言えば厳密には認可が開始する。 (1) クライアントからIDプロバイダに認証リクエストを送る にあたる部分 • リダイレクトなので認証リクエストというイメージがしにくいが、ここから認証が開始 する ※1 • callback_urlは、 http://localhost:4567/auth/google_oauth2/callback が OmniAuthによって自動で設定される https://github.com/omniauth/omniauth-oauth2/blob/c830138e399b207ad3ce832ed4db51e67030cdcb/lib/omniauth/strategies/oauth2.rb#L58
34. 自前でRequest Phase相当の実装をする 34 02_request_phase
35. 自前でRequest Phase相当の実装をする 35 • client_id … IDプロバイダに登録したクライアントIDを与えている。 • redirect_uri … OmniAuthの例で使ったものと同じ。IDプロバイダに登録したものと一致 する必要がある。 • response_type … 認可コードフローを用いるので “code” を指定する。 • scope … emailやprofileへのアクセスを認可させるかを指定する。 “openid” を指定するとIDトークンがもらえる（OpenID Connectの拡張) 02_request_phase
36. 自前でRequest Phase相当の実装をする 36 Googleアカウントの 認可エンドポイントにむけてリダイレクトする。
37. OmniAuth Philosophy 37 https://github.com/omniauth/omniauth/wiki/Philosophy 次はCallback Phase を実装
38. OAuth2ストラテジ の Callback Phaseを読む 38 https://github.com/omniauth/omniauth-oauth2/blob/c830138e399b207ad3ce832ed4db51e67030cdcb/lib/omniauth/strategies/oauth2.rb#L84 (2) 認証レスポンスが返ってきたらトークンリクエストを送る にあたる部分 • まずはエラーハンドリング • build_access_token methodへ
39. OAuth2ストラテジ の Callback Phaseを読む 39 https://github.com/omniauth/omniauth-oauth2/blob/c830138e399b207ad3ce832ed4db51e67030cdcb/lib/omniauth/strategies/oauth2.rb#L124 (2) 認証レスポンスが返ってきたらトークンリクエストを送る にあたる部分 • get_token() でトークンリクエストを送っている ※1 • “code”というクエリパラメータが認可コード。これは一度限り有効な引換券。 認可コードと引き換えにアクセストークンとIDトークンを得る ※1 実装は OAuth2 gemに委譲 https://gitlab.com/oauth-xx/oauth2/-/blob/main/lib/oauth2/strategy/auth_code.rb#L30
40. 自前でCallback Phase相当の実装をする 40 (2) 認証レスポンスが返ってきたらトークンリクエストを送る 03_callback_phase
41. 自前でCallback Phase相当の実装をする 41 (2) 認証レスポンスが返ってきたらトークンリクエストを送る トークンエンドポイントに特定のパラメータをPOSTする • code … クエリパラメータで渡された認可コード • client_id … クライアントID • client_secret … クライアントシークレット。クライアント認証のために必要。 （IDプロバイダが、認証済みのクライアントからのリクエストであることを判別する） https://developers.google.com/identity/openid-connect/openid-connect?hl=ja#exchangecode 03_callback_phase
42. 自前でCallback Phase相当の実装をする 42 トークンリクエストの結果 返ってきたIDトークンを検証して認証。必要に応じてアクセストークンを使用 (3) 残りは…
43. OmniAuthのAuthHashの正体 43 AuthHashとは何か？？ 認証の結果得たIDトークンやアクセストークンを 使いやすい形で保持してくれているクラス 答え https://github.com/omniauth/omniauth/blob/e23567ac860f4adfb425db226d68a03235078941/lib/omniauth/auth_hash.rb#L8
44. AuthHashのデータの元になるロジックを読む 44 https://github.com/omniauth/omniauth-oauth2/blob/c830138e399b207ad3ce832ed4db51e67030cdcb/lib/omniauth/strategies/oauth2.rb#L50 omniauth-oauth2 omniauth/strategies/oauth2.rb auth_hash.credentials.token という形で参照可能になる アクセストークン
45. AuthHashのデータの元になるロジックを読む 45 https://github.com/omniauth/omniauth_openid_connect/blob/f9779f098dbc870c4789c1ff928c5883733f5366/lib/omniauth/strategies/openid_connect.rb#L100 アクセストークンとほぼ同じ だが、verify_id_token!メソッドで id_tokenの妥当性を検証している IDトークン omniauth_openid_connect omniauth/strategies/openid_connect.rb
46. 自前でアクセストークンとIDトークンを扱ってみよう 46 04_use_access_token_and_verify_id_token
47. 自前でアクセストークンとIDトークンを扱ってみよう 47 IDトークンは検証することで認証ができる。 “sub” クレームがユーザーIDを指す。 検証方法の詳細は　https://developers.google.com/identity/openid-connect/openid-connect?hl=ja#validatinganidtoken などを参照。
48. 自前でアクセストークンとIDトークンを扱ってみよう 48 アクセストークンを使い userinfoエンドポイントから認証されたユーザーの 情報を取得する
49. 紐解いてみるとOmniAuthなしでもできる 49 with OmniAuth without OmniAuth
50. OmniAuthは魔法じゃない 裏側で認証・認可のプロトコルに従った実装が されている まとめると 知ってるとお得
51. おまけ：明日から使えるTips (5)
52. OmniAuth.config.test_mode
53. OmniAuth.config.test_mode 53 https://github.com/omniauth/omniauth/wiki/Integration-Testing 外部のIDプロバイダを用意しなくても テストできる便利機能 AuthHashをモックする公式の方法
54. OmniAuth Setup Phase
55. OmniAuth Setup Phase 55 https://github.com/omniauth/omniauth/wiki/Setup-Phase Request Phaseに入る前に ストラテジの設定を動的に変更できる 例では /auth/openid_connect?type=sign_up というように type パラメータ付きで 開始したときに認証フローの挙動を変更
56. 🙄 OAuth認証？
57. OAuth認証？？ 57 omniauth-facebook OAuthだけだとアクセストークンしか得られないため、 そのアクセストークンを用いてユーザー情報APIから user_idを取得している → ユーザー認証を行いたい場合は omniauth/omniauth_openid_connect を使おう 　 IDトークンのsubクレームをもとに uid を決定してくれる https://github.com/simi/omniauth-facebook/blob/902971d18b4f43cfb1d969139b4a75bb517a055b/lib/omniauth/strategies/facebook.rb#L59
58. fin.
59. ・物足りない方 ・興味を持っていただいた方
60. STORES 株式会社 の紹介 60 • お店の運営を支えるプロダクト群 (ECの会社 じゃないよ) • アカウント統合・データ統合たくさん • 2025年は新規プロダクト +10 !