Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
KeycloakとReactで動かして学ぶOpenID Connect
Search
中島 義道
August 01, 2023
Programming
0
6.2k
KeycloakとReactで動かして学ぶOpenID Connect
DevelopersIO 2023大阪で発表した資料です。
中島 義道
August 01, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
愛される翻訳の秘訣
kishikawakatsumi
3
350
Giselleで作るAI QAアシスタント 〜 Pull Requestレビューに継続的QAを
codenote
0
310
これならできる!個人開発のすゝめ
tinykitten
PRO
0
130
Patterns of Patterns
denyspoltorak
0
380
Cell-Based Architecture
larchanjo
0
150
Implementation Patterns
denyspoltorak
0
140
実はマルチモーダルだった。ブラウザの組み込みAI🧠でWebの未来を感じてみよう #jsfes #gemini
n0bisuke2
3
1.3k
AIコーディングエージェント(NotebookLM)
kondai24
0
240
Vibe codingでおすすめの言語と開発手法
uyuki234
0
130
GISエンジニアから見たLINKSデータ
nokonoko1203
0
190
生成AI時代を勝ち抜くエンジニア組織マネジメント
coconala_engineer
0
27k
AI Agent Dojo #4: watsonx Orchestrate ADK体験
oniak3ibm
PRO
0
110
Featured
See All Featured
Color Theory Basics | Prateek | Gurzu
gurzu
0
150
Speed Design
sergeychernyshev
33
1.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
31
3k
Conquering PDFs: document understanding beyond plain text
inesmontani
PRO
4
2.2k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
0
32
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
240
How to build a perfect <img>
jonoalderson
0
4.8k
The Curse of the Amulet
leimatthew05
0
5k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
286
14k
Music & Morning Musume
bryan
46
7k
Rebuilding a faster, lazier Slack
samanthasiow
85
9.3k
Transcript
,FZDMPBLͱ3FBDUͰಈֶ͔ͯ͠Ϳ 0QFO*%$POOFDU 2023/7/19 খചྲྀ௨ιϦϡʔγϣϯ෦ɹதౡ ٛಓ
ࣗݾհ 2 தౡ ٛಓʢNAKASHIMA Yoshimichiʣ ɾখചྲྀ௨ιϦϡʔγϣϯ෦ ɹɾprismatix ೝূαʔϏε։ൃ
͜ͷൃදͷલఏ 3 ɾOpenID Connect ʹ͍ͭͯษڧ͚ͨ͠Ͳɺ࣮ࡍͷΞϓϦͰͲͷΑ͏ʹ ಈ͍͍ͯΔͷ͔Α͘Θ͔͍ͬͯͳ͍ ɾϥΠϒϥϦʹͤͨΒͳΜͱ͔ͳ͍ͬͯΔͷͰৄ͘͠Α͘Θ͔ͬ ͍ͯͳ͍ →࣮ࡍʹσϞΞϓϦͷಈ͖Λݟͳ͕ΒɺͲͷΑ͏ʹϦΫΤετ͕ૹΒ Ε͍ͯΔͷ͔ϑϩʔͱরΒ͠߹Θͤͳ͕Βݟ͍͖ͯ·͢ɻ
※ Keycloak ͱ React ͷৄ͍͠આ໌ߦ͍·ͤΜɻྃ͝ঝ͍ͩ͘͞
ΞδΣϯμ 4 ɾ·ͣσϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ
ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀͱҙࣄ߲ ɾ͓ΘΓʹ
ΞδΣϯμ 5 ɾ·ͣσϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ
ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀͱҙࣄ߲ ɾ͓ΘΓʹ
·ͣσϞΞϓϦͷಈ͖Λ֬ೝ 6 ࡞ͨ͠σϞΞϓϦͷಈ͖ΛݟͯΈ·͠ΐ͏ʢຯͰ͢ʣ
·ͣσϞΞϓϦͷಈ͖Λ֬ೝ 7
ΞδΣϯμ 8 ɾ·ͣσϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ
ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀͱҙࣄ߲ ɾ͓ΘΓʹ
OpenID Connect ͷ֓ཁ 9 ɾೝՄͷϓϩτίϧͰ͋Δ OAuth 2.0 ΛϕʔεʹɺೝূͷػೳΛՃ ͠ɺϢʔβʔΛࣝผ͢ΔͨΊʹ֦ுͨ͠ͷ ɾOpenID
Connect Λ༻͍Δ͜ͱͰɺΫϨσϯγϟϧใͳͲΛΞϓϦ Ͱ࣋ͭඞཁ͕ͳ͘ɺೝূαʔόʔʹཧΛҠৡͰ͖Δ ɾOAuth 2.0 ͰΞΫηετʔΫϯɾϦϑϨογϡτʔΫϯ͕ൃߦ͞Ε Δ͕ɺOpenID Connect Ͱ ID τʔΫϯ͕ൃߦ͞ΕɺID τʔΫϯΛݕ ূ͢Δ͜ͱͰɺೝূΛߦ͏͜ͱ͕Մೳ
OpenID Connect ͷ֓ཁʢओͳϩʔϧʣ 10 ɾϢʔβʔ ɹɾΞϓϦɾαʔϏεΛར༻͢ΔΤϯυϢʔβʔ ɾRelying PartyʢҎ߱ RP ͱهࡌʣ
ɹɾΞϓϦɾαʔϏεʢࠓճͷ߹ React ΞϓϦʣ ɾIdentity ProviderʢҎ߱ IdP ͱهࡌʣ ɹɾϢʔβʔΛೝূ͠ɺRelying Party ʹରͯ͠ ID τʔΫϯɺΞΫηε ɹɹτʔΫϯʢϦϑϨογϡτʔΫϯʣΛൃߦ͢Δαʔόʔʢࠓճͷ ɹɹ߹ Keycloakʣ ɾϦιʔεαʔόʔ ɹɾϢʔβʔใΛอ͍࣋ͯ͠Δαʔόʔʢࠓճ Keycloakʣ
OpenID Connect ͷ֓ཁ 11 ɾϑϩʔ ɹɾೝՄίʔυϑϩʔ ɹɾΠϯϓϦγοτϑϩʔ ɹɾΫϥΠΞϯτΫϨσϯγϟϧζϑϩʔ ɹɾϦιʔεΦʔφʔύεϫʔυΫϨσϯγϟϧζϑϩʔ
OpenID Connect ͷ֓ཁ 12 ɾϑϩʔ ɹɾೝՄίʔυϑϩʔ ɹɾΠϯϓϦγοτϑϩʔ ɹɾΫϥΠΞϯτΫϨσϯγϟϧζϑϩʔ ɹɾϦιʔεΦʔφʔύεϫʔυΫϨσϯγϟϧζϑϩʔ
OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 13 ɾ·ͣ RP IdP ʹରͯ͠ೝՄίʔυͷൃߦΛϦΫΤετ͠ɺೝՄίʔ υͱҾ͖͑ʹɺ֤छτʔΫϯΛൃߦ͢Δϑϩʔ
ɾϒϥβΛհ͢ͷ͕ೝՄίʔυͷͨΊɺτʔΫϯΛൃߦ͢Δϑ ϩʔʢΠϯϓϦγοτϑϩʔʣͱൺͯηΩϡϦςΟ໘Ͱ༏Ε͍ͯΔ
OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 14
OpenID Connect ͷ֓ཁʢύϥϝʔλʣ 15 ઌ΄ͲͷϑϩʔͷਤͰग़͖ͯͨʮݕূʯͱ͍͏ϑϨʔζͰ͕͢ɺओʹ ҎԼͷ߲Λݕূ͠·͢ʢଞʹݕূ͢Δͷ͋ΔͷͰׂ͕͢Ѫʣ ɾstate ɾnonce ɾPKCE →
CSRF ϦϓϨΠΞλοΫͷରࡦͱͯ͠ɺੜɾݕূΛߦ͏ → PKCEͷઆ໌࣌ؒͷ߹্ׂѪ
OpenID Connect ͷ֓ཁʢstateʣ 16 ɾओʹ CSRF ରࡦͷͨΊͷύϥϝʔλ → RP ཚΛੜ͠ɺೝՄίʔυϦΫΤετ࣌ʹ
state ͱ͍͏ύϥ ϝʔλͱͯ͠༩͢ΔɻIdP ͔ΒೝՄίʔυ͕ൃߦ͞Εͨ࣌ʹɺҰॹʹ ฦ͞ΕΔ state ͷ͕ɺੜͨ͠ͷͱಉҰ͔Λݕূ͢Δɻ ※ CSRFɿଞਓʹҙਤͤ͵ϦΫΤετΛૹ৴ͤ͞Δ߈ܸɻࠓճͷέʔε ͷ߹ɺଞਓʹ߈ܸऀͷೝՄίʔυΛ༻ͤ͞ɺ߈ܸऀͷΞΧϯ τͰϩάΠϯͤ͞Δ
OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 17 state Λੜ state Λݕূ
OpenID Connect ͷ֓ཁʢnonceʣ 18 ɾओʹϦϓϨΠΞλοΫରࡦͷͨΊͷύϥϝʔλ → RP ཚΛੜ͠ɺೝՄίʔυϦΫΤετ࣌ʹ nonce ͱ͍͏ύϥ
ϝʔλͱͯ͠༩͢ΔɻIdP ͔Β ID τʔΫϯ͕ൃߦ͞Εͨ࣌ʹɺID τʔΫϯʹؚ·ΕΔ nonce ͷ͕ɺੜͨ͠ͷͱಉҰ͔Λݕূ͢ Δɻ → state ͱ RP ͕ੜ͠ɺݕূΛߦ͏ಉ͕ͩ͡ɺݕূͷతͱλ Πϛϯά͕ҟͳΔ ※ ϦϓϨΠΞλοΫɿ߈ܸऀ͕ͳΜΒ͔ͷํ๏Ͱऔͨ͠ଞਓͷ ID τʔΫϯΛͬͯ RP ʹରͯ͠ೝূΛߦ͏߈ܸͷ͜ͱ
OpenID Connect ͷ֓ཁʢೝՄίʔυϑϩʔʣ 19 nonce Λੜ nonce Λݕূ
ΞδΣϯμ 20 ɾ·ͣσϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ
ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀͱҙࣄ߲ ɾ͓ΘΓʹ
Keycloak 21 ɾRedHat ʹΑͬͯ։ൃ͞Ε͍ͯΔ OSS ͷ IAM (Identity and Access
Management) πʔϧ ɾOpenID ConnectɺOAuth2.0ɺSAML ͳͲͷඪ४ϓϩτίϧΛαϙʔ τ͍ͯ͠Δ ɾSaaS ൛͋Δ
Keycloak ଆͷઃఆʢུ֓ʣ 22 ɾKeycloak ͷϛχϚϜઃఆͱͯ͠ҎԼΛ࡞͢Δ ɹɾrealmɿςφϯτʹ૬͢Δ֓೦ ɹɾclientɿrealm ʹඥͮ͘ΫϥΠΞϯτʢ㲈ΞϓϦαʔϏεʣ ɹɾuserɿKeycloak ͰϩάΠϯ͢ΔϢʔβʔ
→ଞʹ role group ͳͲͷ֓೦͕͋Γ·͕͢ɺࠓճলུ
Keycloak ଆͷઃఆ༰֬ೝ 23
React ଆͷઃఆ༰֬ೝ 24
ΞδΣϯμ 25 ɾ·ͣσϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ
ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀͱҙࣄ߲ ɾ͓ΘΓʹ
OpenID Connect ͷ֓ཁʢೝՄϦΫΤετʣ 26
ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢೝՄϦΫΤετʣ 27
OpenID Connect ͷ֓ཁʢೝՄίʔυϨεϙϯεʣ 28
ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢೝՄίʔυϨεϙϯεʣ 29
OpenID Connect ͷ֓ཁʢτʔΫϯϦΫΤετʣ 30
ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢτʔΫϯϦΫΤετʣ 31
OpenID Connect ͷ֓ཁʢUserInfoϦΫΤετʣ 32
ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢUserInfoϦΫΤετʣ 33
OpenID Connect ͷ֓ཁʢstate ͷݕূʣ 34
ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢstate ͷݕূʣ 35
OpenID Connect ͷ֓ཁʢnonce ͷݕূʣ 36
ϦΫΤετͷಈ͖ΛݟͯΈΑ͏ʢnonce ͷݕূʣ 37
ΞδΣϯμ 38 ɾ·ͣσϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ
ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀͱҙࣄ߲ ɾ͓ΘΓʹ
ߟྀͱҙࣄ߲ 39 ɾOpenID Connect ϑϩʔෳࡶ͕ͩɺવϢʔβʔͷૢ࡞͢Δը໘͔ Βͦͷෳࡶ͞Λҙࣝ͢Δ͜ͱͳ͍ →தͰͲͷΑ͏ͳಈ͖Λ͍ͯ͠Δ͔͓ͬͯ͘͜ͱ͕େࣄ ɾϥΠϒϥϦΛ͏߹Α͠ͳʹͬͯ͘Ε͍ͯΔ͕ɺΫϥΠΞϯ τଆͰ state
nonce ͷݕূΛߦ͏͜ͱͰ CSRF ͳͲͷ߈ܸΛ͙ Έ͕͋Δɻ →ϥΠϒϥϦΛΘͳ͍߹͜ͷลΓΛ͔ͬ͠Γݕূ͢Δඞཁ͕͋ Δ
ΞδΣϯμ 40 ɾ·ͣσϞΞϓϦͷಈ͖Λ֬ೝ ɾOpenID Connect ͷ֓ཁ ɾKeycloak ͱ React ͷઃఆ
ɾϦΫΤετͷಈ͖ΛݟͯΈΑ͏ ɾߟྀͱҙࣄ߲ ɾ͓ΘΓʹ
͓ΘΓʹ 41 ɾOpenID Connect Ͱ state nonce ͳͲͷύϥϝʔλΛ༻͍ͯ CSRF
ͳͲͷ߈ܸΛ͙Έ͕උΘ͍ͬͯ·͢ɻࠓͷઆ໌Λฉ͍ ͯɺͬͱਂ͘ௐͯΈ͍ͨͱࢥͬͯΒ͑ͨΒ͍Ͱ͢ɻ ຊͷηογϣϯͷײ #devio2023 ΛೖΕͯπΠʔτͯͩ͘͠͞ ͍ʂ
None