React 카카오 로그인

1. 초기 설정

1. kakao developers 홈페이지 접속 후 로그인 (kakao developers link)

2. 상단 메뉴 -> 내 애플리케이션 진입 후 애플리케이션 추가하기 선택
   

   

   애플리케이션 추가 모달 화면

3. 애플리케이션 내용을 입력한 후 저장

4. 좌측 메뉴에서 제품 설정 -> 카카오 로그인 클릭 후 카카오 로그인 활성화

   

5. 아래 동의항목에서 로그인 시 필요한 정보들 체크

   

동의 항목 설정 모달창

6. 좌측 메뉴에서 앱설정 -> 플랫폼 진입 후 Web의 사이트 도메인 등록
   Ex. http://test.com, http://localhost:8080

사이트 도메인 등록 화면

2. 개발

1. 리액트에서 카카오 로그인 모듈 설치

npm i react-kakao-login

2. 로그인 화면에서 모듈 사용
   /login/page.tsx

import KakaoLogin from "react-kakao-login";

export default Login() {

  /** 로그인 실패 */
  const loginFail = () => {
    alert("로그인에 실패하였습니다.");
  };

  /** 로그인 */
  const login = async ({ profile }) => {
    if (!profile) return loginFail();
    const id = profile?.id;
    const name = profile?.kakao_account?.profile?.nickname;
    const email = profile?.kakao_account?.email;

    const form = { id, name, email };
    console.log(form);
  };

  return (
    <KakaoLogin
      token={config.KAKAO_KEY}
      onSuccess={login}
      onFail={loginFail}
      render={({ onClick }) => (
        <button onClick={onClick}>로그인</button>
      )}
    />
  )
}

1. config.KAKAO_KEY는 카카오 개발자 사이트에 앱설정 -> 요약 정보에 Admin키 또는 JavaScript키를 사용하면 된다.

2. <KakaoLogin /> 컴포넌트의 render 속성이 없을 경우 카카오에서 제공하는 로그인 버튼 디자인을 그대로 사용할 수 있다.

3. useLoginForm 속성을 추가 시 로그인할 때 무조건 카카오 로그인 팝업을 띄우게 할 수 있다.

카카오에서 제공하는 로그인 버튼 디자인

3. 완성

로그인 버튼 눌렀을 때 카카오 로그인 모달창