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.1k
KeycloakとReactで動かして学ぶOpenID Connect
DevelopersIO 2023大阪で発表した資料です。
中島 義道
August 01, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
DROBEの生成AI活用事例 with AWS
ippey
0
130
Grafana Cloudとソラカメ
devoc
0
170
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
9
1.8k
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
260
SwiftUI Viewの責務分離
elmetal
PRO
1
230
“あなた” の開発を支援する AI エージェント Bedrock Engineer / introducing-bedrock-engineer
gawa
11
1.9k
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
150
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
CI改善もDatadogとともに
taumu
0
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
840
color-scheme: light dark; を完全に理解する
uhyo
3
200
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.2k
Featured
See All Featured
Done Done
chrislema
182
16k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Navigating Team Friction
lara
183
15k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing for humans not robots
tammielis
250
25k
Building Adaptive Systems
keathley
40
2.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
133
33k
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