React로 카카오 소셜로그인 구현

1. Kakao developer

카카오와 연동하기 위해서는 디벨로퍼 사이트로 먼저 가야한다.
https://developers.kakao.com/

사용할 애플리케이션을 등록한다.
테스트 목적으로 만든 것이기 때문에 localhost:3000을 사이트 도메인으로 사용했다

해당 어플리케이션의 사이트 도메인도 등록해줘야한다.

앱 키 중 JavaScript를 사용하기 때문에 우측에 있을 키도 역시 복사 해둔다

2. 라이브러리 설치

npm install react-kakao-login

react-kakao-login을 사용했다

이후 Index.html 파일의 head 태그 안에 있는 title 아래

<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

SDK를 넣어주면 준비가 완료됐다

3. 컴포넌트 작성

import styled from "styled-components";
import KakaoLogin from "react-kakao-login";

const buttonBlock = {
  border: "none",
  borderRadius: "9px",
  fontSize: "17px",
  width: "284px",
  fontWeight: "500",
  height: "32px",
  cursor: "pointer",
  background: "#fae101",
  alignItems: "center",
  display: "flex",
  justifyContent: "center",
  padding: "4px 0px",
};

const ButtoninnerText = styled.h3`
  margin: 0;
  font-size: 14px;
`;

const Kakao = () => {
  
  useEffect(() => {
    if (typeof window !== "undefined") {
      window.Kakao.init(`${process.env.REACT_APP_KAKAO_APP_KEY}`);
    }
  }, []);
  
  return (
    <KakaoLogin
      token={`${process.env.REACT_APP_KAKAO_APP_KEY}`}
      onSuccess={() => console.log("로그인 성공")}
      onFail={(err) => console.error("로그인 실패", err)}
      onLogout={() => console.log("로그아웃")}
      style={buttonBlock}
    >
      <ButtoninnerText>카카오로 로그인</ButtoninnerText>
    </KakaoLogin>
  );
};

export default Kakao;

.env 파일을 만들어서 REACT_APP_KAKAO_APP_KEY라는 변수에 아까 복사해둔 키값을 넣어뒀다
일단 로그인 성공이나 로그아웃 여부를 확인하려고 console.log를 사용하고자 했다

버튼 구현에 성공했고, 눌러본 결과 콘솔 창의 결과물을 확인할 수 있었다.

4. 그 외 오류들

관리자 설정 이슈가 생겼다면

카카오 로그인 활성화를 설정해둬야한다

window.Kakao.init(`${process.env.REACT_APP_KAKAO_APP_KEY}`);

window.Kakao 부분에서 에러가 생길 것이다

(window as any)로 해결하는 방법도 있지만, 일단 types.d.ts 에서

declare global {
  interface Window {
    Kakao: any;
  }
}

window에 Kakao라는 property를 넣는 식으로 했다.
타입 지정을 해주고 싶었는데, 어떤 타입인지 Object로만 나와있어서 지정할 순 없었다

5. 추가적으로

이제 이걸 통해 이메일 등의 정보를 백엔드로 보내야하는데,
아직 그 부분에 대해 미숙해서 공부 중이다.
완성한다면 그에 대한 내용을 추가하도록 하겠다