.post(
https://kauth.kakao.com/oauth/token?grant_type=${GRANT_TYPE}&client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&code=${code},
{
headers: {
“Content-type”: “application/x-www-form-urlencoded;charset=utf-8”,
},
// data: {}
}
)
.then((res) => {
console.log(res: ${res});
window.Kakao.Auth.setAccessToken(res.data.access_token);
window.Kakao.API.request({
현재 accesstoken은 발행됨을 확인하였고, setAccessToken에 값을 넣으려고하니 사진과 같은 오류가 발생하고 있습니다.
어떠한 부분에서 저희가 잘못사용하고있는지 알고싶습니다.
RESTAPIKEY도 넣어서 사용중이며, 앱 ID는 901845입니다
현재 axios 파라미터를 data{}안에 담았더니 koe010이 뜨고있는 상황입니다
tim.l
2
undefined 에러인것을보면 카카오 객체를 인식 못하는 것같은데요.
그에 앞서 JS SDK에 토큰을 세팅하시려는 이유를 알 수 있을까요?
- 자바스크립트를 이용하여 간편로그인(kakao.auth.authorize())를 통해 인가코드를 받아온다.
- 1번의 결과로 반환된 인가코드를 이용하여 Rest API에서 토큰받기를 실행한다.
- 2번의 결과로 주어진 access_token을 이용하여 사용자 정보를 가져온다.
- 사용자 정보를 동의하에 db에 저장하여 사용한다.
이 때 setAccessToken을 이용하여 토큰을 세팅한 뒤 사용자 정보를 요청해야하는 것으로 인지했기에 위와 같이 토큰을 세팅하려 하였습니다.
그런데 위와같은 방법으로 되지않은것도 있고, 프로젝트 멘토님께서 말씀하시기를 REST API로 받지말고 JS로만 가져오는 api를 이용해서 로그인을 구현하라고하셨습니다.
관련해서 두가지 방식중에 더 추천하시거나 옳다고 생각하시는 방식이 있으신지와, 혹여 두가지 방식이 다 틀렸다면 어떤부분에서 저희가 잘못생각하고있는지도 궁금합니다.
tim.l
4
authorize 인가코드 요청 후, http://localhost:3000/login/kakao 로 페이지 리다이렉트되고 해당 페이지에서
카카오 JS SDK 로드 및 앱키 초기화설정 다시 하셨나요?
학습용으로 간단히 테스트해볼 목적이라면 Front에서 액세스 토큰 사용하셔도 무방하나
access_token은 Backend에서만 관리하시는 것을 권장합니다.
보안 권장사항 2.2. 액세스 토큰 보안 Kakao Developers
