React 카카오로그인 invalid_client 오류 코드 KOE010

REST API
#1

React로 카카오 로그인을 구현하려 합니다.
Kakao.Auth.authrize를 사용해서 rediretUri/?code=xxxxxxx
인가 코드를 받아오고

fetch("https://kauth.kakao.com/oauth/token", {
    method: "POST",
    headers: {
        'Content-type': 'application/json'
    },
    body: JSON.stringify({
        grant_type : "authorization_code",
        client_id : process.env.REACT_APP_REST_API_KEY,
        redirect_uri : "http://localhost:3000",
        code : kakaoAuthCode,
    })
})
.then(res => res.json())
.then((data)=>{
    console.log(data)
})

Client Secret을 적용하지 않았는데 관련 오류가 뜹니다.
또한 이를 설정하고 진행하여도 마찬가지입니다…

REACT_APP_REST_API_KEY = "xxxxxxxx"로 되어있고
테스트 중이라 redirectUri 는 http://localhost:3000 으로 고정되어있습니다.

#2

같은 오류를 겪은분을 찾아냈습니다.
https://kdinner.tistory.com/92

body를 JSON.stringfy()가 아닌 QueryString 형식으로 줘야했습니다.
따라서

const bodyData = {
    grant_type : "authorization_code",
    client_id : process.env.REACT_APP_REST_API_KEY,
    redirect_uri : process.env.REACT_APP_REDIRECTURI_DEVELOP,
    code : kakaoAuthCode
}
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)
})

로 실행하였더니 잘 받아옵니다.

2개의 좋아요