KeycloakとReactで動かして学ぶOpenID Connect

DevelopersIO 2023大阪で発表した資料です。

1. ,FZDMPBLͱ3FBDUͰಈֶ͔ͯ͠Ϳ
   0QFO*%
   $POOFDU 2023/7/19 খചྲྀ௨ιϦϡʔγϣϯ෦ɹதౡ ٛಓ
2. ࣗݾ঺հ 2 தౡ ٛಓʢNAKASHIMA Yoshimichiʣ ɾখചྲྀ௨ιϦϡʔγϣϯ෦ ɹɾprismatix ೝূαʔϏε։ൃ
3. ͜ͷൃදͷલఏ 3 ɾOpenID Connect ʹ͍ͭͯษڧ͚ͨ͠Ͳɺ࣮ࡍͷΞϓϦͰͲͷΑ͏ʹ ಈ͍͍ͯΔͷ͔Α͘Θ͔͍ͬͯͳ͍ ɾϥΠϒϥϦʹ೚ͤͨΒͳΜͱ͔ͳ͍ͬͯΔͷͰৄ͘͠͸Α͘Θ͔ͬ ͍ͯͳ͍ →࣮ࡍʹσϞΞϓϦͷಈ͖Λݟͳ͕ΒɺͲͷΑ͏ʹϦΫΤετ͕ૹΒ Ε͍ͯΔͷ͔ϑϩʔͱরΒ͠߹Θͤͳ͕Βݟ͍͖ͯ·͢ɻ ※ Keycloak ͱ React ͷৄ͍͠આ໌͸ߦ͍·ͤΜɻྃ͝ঝ͍ͩ͘͞
4. ΞδΣϯμ 4 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ
5. ΞδΣϯμ 5 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ
6. ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ 6 ࡞੒ͨ͠σϞΞϓϦͷಈ͖ΛݟͯΈ·͠ΐ͏ʢ஍ຯͰ͢ʣ
7. ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ 7
8. ΞδΣϯμ 8 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ
9. OpenID Connect ͷ֓ཁ 9 ɾೝՄͷϓϩτίϧͰ͋Δ OAuth 2.0 ΛϕʔεʹɺೝূͷػೳΛ௥Ճ ͠ɺϢʔβʔΛࣝผ͢ΔͨΊʹ֦ுͨ͠΋ͷ ɾOpenID Connect Λ༻͍Δ͜ͱͰɺΫϨσϯγϟϧ৘ใͳͲΛΞϓϦ Ͱ࣋ͭඞཁ͕ͳ͘ɺೝূαʔόʔʹ؅ཧΛҠৡͰ͖Δ ɾOAuth 2.0 Ͱ͸ΞΫηετʔΫϯɾϦϑϨογϡτʔΫϯ͕ൃߦ͞Ε Δ͕ɺOpenID Connect Ͱ͸ ID τʔΫϯ͕ൃߦ͞ΕɺID τʔΫϯΛݕ ূ͢Δ͜ͱͰɺೝূΛߦ͏͜ͱ͕Մೳ
10. OpenID Connect ͷ֓ཁʢओͳϩʔϧʣ 10 ɾϢʔβʔ ɹɾΞϓϦɾαʔϏεΛར༻͢ΔΤϯυϢʔβʔ ɾRelying PartyʢҎ߱ RP ͱهࡌʣ ɹɾΞϓϦɾαʔϏεʢࠓճͷ৔߹͸ React ΞϓϦʣ ɾIdentity ProviderʢҎ߱ IdP ͱهࡌʣ ɹɾϢʔβʔΛೝূ͠ɺRelying Party ʹରͯ͠ ID τʔΫϯɺΞΫηε ɹɹτʔΫϯʢϦϑϨογϡτʔΫϯʣΛൃߦ͢Δαʔόʔʢࠓճͷ ɹɹ৔߹͸ Keycloakʣ ɾϦιʔεαʔόʔ ɹɾϢʔβʔ৘ใΛอ͍࣋ͯ͠Δαʔόʔʢࠓճ͸ Keycloakʣ
11. OpenID Connect ͷ֓ཁ 11 ɾϑϩʔ ɹɾೝՄίʔυϑϩʔ ɹɾΠϯϓϦγοτϑϩʔ ɹɾΫϥΠΞϯτΫϨσϯγϟϧζϑϩʔ ɹɾϦιʔεΦʔφʔύεϫʔυΫϨσϯγϟϧζϑϩʔ
12. OpenID Connect ͷ֓ཁ 12 ɾϑϩʔ ɹɾೝՄίʔυϑϩʔ ɹɾΠϯϓϦγοτϑϩʔ ɹɾΫϥΠΞϯτΫϨσϯγϟϧζϑϩʔ ɹɾϦιʔεΦʔφʔύεϫʔυΫϨσϯγϟϧζϑϩʔ
13. OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 13 ɾ·ͣ RP ͸ IdP ʹରͯ͠ೝՄίʔυͷൃߦΛϦΫΤετ͠ɺೝՄίʔ υͱҾ͖׵͑ʹɺ֤छτʔΫϯΛൃߦ͢Δϑϩʔ ɾϒϥ΢βΛհ͢ͷ͕ೝՄίʔυͷͨΊɺτʔΫϯΛ௚઀ൃߦ͢Δϑ ϩʔʢΠϯϓϦγοτϑϩʔʣͱൺ΂ͯηΩϡϦςΟ໘Ͱ༏Ε͍ͯΔ
14. OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 14
15. OpenID Connect ͷ֓ཁʢύϥϝʔλʣ 15 ઌ΄ͲͷϑϩʔͷਤͰग़͖ͯͨʮݕূʯͱ͍͏ϑϨʔζͰ͕͢ɺओʹ ҎԼͷ߲໨Λݕূ͠·͢ʢଞʹ΋ݕূ͢Δ΋ͷ͸͋ΔͷͰׂ͕͢Ѫʣ ɾstate ɾnonce ɾPKCE → CSRF ΍ϦϓϨΠΞλοΫͷରࡦͱͯ͠ɺੜ੒ɾݕূΛߦ͏ → PKCEͷઆ໌͸࣌ؒͷ౎߹্ׂѪ
16. OpenID Connect ͷ֓ཁʢstateʣ 16 ɾओʹ CSRF ରࡦͷͨΊͷύϥϝʔλ → RP ͸ཚ਺Λੜ੒͠ɺೝՄίʔυϦΫΤετ࣌ʹ state ͱ͍͏ύϥ ϝʔλͱͯ͠෇༩͢ΔɻIdP ͔ΒೝՄίʔυ͕ൃߦ͞Εͨ࣌ʹɺҰॹʹ ฦ͞ΕΔ state ͷ஋͕ɺੜ੒ͨ͠΋ͷͱಉҰ͔Λݕূ͢Δɻ ※ CSRFɿଞਓʹҙਤͤ͵ϦΫΤετΛૹ৴ͤ͞Δ߈ܸɻࠓճͷέʔε ͷ৔߹ɺଞਓʹ߈ܸऀͷೝՄίʔυΛ࢖༻ͤ͞ɺ߈ܸऀͷΞΧ΢ϯ τͰϩάΠϯͤ͞Δ
17. OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 17 state Λੜ੒ state Λݕূ
18. OpenID Connect ͷ֓ཁʢnonceʣ 18 ɾओʹϦϓϨΠΞλοΫରࡦͷͨΊͷύϥϝʔλ → RP ͸ཚ਺Λੜ੒͠ɺೝՄίʔυϦΫΤετ࣌ʹ nonce ͱ͍͏ύϥ ϝʔλͱͯ͠෇༩͢ΔɻIdP ͔Β ID τʔΫϯ͕ൃߦ͞Εͨ࣌ʹɺID τʔΫϯʹؚ·ΕΔ nonce ͷ஋͕ɺੜ੒ͨ͠΋ͷͱಉҰ͔Λݕূ͢ Δɻ → state ͱ͸ RP ͕ੜ੒͠ɺݕূΛߦ͏఺͸ಉ͕ͩ͡ɺݕূͷ໨తͱλ Πϛϯά͕ҟͳΔ ※ ϦϓϨΠΞλοΫɿ߈ܸऀ͕ͳΜΒ͔ͷํ๏Ͱ઄औͨ͠ଞਓͷ ID τʔΫϯΛ࢖ͬͯ RP ʹରͯ͠ೝূΛߦ͏߈ܸͷ͜ͱ
19. OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 19 nonce Λੜ੒ nonce Λݕূ
20. ΞδΣϯμ 20 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ
21. Keycloak 21 ɾRedHat ʹΑͬͯ։ൃ͞Ε͍ͯΔ OSS ͷ IAM (Identity and Access Management) πʔϧ ɾOpenID ConnectɺOAuth2.0ɺSAML ͳͲͷඪ४ϓϩτίϧΛαϙʔ τ͍ͯ͠Δ ɾSaaS ൛΋͋Δ
22. Keycloak ଆͷઃఆʢུ֓ʣ 22 ɾKeycloak ͷϛχϚϜઃఆͱͯ͠ҎԼΛ࡞੒͢Δ ɹɾrealmɿςφϯτʹ૬౰͢Δ֓೦ ɹɾclientɿrealm ʹඥͮ͘ΫϥΠΞϯτʢ㲈ΞϓϦ΍αʔϏεʣ ɹɾuserɿKeycloak ͰϩάΠϯ͢ΔϢʔβʔ →ଞʹ΋ role ΍ group ͳͲͷ֓೦͕͋Γ·͕͢ɺࠓճ͸লུ
23. Keycloak ଆͷઃఆ಺༰֬ೝ 23
24. React ଆͷઃఆ಺༰֬ೝ 24
25. ΞδΣϯμ 25 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ
26. OpenID Connect ͷ֓ཁʢೝՄϦΫΤετʣ 26
27. ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢೝՄϦΫΤετʣ 27
28. OpenID Connect ͷ֓ཁʢೝՄίʔυϨεϙϯεʣ 28
29. ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢೝՄίʔυϨεϙϯεʣ 29
30. OpenID Connect ͷ֓ཁʢτʔΫϯϦΫΤετʣ 30
31. ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢτʔΫϯϦΫΤετʣ 31
32. OpenID Connect ͷ֓ཁʢUserInfoϦΫΤετʣ 32
33. ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢUserInfoϦΫΤετʣ 33
34. OpenID Connect ͷ֓ཁʢstate ͷݕূʣ 34
35. ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢstate ͷݕূʣ 35
36. OpenID Connect ͷ֓ཁʢnonce ͷݕূʣ 36
37. ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢnonce ͷݕূʣ 37
38. ΞδΣϯμ 38 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ
39. ߟྀ఺ͱ஫ҙࣄ߲ 39 ɾOpenID Connect ϑϩʔ͸ෳࡶ͕ͩɺ౰વϢʔβʔͷૢ࡞͢Δը໘͔ Β͸ͦͷෳࡶ͞Λҙࣝ͢Δ͜ͱ͸ͳ͍ →த਎ͰͲͷΑ͏ͳಈ͖Λ͍ͯ͠Δ͔஌͓ͬͯ͘͜ͱ͕େࣄ ɾϥΠϒϥϦΛ࢖͏৔߹͸Α͠ͳʹ΍ͬͯ͘Ε͍ͯΔ͕ɺΫϥΠΞϯ τଆͰ͸ state ΍ nonce ͷݕূΛߦ͏͜ͱͰ CSRF ͳͲͷ߈ܸΛ๷͙ ࢓૊Έ͕͋Δɻ →ϥΠϒϥϦΛ࢖Θͳ͍৔߹͸͜ͷลΓΛ͔ͬ͠Γݕূ͢Δඞཁ͕͋ Δ
40. ΞδΣϯμ 40 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ
41. ͓ΘΓʹ 41 ɾOpenID Connect Ͱ͸ state ΍ nonce ͳͲͷύϥϝʔλΛ༻͍ͯ CSRF ͳͲͷ߈ܸΛ๷͙࢓૊Έ͕උΘ͍ͬͯ·͢ɻࠓ೔ͷઆ໌Λฉ͍ ͯɺ΋ͬͱਂ͘ௐ΂ͯΈ͍ͨͱࢥͬͯ΋Β͑ͨΒ޾͍Ͱ͢ɻ ຊ೔ͷηογϣϯͷײ૝͸ #devio2023 ΛೖΕͯπΠʔτͯͩ͘͠͞ ͍ʂ