Rest api와 javascript Spring Oauth2 카카오 로그인 시 302 리다이렉트 관련 문의

안녕하세요.

저희 사이트에서 Spring Oauth2 기반으로 카카오 로그인을 rest api를 사용하여 이용하고 있었습니다.

그런데 rest api로 되어있는 것을 javascript sdk로 변경하여 로그인 구현을 진행하려고 하고 있습니다.

이렇게 진행을 했을 시 카카오 로그인 사이트에서 로그인 후에 저희 사이트에서 로그인이 안되는 현상이 발생합니다.

제가 카카오 사이트에서 봤을때는, 아래 2개의 방식 중 redirect uri에서 code 값 주는게 동일 한 것 같은데, 어디 부분부터 수정을 진행해야할지 모르겠습니다.

조언좀 주시면 감사하겠습니다.

ex) rest api로 호출한 방식과 javascript로 호출한 방식의 차이
<a href="/oauth2/authorization/kakao"><span>카카오로 로그인</span></a>

// Kakao javascript SDK login
Kakao.Auth.authorize({
	redirectUri: redirect  // redirect되는 URL
});

안녕하세요.

확인을 위해 앱 ID 부탁드립니다.


앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다

ex) 123456

안녕하세요.

앱아이디는 386162 입니다.

감사합니다.

혹시 하이브리드 앱으로 개발중이신가요?

네 맞습니다. 하이브리드앱으로 개발중이고, 현재는 웹에서 잘 동작하는지 먼저 테스트를 진행중이였습니다.

CustomOAuth2Provider.java에 대한 설정은 아래와 같습니다.

image

아래 하이브리드 앱 가이드를 참고하여 애플리케이션에 추가 설정 부탁드립니다.

Kakao Developers


Kakao.Auth.authorize를 사용할 경우 카카오톡이 실행 가능하면 카카오톡으로 인증(로그인)을 하게 됩니다.
그동안은 웹페이지에서 로그인이 이루어 지도록 구성되어 톡이 실행된적이 없을거라 생각됩니다.

웹에서 카카오톡으로 로그인하면 백그라운드에서 톡에서 인증이 이루어 졌는지 확인하는 폴링 작업이라는 것을 하게 되는데요. 위의 하이브리드 앱 가이드대로 구현되어 있지 않은경우 폴링작업을 계속 실패하게 되고 로그인이 되지 않게 됩니다.

안녕하세요.

궁금한 점이 있는데요.

일반 웹 브라우저에서는
<a href="/oauth2/authorization/kakao"> 태그를 이용한 웹 브라우저 로그인을 진행하고

안드로이드나 IOS 앱에서 로그인 진행 시에는
javascript SDK를 이용해서
Kakao.Auth.authorize 함수를 이용해야한다는 건가요?

JS SDK를 사용하시면, 카카오톡으로 로그인 가능한 경우 카카오톡이 실행되며 아닌경우 웹으로 동작하게 됩니다.

때문에, a 태그를 이용, 인가코드 발급을 위한 URL로 직접 이동 시켜도 되며 (이 경우 항상 웹페이지로만 동작)
JS SDK를 사용하셔도 됩니다.

보통 톡으로 로그인 가능하면 톡을 실행시키는 편이라 JS SDK를 많이 사용하고 있습니다.

안녕하세요. 늘 도움 주셔서 감사합니다.

해당 내용은 확인하였고, spring으로 rest api를 사용할 때와 javascript sdk로 사용할 때를 비교해보니

아래 내용에 차이가 있어서 이걸 어떻게 해야할지 잘 모르겠습니다.

“/oauth2/authorization/kakao” 경로로 카카오 버튼을 수행하면 spring boot의 CustomOAuth2LoginAuthenticationFilter 클래스를 통하여 CustomOAuth2AuthorizationRequestResolver 클래스가 자동 수행되고, 수행되면서 registrationId 값에다가 kakao를 셋팅하는 것을 확인하였습니다.

그 후 카카오의 로그인을 진행하게 되면 code 값을 가져온 후 token을 가져오는 후속 작업을 진행하게 되는데요.

javascript sdk 로 구현했을 경우, 사전에 호출하는 값이 없어 registrationId의 값을 못받아 오고, 바로 code 값을 파라미터로 던져주던데, 이에 대한 해결방안이 있을까요?

안녕하세요.

아쉽지만, 직접 개발 하셔야 합니다.
redirect_uri를 처리할 수 있는 Controller 또는 AuthenticationFilter를 직접 구현하여 서비스측의 인가 처리를 직접 하셔야 합니다.

Spring Security의 OAuth2를 사용하면 registration, provider 설정으로 간단히 웹 기반의 OAuth2 스팩의 로그인을 사용할 수 있지만 카카오톡으로 인증이 이루어지는 경우 이를 그대로 사용할 수는 없습니다.

안녕하세요. 답변 감사합니다.

그러면 JS SDK의 Kakao.Auth.authorize 함수를 사용할 시, 기존 uri에 대한 정보나, 아니면 추가로 특정 파라미터 값을 전달받을 수 있는 방법이 있을까요?

Spring Oauth 카카오 redirect 시 request referer 정보를 보니, 기존 저희 사이트가 아닌 카카오 계정 사이트로 나오게 되어, 사전 url 정보를 얻을 수 있거나 또는 프로세스에 대한 값을 구분할 수 있는 정의된 파라미터 값을 전달 받을 수 있는 방법이 궁금합니다.

감사합니다.

state 파라미터를 사용하시면, redirect_uri 로 그대로 전달됩니다.
여러 서비스에서 로그인 이후 특정 페이지로 보내기 위해 state 파라미터를 사용하기도 합니다.

테스트는 더 필요하지만, 덕분에 적용 완료하였습니다. 감사합니다.