안녕하세요 spring security 와 react Typescript 를 사용해서 oauth2 로그인 작업 중입니다.
로컬환경에서 프론트 (32:3000) 백(32:121212) 이런식으로 띄워놓고 작업 하면 잘 되는데
개발서버는 150 IP에 배포해서 프론트 프록시를 32:121212 → 150:121212로 바꿔서 실행을 합니다.
로그인, 동의 후 사용자 인증을 거친뒤 서비스 내에 AuthenticationSuccessHandler가 작동해서 JWT 토큰을 생성해 쿠키에 저장하고 프론트로 redirect 시키는 구조입니다.
문제는 로컬, 개발 둘 다 kakao에 accesstoekn, 회원정보 요청을 잘 해오고 successhandler까지 잘 넘어오는데
원래 요청했던 프론트엔드 경로로 redirect 시 token정보가 넘어오지 않는 문제가 생겨서 이 문제를 어떻게 처리해야할까 고민중입니다.
로컬 환경에서 로그인, 동의 후(인가코드 redirect) redirect경로는 32:121212(백엔드) 의 config 클래스에 선언해놓은 oauth2Login ProcessingUrl로 설정하고,
개발 환경에서 로그인, 동의 후(인가코드 redirect) redirect경로는 150:121212(백엔드) 의 oauth2LoginoauthProcessingUrl 입니다.
안녕하세요.
확인을 위해 앱 ID 부탁드립니다.
앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다
ex) 123456
(1) 로그상 아래 에러가 몇개 보이는데요. 인가코드요청과 액세스토큰 발급 요청간에 사용한 redirect uri 파라메터가 일치하지 않아 발생한 에러입니다.
{"error":"invalid_grant","error_description":"Redirect URI mismatch.","error_code":"KOE303"}
case 1)
인가 코드 요청 시, 설정한 redirect uri : http://localhost:12158/socialLogin
토큰 발급 요청 시, 설정한 redirect uri : http://localhost:12158/
case2)
인가 코드 요청 시, 설정한 redirect uri : http://localhost:12158/socialLogin
토큰 발급 요청 시, 설정한 redirect uri : http://localhost:3000/kakaoCallBack
case3)
인가 코드 요청 시, 설정한 redirect uri : http://192.168.0.158:12158/socialLogin
토큰 발급 요청 시, 설정한 redirect uri : http://localhost:12158/socialLogin
(2) 각각의 API 호출 시, 백엔드에서 카카오에서 전달한 응답을 확인해주셔야 디버깅이 가능합니다. 응답을 로깅하면서 개발하시면 좋을 것 같습니다.
여러가지 테스트를 해봤던거라서
현재는 redirect URI파라미터를 똑같이 설정을 해준 상태입니다.
위 에러 말고는 16:40에 인가요청 시 KOE006에러 발생한 것 말고는 특별한 에러는 없는데요.
token정보가 넘어오지 않는 문제가 생겼을때 사용한 인가 코드 기재해주시겠어요?
IXE2YYU3SWzhlancwJy-IDq3SkBbGSO5UDxKe16me3Otj82cs6ZFTAhjZ8X603VyGWQOCgorDKgAAAGKQIEMkQ 입니다!
현재 개발자도구에서 확인했을때 http://192.168.0.158:12158/socialLogin로 리다이렉트가 잘 되어 엑세스토큰, 사용자 정보 조회까지 정상적으로 이루어지고 서비스 내에서 successHandler 가 작동해 jwt 토큰을 쿠키에 담고 ‘http://localhost:3000’ 경로로 redirect 하고있는데 사용자 인증 후에 처리를 보통 어떤 방식으로 구현하는지 잘 모르겠습니다.
카카오 로그인은 문제 해소된 것으로 이해 했고 서비스측 jwt 토큰 처리 관한 문의를 주신거군요.
http://192.168.0.158:12158 으로 리다이렉트하여 액세스 토큰 발급및 사용자 정보조회 jwt 토큰까지 발급했다면 동일 출처정책에 따라 해당 주소에서만 쿠키가 유효합니다.
http://localhost:3000 에서는 기본적으로 해당 쿠키를 사용할 수 없습니다.
아래 게시물들 참고해보시면 좋을 것같습니다.
https://kakao-tam.tistory.com/81
https://velog.io/@pjh612/JWTCORS-이슈-상황에서-쿠키전달
