Redirect_uri 두번 실행으로 400에러

웹에서 카카오 로그인을 구축하고 있습니다.

로그인 버튼 클릭시 javascript 의 Kakao.Auth.authorize 를 실행해서 인증 code를 받았습니다.

그후 브라우저에서 redirect_uri 로 리턴이 되는데, 한번은 kauth.kakao.com/oauth/authorize?client_id=… 주소에서 리턴을 하고,
그후 바로 kakao.js 에서 리다이렉트다시 하면서 위 요청을 취소시키고 access_token을 재 요청 받아 400에러를 리턴합니다.

둘중 하나만 리다이렉트 되게 할수 없나요?

혹은 웹 브라우저에서는 sdk를 쓰지 말고 바로 rest_api 로 요청을 해야하나요?

1

1개의 좋아요

Kakao.Auth.authorize는 인증 코드를 발급하여 서비스 서버의 redirect_uri로 redirect 시킵니다.
위 동작이 rest api를 통한 코드 발급과 동일하나 js sdk 사용 시 카카오톡을 통한 간편로그인으로 코드 발급이 가능하여 웹 브라우저에서는 js sdk를 통한 로그인을 권장합니다.

말씀하신 내용이 무엇인지, 그리고 문제가 무엇인지 이해가 잘 가지 않는데요.
Kakao.Auth.authorize를 호출하였을 때부터 서비스 서버의 redirect_uri로 redirect 하기까지의 과정에 대해서 말씀하신건가요, 혹은 이후에 대해서 말씀하신건가요?
문제를 재현 가능한 URL을 주실 수 있을까요?

답변 감사합니다.

내부적으로 테스트하고 있어서 외부에서 접근은 아직 안되는데요.

문제는 Kakao.Auth.authorize를 호출해서 redirect_uri 로 다시 돌아올때 문제가 됩니다.
지금 체크해보니 이미 카카오 아이디로 로그인되어있는 세션이 있는 상태에서만 발생하네요.

즉, Kakao.Auth.authorize (이미 카카오에 로그인 되어있음) 호출후 바로 redirect_uri 페이지로 돌아옵니다.

이때 redirect_uri로 돌아가는 과정에서 하나는 카카오 웹 kauth.kakao.com/oauth/authorize?client_id=… 주소서 location 으로 돌려주고 그후 바로 또 javascript SDK 에서 페이지 이동을 합니다. sdk 소스 1267라인을 보니 자바 스크립트에서도 리다이렉션을 시키는 코드가 있더군요.

redirect_uri 에서 돌아오면 바로 access_token을 요청하는데 위에 첨부 이미지처럼 두번을 요청하기에 두번째는 에러가 발생합니다.

이미지 보시면 두번 요청이 서로 다른곳에서 바로 이어서 나오는것 보실 수 있을겁니다.
참고로 크롬, 맥에서 테스트중입니다.

1개의 좋아요

현재 증상이 아래와 같다는 말씀이실까요?

  1. Kakao.Auth.authorize를 호출하여 kauth.kakao.com/oauth/authorize 로 이동
  2. 코드 발급되어 redirect_uri로 302 redirect
  3. redirect_uri 서버에서 토큰 발급 후 서비스 페이지로 이동
  4. 다시 Kakao.Auth.authorize 실행 시 오류 발생(sdk 소스 1267 라인)

그리고 혹시 autoLogin 옵션을 사용하고 계신가요?
자동 로그인은 카카오톡 인앱 브라우저에서만 동작해야하는 기능으로 인앱 브라우저가 아닌 경우 에러가 발생합니다. 자동 로그인과 인앱 브라우저 여부 판단에 대해서는 아래 가이드를 참고해 주세요.
https://developers.kakao.com/docs/latest/ko/kakaosync/auto-login

모바일이 아닌 웹브라우저에서의 로그인입니다.
먼저 이미 브라우저안에서 카카오 계정 로그인이 되어있습니다. 다시 아이디 비번 입력할 필요 없죠.

  1. Kakao.Auth.authorize를 호출하여 kauth.kakao.com/oauth/authorize 로 이동
  2. 코드 발급되어 redirect_uri로 redirect
  3. 그와 동시에 두군데서 redirect를 발생하여 이전에 처리중인 페이지가 중지되고 다시 redirect 요청이 옴 (이전 첨부 이미지 1267라인) (kauth.kakao.com/oauth/authorize?client_id=… 에서 리다이렉트 되서 token을 요청하고 추가 정보를 얻고 있는중 sdk에서 리다이렉트를 또해서 이전 프로세스가 중지됨)

즉, 한번의 요청으로 카카오 웹페이지에서의 리다이렉트와 자바스크립트sdk 에서의 리다이렉트가 두번 일어난다는겁니다.

검색을 좀 해보니 400 오류가 난다는 글이 몇개 있어서 보니깐 같은 code로 두번 access_token을 요청하면 400에러를 발생한다고 하더군요. 아마도 그래서 400오류가 나는듯 합니다.

일단 sdk 사용안하고 바로 /oauth/authorize? 로 url 만들어서 로그인처리는 하게했습니다.

모바일에서는 문제 없습니다. pc(맥) 웹브라우저에서 문제가 발생합니다. (크롬)

1개의 좋아요