自サークルのIdPからログアウトできるようになるまで

Kyoto.js 25 で発表した資料です

Transcript

1. 自サークルのIdPから ログアウトできるようになるまで taiseiue 2026/10/5 Kyoto.js #25
2. JavaScript
3. https://www.nicovideo.jp/watch/sm1122515
4. https://dic.pixiv.net/a/ブラクラ
5. window.self • 上村太成 a.k.a. taiseiue • Kyoto.cs / CKP学生部 • 趣味: TS / Go / C# でない: TS / Go / Perl • 京都産業大学 / はてな マネーフォワード
6. 前半の話 自サークルのIdPから ログアウトできるようになるまで 後半の話 taiseiue 今日はあんまりしない話 2026/10/5 Kyoto.js #25
13. 自サークルのIdPから ログアウトできるようになるまで taiseiue 2026/10/5 Kyoto.js #25
14. https://speakerdeck.com/taiseiue/discord-oidc-proxy
15. https://speakerdeck.com/taiseiue/discord-oidc-proxy
16. https://speakerdeck.com/taiseiue/discord-oidc-proxy
17. https://speakerdeck.com/taiseiue/discord-oidc-proxy
18. 一見さんもログインしてもらいたい
19. ロールベースのアクセス制御もしたい
20. fl Cloud areを挟めないサービスもある
21. オレオレアカウントを作る
22. オレオレアカウントを作る ↑たぶんやらない方がいい選択↑
27. 😭
28. 世間では最近ory stackが人気 https://www.ory.com/
29. 世間では最近ory stackが人気 https://www.ory.com/
30. ory stackのいいところ • セルフホストできる • コンポーネントに分かれていて、 それぞれHeadlessなのでカスタムしやすい
31. https://www.ory.sh/docs/ecosystem/projects
32. アプリケーションはログインすると き、はじめory/hydraに遷移する
33. アプリケーションはログインすると き、はじめory/hydraに遷移する アプリケーションから見ると ory/hydraがOpenID Providerに見えている
34. ory/hydraは誰がログインしているか 知らないのでory/kratosに 遷移させログインさせる
35. ory/hydraは誰がログインしているか 知らないのでory/kratosに 遷移させログインさせる ユーザーはここでory/kratosにログインする
36. ory/kratosから受け取った情報を元に アプリケーションにユーザー情報を返す ここでory/hydraはユーザーに情報を渡していいかの fl 許可取り(consent ow)も行っている
37. かっこいい!うちもこれで!!
38. でももうユーザーアカウントちょっとある
39. 😭
40. ory/hydraは誰がログインしているか 知らないのでory/kratosに 遷移させログインさせる ユーザーはここでory/kratosにログインする https://www.ory.sh/docs/ecosystem/projects
41. ory/hydraは誰がログインしているか 知らないのでory/kratosに 遷移させログインさせる ユーザーはここでory/kratosにログインする https://www.ory.sh/docs/ecosystem/projects
42. ory/hydraは誰がログインしているか 知らないのでAuth0に 遷移させログインさせる ユーザーはここでAuth0にログインする https://www.ory.sh/docs/ecosystem/projects
43. そんなこんなでできました
45. クライアント アプリケーション RP=Relying Party
46. OP=OpenID Provider クライアント アプリケーション RP=Relying Party
47. クライアント アプリケーション アカウント設定画面 Next.js製
48. クライアント アプリケーション アカウント設定画面 Next.js製 スタッフ側管理画面 TanStack製
49. Auth0のIDからAccountDBを引いてアカウント情報をhydraに渡す Go製 クライアント アプリケーション アカウント設定画面 Next.js製 ユーザーのプロフィールなどは Auth0ではなくこっちに保存 スタッフ側管理画面 TanStack製
51. 自サークルのIdPから ログアウトできるようになるまで taiseiue 2026/10/5 Kyoto.js #25
52. ログアウトって何する処理でしょう？
53. CookieとかSession消したらよさそう
58. ここに残ったセッション情報で ログインし続けられてしまう
59. https://openid.net/specs/openid-connect-rpinitiated-1̲0.html
61. アプリケーションがログアウトする ときにOPのセッションを失効させる
62. アプリケーションがログアウトする ときにOPのセッションを失効させる
66. まだログインしたまま
67. https://www.ory.com/docs/hydra/guides/logout
69. hydraはログアウトしてよいかユーザーに尋ねるので、 これを利用してapps/coreがAuth0からもログアウトさせる
70. hydraはログアウトしてよいかユーザーに尋ねるので、 これを利用してapps/coreがAuth0からもログアウトさせる
71. ここはstate-lessだよ
72. ここはstate-lessだよ
73. ここはstate-lessだよ
74. ここはstate-lessだよ
75. ログアウト成功 ここはstate-lessだよ
76. アレ... ログアウト成功 ここはstate-lessだよ
77. 他のアプリケーションからも ログアウトされていてほしい ログアウト成功 ここはstate-lessだよ アレ...
78. https://openid.net/specs/openid-connect-backchannel-1̲0.html
79. hydraがログアウト時に他のアプリケーションに back-channel logoutして周る ここはstate-lessだよ
81. ここはstate-lessだよ
82. ログアウト成功! ここはstate-lessだよ
83. わかったこと • 認証認可の不具合はコンポーネント単体よりも 境界面で起きる • 認証認可を設計するとき、どこに状態があるか を最初に洗い出すと良い
84. 自サークルのIdPから ログアウトできるようになるまで taiseiue 2026/10/5 Kyoto.js #25
85. 時間余ったとき用