OAuth 소셜 로그인 redirect uri 관련 정리

https://developers.kakao.com/docs/latest/ko/kakaologin/common#login-seq

Kakao Developers

 

그동안 내가 이해하고 작업했던 방식은 다음과 같았다.

• 유저가 '카카오로 로그인하기' 버튼을 클릭하면, 이 버튼은 client_id, redirect_uri, response_type=code 등이 포함된 카카오 로그인 URL로 연결된다. 이때 브라우저는 카카오 로그인 화면으로 리디렉션된다.
• 유저가 카카오 로그인 창에서 로그인을 마치고 나면, 카카오 API는 프론트의 redirect_uri로 인가코드(Authorization Code)를 전달한다.(당연하게도 카카오 디벨로퍼스에 설정해놓은 redirect_uri와 일치해야 한다)
• 그러면 프론트는 이 인가코드를 다시 백엔드로 보내고,
• 백엔드는 이 코드를 사용해 카카오 API에 토큰을 요청한 뒤,
• 그 토큰으로 카카오 API에서 사용자 정보를 조회한다.
• 그 정보를 기반으로 회원가입 처리나 로그인 확인을 하고,
• 우리 서비스에서 자체 발급한 JWT 토큰(AT/RT) 등을 프론트에 내려주는 구조로 이해하고 있었다. 

하지만 우연한 기회에 redirect uri는 반드시 프론트일 필요는 없다는 것을 깨닫게 되었다.

• 유저가 '카카오로 로그인하기'와 같은 버튼을 클릭하면, 해당 버튼에는 client_id, redirect_uri, response_type=code 등이 포함된 카카오 로그인 URL → 백엔드 api url을 연결한다. 
• 유저가 카카오 로그인 창에서 로그인을 마치고 나면, 카카오 API는 프론트의 redirect_uri로 → 백엔드의 redirect_uri로 인가코드(Authorization Code)를 전달한다.
• 그러면 프론트는 이 인가코드를 다시 백엔드로 보내고,  
• 백엔드는 이 코드를 사용해 카카오 API에 토큰을 요청한 뒤,
• 그 토큰으로 카카오 API에서 사용자 정보를 조회한다.
• 그 정보를 기반으로 회원가입 처리나 로그인 확인을 하고,
• 우리 서비스에서 자체 발급한 JWT 토큰(AT/RT) 등을 프론트 redirect uri로 넘겨준다. 
  
  • 백엔드에서 모든 처리가 끝나고 이제 다시 프론트 화면으로 리다이렉트 하는데(302)
  • 이 과정에서 response body에 토큰을 넘겨주더라도 브라우저는 302일 때 Location만 처리하고 body를 무시한다고 한다.
  • 따라서 유일하게 url 쿼리스트링으로만 토큰을 전달할 수 있다.

카카오 로그인 화면은 여전히 브라우저에 뜨지만,
인가 코드, 토큰, 사용자 정보 등 오직 백엔드에서만 처리되는 방식이다.

이 방식의 단점은 백엔드에서 최종적으로 프론트로 redirect 할 때 응답 body로 토큰을 보낼 수 없기 때문에 문제가 된다.
그렇다면 쿼리스트링으로 토큰을 넘길 수밖에 없어서 보안상 위험하다.

물론 이 방식은 서버 렌더링 기반의 전통적인 구조에서 흔히 사용되던 방식이다.
SPA 구조에서는 JS가 직접 인가코드를 제어하고 토큰을 받을 수 있도록 프론트 redirect 방식이 더 자연스러우며, 이때 PKCE 적용이 반드시 필요하다

하지만 새로운 관점으로 알게 되었고, 그 과정에서 얕게만 알고 있던 내용을 제대로 짚고 넘어갈 수 있었다.

 

 

관련 포스팅:
https://dogfood.tistory.com/entry/Redirect-URI%EB%8A%94-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C%EC%97%AC%EC%95%BC-%ED%95%A0%EA%B9%8C-%EB%B0%B1%EC%97%94%EB%93%9C%EC%97%AC%EC%95%BC-%ED%95%A0%EA%B9%8C-OAuth-20%EC%97%90-%EB%8C%80%ED%95%B4%EC%84%9C-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0

Redirect URI는 프론트엔드여야 할까? 백엔드여야 할까? (OAuth 2.0에 대해서 알아보기)

 

 

 

추가 참조:

https://jinhos-devlog.tistory.com/entry/Spring-Rest-API-%EC%B9%B4%EC%B9%B4%EC%98%A4-Kakao-OAuth-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0#google_vignette

[SpringBoot] Rest API 카카오 (Kakao) OAuth 로그인 구현하기

 

https://velog.io/@darren-kk/OAuth2.0%EA%B3%BC-PKCE

OAuth2.0과 PKCE