์•”์‹œ์  ๋ถ€์—ฌ๋Š” ์‚ฌ์šฉ์ž ์ธ์ฆ ๋ฐ ๊ถŒํ•œ ๋ถ€์—ฌ๋ฅผ ์œ„ํ•ด ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ํ”„๋ ˆ์ž„์›Œํฌ์ธ OAuth 2.0์˜ ๊ถŒํ•œ ๋ถ€์—ฌ ํ๋ฆ„ ์œ ํ˜•์ž…๋‹ˆ๋‹ค. ์ด๋Š” ๋‹จ์ผ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(SPA) ๋ฐ ์‚ฌ์šฉ์ž ๋ธŒ๋ผ์šฐ์ €์—์„œ ์™„์ „ํžˆ ์‹คํ–‰๋˜๋Š” ํด๋ผ์ด์–ธํŠธ ์ธก ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์šฉ์œผ๋กœ ํŠน๋ณ„ํžˆ ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ๋ชฉ์ ์€ ์ด๋Ÿฌํ•œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์ด ๋ณ„๋„์˜ ์š”์ฒญ ์—†์ด ๊ถŒํ•œ ๋ถ€์—ฌ ์„œ๋ฒ„์—์„œ ์ง์ ‘ ์•ก์„ธ์Šค ํ† ํฐ์„ ์–ป์„ ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ณ  ์‚ฌ์šฉ์ž๋ฅผ ๋Œ€์‹ ํ•˜์—ฌ ๋ณดํ˜ธ๋œ ๋ฆฌ์†Œ์Šค์— ์•ก์„ธ์Šคํ•˜๋Š” ๋ฐ ํ•„์š”ํ•œ ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์ฒ˜์Œ์—๋Š” JavaScript ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ์ธ์ฆ ์ฝ”๋“œ ํ๋ฆ„์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ๋Œ€์•ˆ์œผ๋กœ ๋„์ž…๋œ ์•”์‹œ์  ๋ถ€์—ฌ์—๋Š” ๋ช‡ ๊ฐ€์ง€ ๊ณ ์œ ํ•œ ๋ณด์•ˆ ์ œํ•œ์ด ์žˆ์Šต๋‹ˆ๋‹ค. PKCE(Proof Key for Code Exchange) ํ๋ฆ„๊ณผ ๊ฐ™์ด SPA ๋ฐ ํด๋ผ์ด์–ธํŠธ ์ธก ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ํŠน๋ณ„ํžˆ ๋งž์ถฐ์ง„ ์ƒˆ๋กญ๊ณ  ๋”์šฑ ์•ˆ์ „ํ•œ ํ๋ฆ„์˜ ์ถœํ˜„์œผ๋กœ ๋งŽ์€ ์ „๋ฌธ๊ฐ€๋“ค์€ ์ด์ œ ์ด๋Ÿฌํ•œ ๋ณด๋‹ค ์•ˆ์ „ํ•œ ๋Œ€์•ˆ์„ ์„ ํ˜ธํ•˜์—ฌ ์•”์‹œ์  ๋ถ€์—ฌ๋ฅผ ํ”ผํ•˜๋Š” ๊ฒƒ์„ ๊ถŒ์žฅํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์•”์‹œ์  ๋ถ€์—ฌ๋Š” OAuth 2.0 ์‚ฌ์–‘์˜ ์ผ๋ถ€๋กœ ๋‚จ์•„ ์žˆ๊ณ  ์ผ๋ถ€ ์‹œ๋‚˜๋ฆฌ์˜ค์—์„œ๋Š” ๊ณ„์† ์‚ฌ์šฉ๋˜๋ฏ€๋กœ ์ž‘๋™ ๋ฐฉ์‹์„ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ์—ฌ์ „ํžˆ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.

์•”์‹œ์  ๋ถ€์—ฌ ํ๋ฆ„์—์„œ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ฐ˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์‚ฌ์šฉ์ž๋ฅผ ๊ถŒํ•œ ๋ถ€์—ฌ ์„œ๋ฒ„๋กœ ๋ณด๋‚ด ์ธ์ฆํ•˜๊ณ  ์š”์ฒญ๋œ ๊ถŒํ•œ(๋ฒ”์œ„)์— ๋Œ€ํ•œ ๋™์˜๋ฅผ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ๊ถŒํ•œ ๋ถ€์—ฌ ์„œ๋ฒ„๋Š” URL ์กฐ๊ฐ์œผ๋กœ ์ง์ ‘ ํฌํ•จ๋œ ์•ก์„ธ์Šค ํ† ํฐ๊ณผ ํ•จ๊ป˜ ์‚ฌ์šฉ์ž๋ฅผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋“ฑ๋ก๋œ ๋ฆฌ๋””๋ ‰์…˜ URI๋กœ ๋‹ค์‹œ ๋ฆฌ๋””๋ ‰์…˜ํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋‹ค์Œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ URL์—์„œ ์•ก์„ธ์Šค ํ† ํฐ์„ ์ถ”์ถœํ•˜๊ณ  ์ด๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž๋ฅผ ๋Œ€์‹ ํ•˜์—ฌ ๋ณดํ˜ธ๋œ ๋ฆฌ์†Œ์Šค์— ์•ก์„ธ์Šคํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ด ํ๋ฆ„์—์„œ๋Š” ์•ก์„ธ์Šค ํ† ํฐ์ด URL์— ๋…ธ์ถœ๋˜์ง€ ์•Š๋„๋ก ๋ณด์žฅํ•˜๋ฏ€๋กœ ์ธ์ฆ ์ฝ”๋“œ ํ๋ฆ„์˜ ์ค‘์š”ํ•œ ๋ณด์•ˆ ๊ธฐ๋Šฅ์ธ ์ธ์ฆ ์ฝ”๋“œ๋ฅผ ์š”์ฒญํ•˜๋Š” ์ค‘๊ฐ„ ๋‹จ๊ณ„๋ฅผ ๊ฑด๋„ˆ๋œ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Ÿฌํ•œ ๋‹จ์ˆœํ™”๋กœ ์ธํ•ด ๋ณด์•ˆ ์œ„ํ—˜์ด ์ฆ๊ฐ€ํ•ฉ๋‹ˆ๋‹ค. ์•”์‹œ์  ๋ถ€์—ฌ ํ๋ฆ„์˜ ์•ก์„ธ์Šค ํ† ํฐ์€ ๋ธŒ๋ผ์šฐ์ € ๊ธฐ๋ก, ์ฐธ์กฐ์ž ํ—ค๋” ๋˜๋Š” ์ž ์žฌ์ ์ธ ์Šคํฌ๋ฆฝํŠธ ์‚ฝ์ž…์„ ํ†ตํ•œ ๊ฐ€๋กœ์ฑ„๊ธฐ์— ๋” ์ทจ์•ฝํ•ฉ๋‹ˆ๋‹ค. ๋˜ํ•œ ์•”์‹œ์  ๋ถ€์—ฌ์—๋Š” ์ƒˆ๋กœ ๊ณ ์นจ ํ† ํฐ์— ๋Œ€ํ•œ ์ง€์›์ด ๋ถ€์กฑํ•˜์—ฌ ํ† ํฐ ๊ด€๋ฆฌ์˜ โ€‹โ€‹์•ˆ์ „์„ฑ๊ณผ ํšจ์œจ์„ฑ์ด ๋–จ์–ด์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ž ์žฌ์ ์ธ ๋ณด์•ˆ ๋ฌธ์ œ์™€ SPA์— ๋” ์ ํ•ฉํ•œ ํ๋ฆ„์˜ ๊ฐ€์šฉ์„ฑ์„ ๊ณ ๋ คํ•  ๋•Œ ์•”์‹œ์  ๋ถ€์—ฌ๋Š” ๋” ์ด์ƒ ์ตœ์‹  ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ ๋ชจ๋ฒ” ์‚ฌ๋ก€๋กœ ๊ฐ„์ฃผ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. PKCE ์ง€์› ์ธ์ฆ ์ฝ”๋“œ ํ๋ฆ„์€ ์ด์ œ SPA ๋ฐ ํด๋ผ์ด์–ธํŠธ ์ธก ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๊ถŒ์žฅ๋˜๋Š” ์ธ์ฆ ํ๋ฆ„์œผ๋กœ, ๋ณด๋‹ค ์•ˆ์ „ํ•˜๊ณ  ์œ ์—ฐํ•œ ์†”๋ฃจ์…˜์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค.

์•”์‹œ์  ๋ถ€์—ฌ๋ฅผ ํ”ผํ•˜๋ผ๋Š” ๊ถŒ์žฅ ์‚ฌํ•ญ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๋ชจ๋“  OAuth 2.0 ์‹ค๋ฌด์ž์—๊ฒŒ๋Š” ํ•ด๋‹น ๋ฉ”์ปค๋‹ˆ์ฆ˜๊ณผ ์ž ์žฌ์  ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค. ๋ฐฑ์—”๋“œ, ์›น ๋ฐ ๋ชจ๋ฐ”์ผ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ƒ์„ฑํ•˜๊ธฐ ์œ„ํ•œ ๊ฐ•๋ ฅํ•œ no-code ํ”Œ๋žซํผ์ธ AppMaster ์˜ ๋งฅ๋ฝ์—์„œ ์‚ฌ์šฉ์ž ์ธ์ฆ ๋ฐ ๊ถŒํ•œ ๋ถ€์—ฌ๋Š” ์ƒ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์ด ํ•„์š”ํ•œ ๋ณด์•ˆ ์š”๊ตฌ ์‚ฌํ•ญ์„ ์ถฉ์กฑํ•˜๋Š”์ง€ ํ™•์ธํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. AppMaster ๋‹ค์–‘ํ•œ ์œ ํ˜•์˜ ํด๋ผ์ด์–ธํŠธ์™€ ์‚ฌ์šฉ ์‚ฌ๋ก€๋ฅผ ์ˆ˜์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‹ค์–‘ํ•œ OAuth 2.0 ํ๋ฆ„ ์˜ต์…˜์„ ์ œ๊ณตํ•˜์—ฌ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ผ๋ฐ˜์ ์ธ ์‹œ๊ฐ„๊ณผ ๋น„์šฉ์˜ ์ผ๋ถ€๋งŒ์œผ๋กœ ์•ˆ์ „ํ•˜๊ณ  ํ™•์žฅ ๊ฐ€๋Šฅํ•˜๋ฉฐ ํšจ์œจ์ ์ธ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ๋•์Šต๋‹ˆ๋‹ค.

AppMaster ์™€ ํ•จ๊ป˜ OAuth 2.0์„ ์‚ฌ์šฉํ•  ๋•Œ ๊ฐœ๋ฐœ์ž๋Š” ์ธ์ฆ ์ฝ”๋“œ ํ๋ฆ„, ๋ฆฌ์†Œ์Šค ์†Œ์œ ์ž ๋น„๋ฐ€๋ฒˆํ˜ธ ์ž๊ฒฉ ์ฆ๋ช… ํ๋ฆ„, ํด๋ผ์ด์–ธํŠธ ์ž๊ฒฉ ์ฆ๋ช… ํ๋ฆ„ ๋ฐ ํ˜„์žฌ ๋” ์ด์ƒ ์‚ฌ์šฉ๋˜์ง€ ์•Š๋Š” ์•”์‹œ์  ๋ถ€์—ฌ๋ฅผ ํฌํ•จํ•˜์—ฌ ํŠน์ • ์š”๊ตฌ ์‚ฌํ•ญ์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ์ธ์ฆ ๋ถ€์—ฌ ์œ ํ˜• ์ค‘์—์„œ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํ•ญ์ƒ ์ตœ์‹  ๋ชจ๋ฒ” ์‚ฌ๋ก€๋ฅผ ๋”ฐ๋ฅด๊ณ  SPA ๋ฐ ํด๋ผ์ด์–ธํŠธ ์ธก ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์— ๋Œ€ํ•œ PKCE ์ง€์› ์ธ์ฆ ์ฝ”๋“œ ํ๋ฆ„๊ณผ ๊ฐ™์ด ๊ฐ€๋Šฅํ•œ ๊ฐ€์žฅ ์ ์ ˆํ•˜๊ณ  ์•ˆ์ „ํ•œ ํ๋ฆ„์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

๊ฒฐ๋ก ์ ์œผ๋กœ ์•”์‹œ์  ๋ถ€์—ฌ๋Š” ์•ก์„ธ์Šค ํ† ํฐ์„ ์–ป๊ธฐ ์œ„ํ•œ ๋” ๊ฐ„๋‹จํ•˜์ง€๋งŒ ๋œ ์•ˆ์ „ํ•œ ์˜ต์…˜์„ ์ œ๊ณตํ•˜๋Š” SPA ๋ฐ ํด๋ผ์ด์–ธํŠธ ์ธก ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์šฉ์œผ๋กœ ์„ค๊ณ„๋œ OAuth 2.0 ์ธ์ฆ ํ๋ฆ„์ž…๋‹ˆ๋‹ค. ์ด๋Š” ์—ญ์‚ฌ์  ์ค‘์š”์„ฑ์„ ๊ฐ–๊ณ  OAuth 2.0 ์‚ฌ์–‘์˜ ์ผ๋ถ€๋กœ ๋‚จ์•„ ์žˆ์ง€๋งŒ PKCE ์ง€์› ์ธ์ฆ ์ฝ”๋“œ ํ๋ฆ„๊ณผ ๊ฐ™์€ ์ตœ์‹  ๋Œ€์•ˆ์€ ํ›จ์”ฌ ๋” ๋‚˜์€ ๋ณด์•ˆ๊ณผ ์œ ์—ฐ์„ฑ์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. AppMaster ์™€ ํ˜‘๋ ฅํ•˜๋Š” ์‚ฌ์šฉ์ž ์ธ์ฆ ์ „๋ฌธ๊ฐ€๋กœ์„œ ์ƒ์„ฑ๋œ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์‚ฌ์šฉ์ž ์ธ์ฆ ํ๋ฆ„์„ ๊ตฌํ˜„ํ•  ๋•Œ ๊ฐ€์žฅ ์•ˆ์ „ํ•˜๊ณ  ํšจ์œจ์ ์ธ ์†”๋ฃจ์…˜์„ ์„ ํƒํ•˜์—ฌ ์—…๊ณ„ ๋ชจ๋ฒ” ์‚ฌ๋ก€ ๋ฐ ์ง€์นจ์„ ์ตœ์‹  ์ƒํƒœ๋กœ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค.