24.09.04 day60 jwt 오류 해결, 카카오 로그인 구현 중

어젠 잘 해결됐던 오류가 다시 생겼다

갑자기 에러가 왜 다시 생겼는지 알 수 없지만 다시 구글링해본 결과 라이브러리의 버전에 영향이 있었다.

jwtdecode의 현 버전은 4.0.0인데 블로그나 지피티에 올라온 건 그 이전 버전이여서 오류가 발생하는 것이였다.

해결법은 기존의 import jwtDecode, { JwtPayload } from "jwt-decode";로 작성한 부분을 import { jwtDecode, JwtPayload } from "jwt-decode";로 괄호 안으로 넣어주면 해결된다고 하는데 이렇게 해결되는 이유가 라이브러리를 가져오는 import의 방식에 있다고 한다.

 

모듈의 기능이 중괄호에 들어가고 안들어가고 하는건 export 방식의 차이라고 해서 모듈을 배포하려면 export를 써줘야 하는데 기본적으로 default가 들어간다. 그러나 중괄호에 담아서 보내면 default를 쓸 필요 없이 인식이 잘 된다. 계속 에러가 났던 이유는 import가 default가 들어간 export를 찾고 있지만 없어서 에러가 발생한 것

import { jwtDecode, JwtPayload } from "jwt-decode";

이제 에러가 안 뜬다. 편안

---

카카오 로그인을 구현하고 있다.

카카오 api developer에서 작성되어있는 로그인 방식인데 구현한 다른 분들의 블로그를 보니까 이메일 로그인 방식에 조금 추가된 것 같다.

먼저 카카오 developer 사이트에서 로그인해서 api를 사용할 애플리케이션을 등록해줘야 한다.본인은 예전에 만들었던게 있어서 그대로 사용했다.

애플리케이션이 만들어지면 api 키들이 발급되는데 이걸 사용해줘야 한다.

그리고나서 플랫폼을 들어가면 해당 카카오api를 사용할 부분을 설정해주는데 개발학습중이기 때문에 localhost로 작성해줬다.

플랫폼을 지정했으면 redirect uri도 작성해줘야 해서 lcoalhost에 oauth를 붙여 작성해줬다.

작성했으면 카카오 로그인 시도 시 뜨는 창에 동의사항을 지정해주는데 이건 나중에 작성해도 괜찮을 것 같아 닉네임, 프로필 사진만 지정해줬다.

 

이제 로그인컴포넌트에 연결해줘야 한다.

import styled from "styled-components";
import kakaoIcon from "../../img/kakao.png";
import React, { useEffect } from "react";

const SocialKakao: React.FC = () => {
  const REST_API_KEY = process.env.REACT_APP_KAKAO_KEY;
  const REDIRECT_URI = "localhost:3001/oauth";
  const kakaoLink = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
  
  const loginHandler = () => {
    window.location.href = kakaoLink;
  };

  return (
    <>
      <KakaoBtnWrapper>
        <KakaoBtn onClick={loginHandler}>
          <img src={kakaoIcon} alt="kakaoIcon" />
          카카오로 시작하기
        </KakaoBtn>
      </KakaoBtnWrapper>
    </>
  );
};
export default SocialKakao;

const KakaoBtnWrapper = styled.div`
  width: 80%;
  margin: 50px auto 0 auto;
`;

const KakaoBtn = styled.button`
  width: 100%;
  border: none;
  border-radius: 7px;
  background-color: #fce436;
  font-size: 14px;
  font-weight: bold;
  padding: 15px 0;
  position: relative;
  cursor: pointer;

  img {
    width: 15px;
    position: absolute;
    left: 5%;
    top: 40%;
  }
`;

만들어놓은 카카오 로그인 버튼에 onClick을 걸어서 카카오가 지정해준 링크로 넘어가도록 하는데 여기서 아까 발급받은 api키와 redirect uri를 지정해야 한다. api키의 경우는 절대 깃허브에 올라가면 안되기 때문에 .env파일을 만들어 그곳에 작성해줘야 한다.

packge.json이 있는 루트 디렉토리에 .env 파일을 만들고 api_key들을 작성해주면 된다.

이동할 페이지의 경로는 kakao에서 제공되는 경로인 것 같다. 다른 사람들도 똑같이 사용하는걸 보니

const kakaoLink = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;

그러면 api key와 redirect uri을 해당 페이지의 param으로 보내게 된다.

많이 보이던 해당 동의 창이 뜨고 이 창을 누르면 로그인이 되게 해야 하는데 여기서 백엔드로 데이터를 보내줄 페이지가 하나 필요하다.

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Redirection = () => {
  const navigate = useNavigate();
  const code = new URL(dococument.location.toString()).searchParams.get("code");
  console.log(code);

  useEffect(() => {
    const headers = {
      "Content-Type": "application/x-www-form-urlencoded",
    };

    axios
      .post(`/api/user/login?code=${code}`, {}, { headers: headers })
      .then((response) => {
        const data = response.data;
        console.log(data);
      })
      .catch((error) => {
        console.error("로그인 실패", error);
      });
  }, [code]);

  return (
    <>
      <div>로그인 중입니다.</div>
    </>
  );
};
export default Redirection;

다른 사람이 작성했던 코드를 참고했는데 이 페이지를 아까 url에 입력한 redirect uri의 경로에 맞게 라우팅을 설정해줘야 하며 위 페이지에서 확인 버튼을 누를 시 이 페이지로 진입하며 백엔드로 요청이 보내진다.

이 후 백엔드에서 요청된 데이터를 받아오는데 성공하면 각자의 방식으로 토큰을 저장해 로그인을 유지하면 된다.

아직 기획에 소셜 로그인시의 api는 정하지 않아서 회의 때 얘기해서 정하려고 하고 에러는 그 때 잡아야지..