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
5.9k
KeycloakとReactで動かして学ぶOpenID Connect
DevelopersIO 2023大阪で発表した資料です。
中島 義道
August 01, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
TDD 実践ミニトーク
contour_gara
0
140
CSC305 Summer Lecture 04
javiergs
PRO
1
100
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
2
1k
UbieのAIパートナーを支えるコンテキストエンジニアリング実践
syucream
2
700
ワープロって実は計算機で
pepepper
2
1.4k
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
kazuyasakamoto
0
260
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.2k
🔨 小さなビルドシステムを作る
momeemt
1
430
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
2
2.3k
未来を拓くAI技術〜エージェント開発とAI駆動開発〜
leveragestech
2
180
Flutter로 Gemini와 MCP를 활용한 Agentic App 만들기 - 박제창 2025 I/O Extended Seoul
itsmedreamwalker
0
150
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
How to Ace a Technical Interview
jacobian
279
23k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
Visualization
eitanlees
146
16k
Building an army of robots
kneath
306
46k
Into the Great Unknown - MozCon
thekraken
40
2k
Site-Speed That Sticks
csswizardry
10
780
Unsuck your backbone
ammeep
671
58k
Fireside Chat
paigeccino
39
3.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Balancing Empowerment & Direction
lara
2
580
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