KeycloakとReactで動かして学ぶOpenID Connect

by 中島義道

Slide 1

Slide 1 text

,FZDMPBLͱ3FBDUͰಈֶ͔ͯ͠Ϳ 0QFO*%$POOFDU 2023/7/19 খചྲྀ௨ιϦϡʔγϣϯ෦ɹதౡ ٛಓ

Slide 2

Slide 2 text

ࣗݾ঺հ 2 தౡ ٛಓʢNAKASHIMA Yoshimichiʣ ɾখചྲྀ௨ιϦϡʔγϣϯ෦ ɹɾprismatix ೝূαʔϏε։ൃ

Slide 3

Slide 3 text

͜ͷൃදͷલఏ 3 ɾOpenID Connect ʹ͍ͭͯษڧ͚ͨ͠Ͳɺ࣮ࡍͷΞϓϦͰͲͷΑ͏ʹ ಈ͍͍ͯΔͷ͔Α͘Θ͔͍ͬͯͳ͍ ɾϥΠϒϥϦʹ೚ͤͨΒͳΜͱ͔ͳ͍ͬͯΔͷͰৄ͘͠͸Α͘Θ͔ͬ ͍ͯͳ͍ →࣮ࡍʹσϞΞϓϦͷಈ͖Λݟͳ͕ΒɺͲͷΑ͏ʹϦΫΤετ͕ૹΒ Ε͍ͯΔͷ͔ϑϩʔͱরΒ͠߹Θͤͳ͕Βݟ͍͖ͯ·͢ɻ ※ Keycloak ͱ React ͷৄ͍͠આ໌͸ߦ͍·ͤΜɻྃ͝ঝ͍ͩ͘͞

Slide 4

Slide 4 text

ΞδΣϯμ 4 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ

Slide 5

Slide 5 text

ΞδΣϯμ 5 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ

Slide 6

Slide 6 text

·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ 6 ࡞੒ͨ͠σϞΞϓϦͷಈ͖ΛݟͯΈ·͠ΐ͏ʢ஍ຯͰ͢ʣ

Slide 7

Slide 7 text

·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ 7

Slide 8

Slide 8 text

ΞδΣϯμ 8 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ

Slide 9

Slide 9 text

OpenID Connect ͷ֓ཁ 9 ɾೝՄͷϓϩτίϧͰ͋Δ OAuth 2.0 ΛϕʔεʹɺೝূͷػೳΛ௥Ճ ͠ɺϢʔβʔΛࣝผ͢ΔͨΊʹ֦ுͨ͠΋ͷ ɾOpenID Connect Λ༻͍Δ͜ͱͰɺΫϨσϯγϟϧ৘ใͳͲΛΞϓϦ Ͱ࣋ͭඞཁ͕ͳ͘ɺೝূαʔόʔʹ؅ཧΛҠৡͰ͖Δ ɾOAuth 2.0 Ͱ͸ΞΫηετʔΫϯɾϦϑϨογϡτʔΫϯ͕ൃߦ͞Ε Δ͕ɺOpenID Connect Ͱ͸ ID τʔΫϯ͕ൃߦ͞ΕɺID τʔΫϯΛݕ ূ͢Δ͜ͱͰɺೝূΛߦ͏͜ͱ͕Մೳ

Slide 10

Slide 10 text

OpenID Connect ͷ֓ཁʢओͳϩʔϧʣ 10 ɾϢʔβʔ ɹɾΞϓϦɾαʔϏεΛར༻͢ΔΤϯυϢʔβʔ ɾRelying PartyʢҎ߱ RP ͱهࡌʣ ɹɾΞϓϦɾαʔϏεʢࠓճͷ৔߹͸ React ΞϓϦʣ ɾIdentity ProviderʢҎ߱ IdP ͱهࡌʣ ɹɾϢʔβʔΛೝূ͠ɺRelying Party ʹରͯ͠ ID τʔΫϯɺΞΫηε ɹɹτʔΫϯʢϦϑϨογϡτʔΫϯʣΛൃߦ͢Δαʔόʔʢࠓճͷ ɹɹ৔߹͸ Keycloakʣ ɾϦιʔεαʔόʔ ɹɾϢʔβʔ৘ใΛอ͍࣋ͯ͠Δαʔόʔʢࠓճ͸ Keycloakʣ

Slide 11

Slide 11 text

OpenID Connect ͷ֓ཁ 11 ɾϑϩʔ ɹɾೝՄίʔυϑϩʔ ɹɾΠϯϓϦγοτϑϩʔ ɹɾΫϥΠΞϯτΫϨσϯγϟϧζϑϩʔ ɹɾϦιʔεΦʔφʔύεϫʔυΫϨσϯγϟϧζϑϩʔ

Slide 12

Slide 12 text

OpenID Connect ͷ֓ཁ 12 ɾϑϩʔ ɹɾೝՄίʔυϑϩʔ ɹɾΠϯϓϦγοτϑϩʔ ɹɾΫϥΠΞϯτΫϨσϯγϟϧζϑϩʔ ɹɾϦιʔεΦʔφʔύεϫʔυΫϨσϯγϟϧζϑϩʔ

Slide 13

Slide 13 text

OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 13 ɾ·ͣ RP ͸ IdP ʹରͯ͠ೝՄίʔυͷൃߦΛϦΫΤετ͠ɺೝՄίʔ υͱҾ͖׵͑ʹɺ֤छτʔΫϯΛൃߦ͢Δϑϩʔ ɾϒϥ΢βΛհ͢ͷ͕ೝՄίʔυͷͨΊɺτʔΫϯΛ௚઀ൃߦ͢Δϑ ϩʔʢΠϯϓϦγοτϑϩʔʣͱൺ΂ͯηΩϡϦςΟ໘Ͱ༏Ε͍ͯΔ

Slide 14

Slide 14 text

OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 14

Slide 15

Slide 15 text

OpenID Connect ͷ֓ཁʢύϥϝʔλʣ 15 ઌ΄ͲͷϑϩʔͷਤͰग़͖ͯͨʮݕূʯͱ͍͏ϑϨʔζͰ͕͢ɺओʹ ҎԼͷ߲໨Λݕূ͠·͢ʢଞʹ΋ݕূ͢Δ΋ͷ͸͋ΔͷͰׂ͕͢Ѫʣ ɾstate ɾnonce ɾPKCE → CSRF ΍ϦϓϨΠΞλοΫͷରࡦͱͯ͠ɺੜ੒ɾݕূΛߦ͏ → PKCEͷઆ໌͸࣌ؒͷ౎߹্ׂѪ

Slide 16

Slide 16 text

OpenID Connect ͷ֓ཁʢstateʣ 16 ɾओʹ CSRF ରࡦͷͨΊͷύϥϝʔλ → RP ͸ཚ਺Λੜ੒͠ɺೝՄίʔυϦΫΤετ࣌ʹ state ͱ͍͏ύϥ ϝʔλͱͯ͠෇༩͢ΔɻIdP ͔ΒೝՄίʔυ͕ൃߦ͞Εͨ࣌ʹɺҰॹʹ ฦ͞ΕΔ state ͷ஋͕ɺੜ੒ͨ͠΋ͷͱಉҰ͔Λݕূ͢Δɻ ※ CSRFɿଞਓʹҙਤͤ͵ϦΫΤετΛૹ৴ͤ͞Δ߈ܸɻࠓճͷέʔε ͷ৔߹ɺଞਓʹ߈ܸऀͷೝՄίʔυΛ࢖༻ͤ͞ɺ߈ܸऀͷΞΧ΢ϯ τͰϩάΠϯͤ͞Δ

Slide 17

Slide 17 text

OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 17 state Λੜ੒ state Λݕূ

Slide 18

Slide 18 text

OpenID Connect ͷ֓ཁʢnonceʣ 18 ɾओʹϦϓϨΠΞλοΫରࡦͷͨΊͷύϥϝʔλ → RP ͸ཚ਺Λੜ੒͠ɺೝՄίʔυϦΫΤετ࣌ʹ nonce ͱ͍͏ύϥ ϝʔλͱͯ͠෇༩͢ΔɻIdP ͔Β ID τʔΫϯ͕ൃߦ͞Εͨ࣌ʹɺID τʔΫϯʹؚ·ΕΔ nonce ͷ஋͕ɺੜ੒ͨ͠΋ͷͱಉҰ͔Λݕূ͢ Δɻ → state ͱ͸ RP ͕ੜ੒͠ɺݕূΛߦ͏఺͸ಉ͕ͩ͡ɺݕূͷ໨తͱλ Πϛϯά͕ҟͳΔ ※ ϦϓϨΠΞλοΫɿ߈ܸऀ͕ͳΜΒ͔ͷํ๏Ͱ઄औͨ͠ଞਓͷ ID τʔΫϯΛ࢖ͬͯ RP ʹରͯ͠ೝূΛߦ͏߈ܸͷ͜ͱ

Slide 19

Slide 19 text

OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 19 nonce Λੜ੒ nonce Λݕূ

Slide 20

Slide 20 text

ΞδΣϯμ 20 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ

Slide 21

Slide 21 text

Keycloak 21 ɾRedHat ʹΑͬͯ։ൃ͞Ε͍ͯΔ OSS ͷ IAM (Identity and Access Management) πʔϧ ɾOpenID ConnectɺOAuth2.0ɺSAML ͳͲͷඪ४ϓϩτίϧΛαϙʔ τ͍ͯ͠Δ ɾSaaS ൛΋͋Δ

Slide 22

Slide 22 text

Keycloak ଆͷઃఆʢུ֓ʣ 22 ɾKeycloak ͷϛχϚϜઃఆͱͯ͠ҎԼΛ࡞੒͢Δ ɹɾrealmɿςφϯτʹ૬౰͢Δ֓೦ ɹɾclientɿrealm ʹඥͮ͘ΫϥΠΞϯτʢ㲈ΞϓϦ΍αʔϏεʣ ɹɾuserɿKeycloak ͰϩάΠϯ͢ΔϢʔβʔ →ଞʹ΋ role ΍ group ͳͲͷ֓೦͕͋Γ·͕͢ɺࠓճ͸লུ

Slide 23

Slide 23 text

Keycloak ଆͷઃఆ಺༰֬ೝ 23

Slide 24

Slide 24 text

React ଆͷઃఆ಺༰֬ೝ 24

Slide 25

Slide 25 text

ΞδΣϯμ 25 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ

Slide 26

Slide 26 text

OpenID Connect ͷ֓ཁʢೝՄϦΫΤετʣ 26

Slide 27

Slide 27 text

ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢೝՄϦΫΤετʣ 27

Slide 28

Slide 28 text

OpenID Connect ͷ֓ཁʢೝՄίʔυϨεϙϯεʣ 28

Slide 29

Slide 29 text

ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢೝՄίʔυϨεϙϯεʣ 29

Slide 30

Slide 30 text

OpenID Connect ͷ֓ཁʢτʔΫϯϦΫΤετʣ 30

Slide 31

Slide 31 text

ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢτʔΫϯϦΫΤετʣ 31

Slide 32

Slide 32 text

OpenID Connect ͷ֓ཁʢUserInfoϦΫΤετʣ 32

Slide 33

Slide 33 text

ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢUserInfoϦΫΤετʣ 33

Slide 34

Slide 34 text

OpenID Connect ͷ֓ཁʢstate ͷݕূʣ 34

Slide 35

Slide 35 text

ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢstate ͷݕূʣ 35

Slide 36

Slide 36 text

OpenID Connect ͷ֓ཁʢnonce ͷݕূʣ 36

Slide 37

Slide 37 text

ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢnonce ͷݕূʣ 37

Slide 38

Slide 38 text

ΞδΣϯμ 38 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ

Slide 39

Slide 39 text

ߟྀ఺ͱ஫ҙࣄ߲ 39 ɾOpenID Connect ϑϩʔ͸ෳࡶ͕ͩɺ౰વϢʔβʔͷૢ࡞͢Δը໘͔ Β͸ͦͷෳࡶ͞Λҙࣝ͢Δ͜ͱ͸ͳ͍ →த਎ͰͲͷΑ͏ͳಈ͖Λ͍ͯ͠Δ͔஌͓ͬͯ͘͜ͱ͕େࣄ ɾϥΠϒϥϦΛ࢖͏৔߹͸Α͠ͳʹ΍ͬͯ͘Ε͍ͯΔ͕ɺΫϥΠΞϯ τଆͰ͸ state ΍ nonce ͷݕূΛߦ͏͜ͱͰ CSRF ͳͲͷ߈ܸΛ๷͙ ࢓૊Έ͕͋Δɻ →ϥΠϒϥϦΛ࢖Θͳ͍৔߹͸͜ͷลΓΛ͔ͬ͠Γݕূ͢Δඞཁ͕͋ Δ

Slide 40

Slide 40 text

ΞδΣϯμ 40 ɾ·ͣ͸σϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀ఺ͱ஫ҙࣄ߲ ɾ͓ΘΓʹ

Slide 41

Slide 41 text

͓ΘΓʹ 41 ɾOpenID Connect Ͱ͸ state ΍ nonce ͳͲͷύϥϝʔλΛ༻͍ͯ CSRF ͳͲͷ߈ܸΛ๷͙࢓૊Έ͕උΘ͍ͬͯ·͢ɻࠓ೔ͷઆ໌Λฉ͍ ͯɺ΋ͬͱਂ͘ௐ΂ͯΈ͍ͨͱࢥͬͯ΋Β͑ͨΒ޾͍Ͱ͢ɻ ຊ೔ͷηογϣϯͷײ૝͸ #devio2023 ΛೖΕͯπΠʔτͯͩ͘͠͞ ͍ʂ

Slide 42

Slide 42 text

No content