안녕하세요 상훈입니다.
Vue.js 혹은 React.js (프론트 프레임워크) 에서 카카오로그인을 구현하려고 합니다. 401 에러가 자꾸 뜨면서 코드 값을 줬는데도 토큰을 내뱉지 않더라구요. 그래서 찾아보다가 KakaoDeveloper 에서 작성된 내용중에 저와 같은 케이스가 있는지 여러 사례들을 확인할 수 있었습니다. 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 code 의 값 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
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
