[REST API] 카카오 로그인 에러 401 해결 :: Unauthorized 에러 (kakao is not defined) / 카카오로그인2단계 - code > token 요청하기

안녕하세요 상훈입니다.

Vue.js 혹은 React.js (프론트 프레임워크) 에서 카카오로그인을 구현하려고 합니다.
그런데 401 에러가 자꾸 뜨면서 코드 값을 줬는데도 토큰을 내뱉지 않더라구요. 그래서 찾아보다가 KakaoDeveloper 에서 작성된 내용중에 저와 같은 케이스가 있는지 여러 사례들을 확인할 수 있었습니다. 
+ 어떤 블로그를 보면서 진행하고있었는데, 거기서는 code만 보내는 걸로 해서 계속 나오는 에러였습니다.
+ axios를 사용하고있었는데, 지속적인 오류가 출력되어 성공하지 못하고 fetch 방식으로 변경하였습니다.

---

✔ 사전 환경 체크!

- Backend(Spring)을 거치지 않고 JS 프론트 프레임워크 (Vue.js, React.js) 에서 전부 처리하려고 합니다.
- 현재는 2단계(token 가져오기)입니다.
   (1단계는 code를 가져오는 단계입니다.)
- 결과 데이터로 [token_type, access_token...] 을 얻어옵니다.

 

✔ 시작!!

일단 필요요소는 다음 사진과 같습니다.

필요요소

const bodyData = {
    grant_type: 'authorization_code',
    client_id: KAKAO_REST_API_KEY,
    redirect_uri: DEV_REDIRECT_URI,
    code: payload,  // 1단계에서 발급받은 코드
    client_secret: CLIENT_ID
  }

1) client_id : 내 어플리케이션 > 앱설정 > 요약정보 > REST API 키
2) redirect_uri :  내 어플리케이션 > 제품설정 > 카카오로그인 > Redirect URI
3) code : 1단계에서 받아온 code의 값
4) client_secret :  내 어플리케이션 > 제품설정 > 카카오로그인 > 보안 > ClientSecret :  코드

 

2) redirect_uri

3) code value

4) client_secret - code

---

 

이렇게 body에 들어갈 내용들을 전부 가지고 REST API (비동기 통신) 으로 값을 요청하고 받아옵니다.

const bodyData = {
    grant_type: 'authorization_code',
    client_id: KAKAO_REST_API_KEY,
    redirect_uri: DEV_REDIRECT_URI,
    code: payload,
    client_secret: CLIENT_ID
}

const queryStringBody = Object.keys(bodyData)
    .map(k => encodeURIComponent(k) + '=' + encodeURI(bodyData[k]))
    .join('&')


fetch('https://kauth.kakao.com/oauth/token', {
    method: 'POST',
    headers: {
      'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    body: queryStringBody
})
.then(res => res.json())
.then((data) => {
  console.log(data)
})

 

저 같은 경우는 Vuex-store를/을 사용하여 action에서 이 내용을 처리하였습니다.

actions: {
	async KakaoLogin ({state, commit}, payload) {
	  const bodyData = { ... }
        
	  const queryStringBody = Object ...
        
	  fetch(... )
	    .then(
	      commit() // 여기서 결과 받아서 처리
	    )
	}
}

 

✔ 결과

성공적으로 값을 받았습니다

console 로 출력하도록 일단 설정하였는데요, 해당 내용은 이제 성공하였습니다.

 

 

Kakao Developers