QueryString(부제: 카카오 로그인)

카카오 로그인 오류

js sdk를 이용하여 카카오 로그인을 구현하던 중에 발생하였다.

프론트단에서 카카오로그인으로 인가 코드를 받고 토큰을 받아 와야 로그인이 완료가 되는데 토큰을 못받아 왔다

인가코드는 js sdk를 사용해서 구현을 할 수 있었지만 토큰은 rest API post method를 이용해서 받아와야 했다

export const postAccessCode = (data) => {
  const headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  };
  return axios({
    method: 'post',
    url: KAKAO_PATH.OAUTH_TOKEN,
    headers: headers,
    data: data,
  });
};

필수설정을 모두 마치고 보내보니 KOE010(Bad Client credentials) 에러가 발생하였다

[KOE010 (Bad client credentials) 에러가 발생할 때]

KOE010 (Bad client credentials) 에러가 발생할 때

우리는 client_secret을 활성화 시키지 않았고 header 설정도 했을 뿐만아니라 post 방식으로 요청하였다.

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

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

그러던 중 게시글 하나를 발견하였는데 body에 들어갈 데이터를 json 형식이 아닌 QueryString으로 주어야 한다는 것이다

 

QueryString

QueryString은 데이터를 url주소에 서버와 합의된 데이터 형식을 전달하는것이다

https://www.youtube.com/watch?v=qMwzWk81tVM

`?v=qMwzWk81tVM` 이부분이 QueryString 인 것이다 v 라는 key값과 qMwzWk81tVM 라는 value로 구성이되어 있는것이다.

 

보내야하는 파라미터가 여러개일경우 & 연사자를 이용해서 더 붙일수 있다 순서는 상관하지 않는다.

https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=0&ie=utf8&query=%EA%B2%80%EC%83%89

https://search.naver.com/search.naver?where=nexearch&query=%EA%B2%80%EC%83%89&sm=top_hty&fbm=0&ie=utf8

순서를 바꾸어도 결과는 같다

프론트에서는 어디에서 사용이 될까?

페이지 내에 state나 변수로 저장하면 새로고침 시에 데이터를 유지하고 싶을때 사용한다. 위의 내용은 네이버 검색창에 검색을 한 모습이다.

만약 url이 QueryString사용없이 `https://search.naver.com/search.naver` 이었다면 내 검색어는 변수를 통해서 관리 되고 있다는거고 이는 새로고침시에 모든 변수가 날아가고 내 검색어 또한 사라져 데이터를 가져오지 못하게 되는것이다

새로고침을 했는데 검색결과 창이 사라지면 정말 정말 UX적으로 안좋을 것이다.

 

QueryString으로 변환하기

다시 카카오 로그인으로 넘어와 보겠다 Json코드를 QueryString화 시켜야 한다.

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

다음과 같이 json을 queryString화 할수있다.

const headers = {
    'Content-Type': 'application/x-www-form-urlencoded',
  };
  const queryStringBody = Object.keys(data.data)
    .map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(data.data[k]))
    .join('&');
  return axios({
    method: 'post',
    url: data.url,
    headers: headers,
    data: queryStringBody,
  });

다음과 같은 API를 만들어 성공적으로 카카오 로그인을 할수 있었다.