카카오 로그인 redirect uri 이슈(서비스 프론트엔드 백엔드 도메인이 다른 경우)

REST API
1

안녕하세요. 프론트는 NEXT.js 13, 백엔드는 자바 스프링 부트로 서비스 개발을 하고 있습니다.
프론트 서버와 백엔드 서버의 도메인이 다른데 redirect uri 설정을 어떻게 해야할지 고민입니다.

프론트(NEXT.js)에서 카카오로그인 클릭 → 로그인 동의 → 카카오 사용자 확인 → 인가 코드를 redirect uri 로 전송 (이때 예를 들어, aaa.com/~~ 이라는 프론트 서버 경로로 인가코드를 받음) → 프론트에서 백엔드로 인가 코드 전달 → 백엔드에서 인가코드로 카카오 api서버에 토큰 발급 요청 → 카카오에서 토큰 발급. 이때 redirect uri 가 bbb.com/~~ 이라면 에러가 나나요?

인가 코드는 프론트 서버 경로인 aaa.com/~~ 에서 받고, 이를 백엔드로 전달해서, 백엔드에서 카카오에 토큰 발급 요청해서, 백엔드가 원하는 bbb.com/~~ 으로 카카오 토큰을 발급 받아서 진행하려고 하는데 접근 방식이 잘못 되었을까요?

redirect uri 는 10개까지 만들 수 있다고 하는데 인가코드 발급 redirect uri 와 토큰 발급 redirect uri 는 무조건 일치가 되어야 되는걸까요?

만약 무조건 일치가 되어야 한다면, 현재 저희 팀 상황에서 어떻게 접근을 하는게 좋을지 조언을 얻을 수 있을런지요.

긴 글 읽어주셔서 감사합니다.

2

안녕하세요.

인가코드 요청과 접근토큰 발급 시 사용되는 redirect_uri 파라미터는 같아야만 합니다.
백앤드에서 프론트측에서 사용한 redirect_uri 파라미터를 사용하시면 문제 없으실 것 같은데요

혹시 프론트에서 사용하는 redirect_uri 패턴이 여러개여서 백앤드에서 특정할수 없어 문의 주신걸까요?

3

빠른 답변 감사합니다!
인가 코드는 프론트 서버 경로인 aaa.com/auth 에서 받고, 이를 백엔드로 전달해서, 백엔드에서 카카오에 토큰 발급 요청하면 인가코드를 받을 때 사용한 aaa.com/auth 로 redirect 되면, 프론트에서 다시 토큰을 백엔드로 전송해야 하는 번거로움이 있어서 질문을 드렸습니다. 제가 혹시 잘못 접근하고 있는지 헷갈리네요.

4

보통 그러한 경우, redirect_uri 에 백앤드 주소를 전달하고,
백앤드에서는 접근토큰 발급 등 후속 처리가 완료되면, 프론트 서버 주소로 302 리디렉션 처리 합니다.

서비스마다 차이는 있겠지만, 이처럼 백앤드 주소를 직접 사용하는 케이스도 있으며, 프론트 웹서비스에서 url rewrite 처리하여 백앤드로 요청으로 전달하기도 합니다.