사용자 정보 가져오기 api 에러

프론트엔드 개발중인데 리액트, ts 사용중입니다. 백엔드 서버에서 access_token을 받아와서 https://kapi.kakao.com/v2/user/me 여기로 사용자 정보를 받아오려고 합니다. 계속 1. code: -2
2. msg: “too long for access token.” 이 에러가 떠서 아무리 검색해도 이 에러에 대해서 자세한 내용을 못찾겠습니다.

const getUserData = await fetch(“https://kapi.kakao.com/v2/user/me”, {
method: “GET”,
headers: {
Authorization: Bearer ${accessToken.accessToken},
“Content-type”: “application/x-www-form-urlencoded;charset=utf-8”,
},
});
const userData = await getUserData.json();
console.log(userData)

이 코드로 작성하였고 백엔드에서 보내준 accessToken값은 eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNSIsImlhdCI6MTcyMDU5OTI2NywiZXhwIjoxNzIwNjAyODY3fQ.jYMYgcv7_lr2TJIRz2SXjEHx-qFORxUzJqksMmrzLLg 입니다.

안녕하세요.

해당 토큰은 카카오에서 발급한 토큰이 아닙니다.
서비스 자체의 jwt로 보입니다.

참고로 카카오에서 전달하는 접근토큰은 jwt 형식이 아닙니다.

감사합니다 백엔드와 의사소통이 너무 안돼서 여쭤봤습니다ㅜㅜ

백엔드에서 접근 토큰을 프론트로 가져와 사용자 정보 가져오기 API를 사용하시는건가요?
아니면, 위 코드는 프론트 서버측 코드 인가요?

백엔드에서 아무 말도 없고 accessToken에 대해서 아무 말도 없길래 프론트로 넘어온 accessToken으로 사용자 정보 가져오기 api를 사용하려고 했습니다

프론트라고 하면 JS나 JS SDK로 사용자 정보 조회 하고자 하신다는 말씀인거요?

카카오 로그인 문서에 나와있는 rest api로 사용자 정보 조회 하려고 했습니다!

제가 궁금한 점은 rest api를 참고 하시어 사용자 정보조회가 이루어 지는 위치 입니다.
사용자 브라우저에서 이루어 지는지 react 를 호스팅하는 프론트 서버인지 궁금합니다.

사용자 브라우저에서 이루어집니다.

상황을 추정해 보건데
서비스측 백엔드에서 이미 카카오 로그인(접근토큰 발급 및 사용자 정보조회)를 처리하고 있고 프론트에는 jwt를 전달하는 것으로 보입니다.

이 경우 카카오로 부터 필요한 일체의 조회는 백엔드가 처리하도록 하는 것을 권장 드립니다

접근토큰을 브라우저로 가져오게 되면 이 정보가 유출되지 않도록 별도 보안에 신경 써야만 합니다.

이러한 이유를 하나로 참고하여 JS SDK v2 부터는 팝업 로그인 방식을 제공하고 있지 않고 있습니다.

또한 특별한 경우가 아니라면 일반적으로 사용자 브라우저로 접근토큰을 가져오는 것은 하지 않도록 가이드 드리고 있습니다.

1개의 좋아요

답변 감사합니다!