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

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

7. None
8. None
9. None
10. None
11. None
12. None

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. オレオレアカウントを作る ↑たぶんやらない方がいい選択↑

23. None
24. None
25. None
26. None

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. そんなこんなでできました

44. None

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製

50. None

51. 自サークルのIdPから ログアウトできるようになるまで taiseiue 2026/10/5 Kyoto.js #25

52. ログアウトって何する処理でしょう？

53. CookieとかSession消したらよさそう

54. None
55. None
56. None
57. None

58. ここに残ったセッション情報で ログインし続けられてしまう

59. https://openid.net/specs/openid-connect-rpinitiated-1̲0.html

60. None

61. アプリケーションがログアウトする ときにOPのセッションを失効させる

62. アプリケーションがログアウトする ときにOPのセッションを失効させる

63. None
64. None
65. None

66. まだログインしたまま

67. https://www.ory.com/docs/hydra/guides/logout

68. None

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だよ

80. None

81. ここはstate-lessだよ

82. ログアウト成功! ここはstate-lessだよ

83. わかったこと • 認証認可の不具合はコンポーネント単体よりも 境界面で起きる • 認証認可を設計するとき、どこに状態があるか を最初に洗い出すと良い

84. 自サークルのIdPから ログアウトできるようになるまで taiseiue 2026/10/5 Kyoto.js #25

85. 時間余ったとき用

86. None
87. None