35일차 (소셜 로그인: KaKao)

 소셜 로그인 기능을 구현할 때 프론트엔드의 역할은 비교적 간단하다. REST_API와 REDIRECT_URL을 백엔드 담당자에게 받은 뒤 해당하는 URL로 이동하는 버튼만 만들면 된다.

 

 

맨 처음 

아래와 같은 링크에 {REST_API}와 {REDIRECT_URL}를 해당하는 자리에 넣어주면 된다.

<KakaoButton
              id="login-kakao-btn"
              onClick={() =>
                (window.location.href =
                  "https://kauth.kakao.com/oauth/authorize?client_id={REST_API}&redirect_uri={REDIRECT_URL}&response_type=code")
              }
            >
              <img src={kakaoLogin} />
            </KakaoButton>

 

 

위의 과정이 성공적으로 수행되면

완료 메시지가 나오는 페이지가 나오는데, 그 페이지 주소에 해당하는 컴포넌트를 만들어 필요한 정보를 저장하면 된다.

function Kakao() {
  const navigate = useNavigate();

  // useSearchParams 훅을 사용하여 쿼리 매개변수를 읽어옴
  const [searchParams, setSearchParams] = useSearchParams();

  // code 값을 쿼리 매개변수로부터 가져옴
  const codeParam = searchParams.get("code");

  const { isSuccess, isLoading, isError, data } = useQuery("kakao ", () =>
    kakaoLogin(codeParam)
  );

  if (isLoading) {
    return <div>카카오 로그인 처리 중...</div>;
  }
  if (isSuccess) {
    navigate("/");
  }
  if (isError) {
    return <div>에러 발생</div>;
  }
}

export default Kakao;

위의 과정에서 주의할 점은

isSuccess가 true가 됐을 때 navigate를 실행해야 한다는 점이다. useEffect로 하다간, codeparam의 값을 제대로 저장하지 못하는 일이 발생한다.

 

 

아래의 코드는 위의 과정을 수행할 때 사용하는 API이며, API에 명시된 내용대로만 한다면 큰 오류는 발생하지 않을 것이다.

export const kakaoLogin = async (codeParam) => {
  try {
    const response = await axios.get(
      `https://miniproject.kro.kr/api/user/kakao/callback?code=${codeParam}`
    );
    if (response.status === 200) {
      setCookie("token", response.data.token, {
        path: "/",
        secure: true,
        maxAge: 3000,
      });
      // path: 쿠키가 어디에서 유효하냐 /-> 모든 경로
      // secrue: true http를 사용해야 쿠키 설정 가능
      // 쿠키는 50분 동안 유효(보안 등으로 인해)
    }
  } catch (error) {
    alert(error.response.data.msg);
    return Promise.reject(error);
  }
};