문의 시, 사용하시는 개발환경과 디벨로퍼스 앱ID를 알려주세요.
앱 ID : 1063748
안녕하세요
React와 Nest로 카카오 Oauth 로그인을 구현중입니다.
플로우는 예를들어
/profile 페이지 접근 → 로그인 버튼('/login’이동)->
카카오로그인 버튼(with RedirectURI('http://localhost:3000/profile), clientId) 주소로 이동 ,react에서 카카오로 인가코드 요청 →
http://localhost:3000/profile?code=fdsagsagdsa 로 이동->
/profile 페이지에서 code를 얻고 저희가 만든 backend API call
url: 'http://localhost:3333/auth/login',
method: 'post',
data: {
authorizeCode,
provider,
redirectURI:'http://localhost:3000/profile',
},
→ Nest에서 카카오 token 요청 post api call
'https://kauth.kakao.com/oauth/token',
{
code: authorizeCode,
grant_type: 'authorization_code',
client_id: this.CLIENT_ID,
client_secret: this.CLIENT_SECRET,
redirect_uri:'http://localhost:3000/profile',
},
{
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
},
}
->카카오 token api로 부터 받은 정보로 저희만에 accessToken,RefreshToken 가공해서 client 로 Return
이런 플로우 인데, return 값은 잘 받는데 client에서 AxiosError: Request failed with status code 500 오류와
server에서 AxiosError: Request failed with status code 400 오류가 납니다.
근데 웃긴게 어쩔 때는 에러가 안나고 어쩔때는 에러가 납니다.
에러가 나든 안나든 return 값은 잘 받아옵니다.
저희가 구글, 카카오, 네이버 로그인을 만들고 있는데,
네이버는 오류가 나질 않고 구글,카카오만 오류가 납니다.
구글, 카카오의 공통점은 server에서 토큰 요청 api를 call할때 redirect_uri가 필수적으로 포함된다는 것입니다.
네이버는 필수가 아니였구요.
redirect_uri때문에 문제가 생기는 걸까요?