카카오 로그인 리다이렉트 URL에 관련해서

REST API
1

안녕하세요 소셜 로그인에 관련해서 공부를 하고 있는 대학생입니다.
다름이 아니라 제가 이때까지 개발을 쭉 해오면서 Redirect_URL을 프론트엔드에서 뒀을때의 환경에서도 개발을 해왔었고 백엔드에서도 뒀을때의 환경에서도 개발을 해왔었는데요.

이번에도 소셜 로그인을 구현을 하게 되어 깊은 고민을 따로 해보는 시간을 갖게 되었습니다.
결론부터 말씀을 드리자면 Redirect_URL 자체는 프론트엔드에서 두기로 하였습니다.
환경은 React + Spring Boot에서 개발을 진행하게 되었고 좀 여러 의문점과 고민이 생겨 문의를 올립니다.

  1. 첫번째 질문은 백엔드에서 Redirect_URL을 뒀을때 프론트엔드에서 두는 것보다 인가 코드를 탈취 당할 가능성도 적고 백엔드 서버 자체내에서 인가 코드를 받아 액세스 토큰을 생성하여 프론트엔드 쪽으로 넘겨주기 때문에 보안상으로도 위험 부담이 적은데
    여러 블로그를 찾아본 결과 서비스를 실제로 상용할때는 보통 프론트엔드 에서 Redirect_URL을 두는게 일반적이라고 합니다.
    진실인가요? 현업에서도 소셜 로그인을 구현할 때 프론트엔드에서 Redirect_URL을 두는게 일반적인건가요?
    만약 그렇다면 왜 그렇죠?

  2. 두 번째 질문은 프론트엔드에서 Redirect_URL을 두게 될 경우 인가코드를 백엔드에게 넘겨줘야되는 상황에서 탈취를 당하는 보안상의 위협을 겪게 되는데도 프론트엔드에서 둬야되나요?

  3. 세 번째 질문은 위의 문제점인 인가코드를 탈취위험성을 방지하기 위해 PKCE를 적용한다고 합니다. 이걸 찾아보니 OAuth2.1이라고 하던데 그러면 만약 프론트엔드 Redirect_URL을 사용하게 된다면 인가 코드를 PKCE 처리를 해주는게 맞을까요? 아니면 카카오 소셜 로그인 API자체 내에서는 이미 처리가 되어있는 인가코드 일까요?

2

안녕하세요.

1,2. redirect_uri 위치
인가코드는 URL에 항상 노출되기에 redirect_uri 위치(프론트/백엔드)가 보안에 결정적이지는 않습니다.
다만, 전달되는 인가코드를 프론트에서 자바스크립트가 제어하지 않도록 가이드 드리고 있습니다.

말씀하신 프론트가 사용자의 브라우저 내에서 자바스크립트로 인가코드를 제어하는 것으로 보이는데
만약 그렇다면 저희는 보안 및 서비스측 버그 위험 등의 이유로 권장하지 않습니다.

하지만, 프론트측 서버를 말씀하시는 거라면 서비스측 아키텍처에 따라 일반적이라고 볼 수 있습니다.
(ex, react를 next.js 와 같은 node 서비스로 제공하고 있다면 node측 앤드포인트)

따라서, 일반적으로 사용자 브라우저에서 자바스크립트로 인가코드를 백엔드로 전달하지 않습니다.

3. PKCE
PKCE는 카카오 로그인이 사용하는 Authorization Code Flow에서 인가코드 교환 과정의 보안을 강화하기 위해 OAuth 2.1에서 필수적으로 사용하도록 지정되어 있는 기술입니다.
카카오 로그인은 OAuth2.0 스팩으로 제공되며 네이티브 SDK를 사용한 카카오 로그인에는 기본 적용되어 있습니다.
PKCE의 code_verifier, code_challenge는 서비스가 관리해야만 하기에 해당 스팩 사용을 원하시는 경우 직접 구현 하시어 사용하셔야만 합니다.
단, 네이티브 SDK의 경우 사용환경 특성상 code_verifier를 SDK가 직접 관리해도 무방 하기에 기본 사용되고 있습니다.

1개의 좋아요
3

감사합니다 좋은 해결책이 되었던 것 같습니다!