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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
中島 義道
August 01, 2023
Programming
6.4k
0
Share
KeycloakとReactで動かして学ぶOpenID Connect
DevelopersIO 2023大阪で発表した資料です。
中島 義道
August 01, 2023
Other Decks in Programming
See All in Programming
最初からAWS CDKで技術検証してもいいんじゃない?
akihisaikeda
4
180
PHP 7.4でもOpenTelemetryゼロコード計装がしたい! / PHPerKaigi 2026
arthur1
1
500
AI Assistants for YourAngular Solutions @Angular Graz, March 2026
manfredsteyer
PRO
0
150
へんな働き方
yusukebe
6
2.9k
Strategy for Finding a Problem for OSS: With Real Examples
kibitan
0
130
事業会社でのセキュリティ長期インターンについて
masachikaura
0
230
脱 雰囲気実装!AgentCoreを良い感じにWEBアプリケーションに組み込むために
takuyay0ne
3
430
Rethinking API Platform Filters
vinceamstoutz
0
8.3k
AI駆動開発がもたらすパラダイムシフト
ryosuke0911
0
110
ファインチューニングせずメインコンペを解く方法
pokutuna
0
270
PHPのバージョンアップ時にも役立ったAST(2026年版)
matsuo_atsushi
0
290
AWS re:Invent 2025の少し振り返り + DevOps AgentとBacklogを連携させてみた
satoshi256kbyte
2
140
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.9k
Facilitating Awesome Meetings
lara
57
6.8k
HDC tutorial
michielstock
1
600
Leo the Paperboy
mayatellez
6
1.6k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
160
GraphQLの誤解/rethinking-graphql
sonatard
75
12k
Building Applications with DynamoDB
mza
96
7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.7k
The Language of Interfaces
destraynor
162
26k
How to Think Like a Performance Engineer
csswizardry
28
2.5k
A Soul's Torment
seathinner
5
2.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
270
14k
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