[리액트] 카카오 로그인 기능 구하기

./src/components/Login.js

 

Pre-requirement - 카카오 개발자 Console 에 들어가 키를 발급 받고 url 를 미리 세팅

 

사이 도메인은 본인의 개발 환경에 따라 세팅 

로컬, live server extention, 라지베리파이 등 해당하는 ip 할당

 

 

 

 

 

npm 설치 대신 script 연결로 대신했다 

    <script src="http://developers.kakao.com/sdk/js/kakao.js"></script> // script 연결
    <script>
      window.Kakao.init('') // kakao JavaScript 키 입력
    </script>

1. window.kakao.init('JAVASCRIPT_KEY') init 함수에 key 값 전달

2. Kakao.Auth.login 에서 scope(범위) 는 카카오 개발자 Console 에서 설정한 개인정보 ID 값 대입

3. url: "/v2/user/me" 을 통해 카카오에서 유저 정보를 호출

import className from "./Login.module.css";

const Login = () => {
  function loginWithKakao() {
    window.Kakao.Auth.login({
      scope: "profile_nickname, account_email, gender",
      success: function (authObj) {
        console.log(authObj);
        window.Kakao.API.request({
          url: "/v2/user/me",
          success: (res) => {
            const kakao_account = res.kakao_account;
            window.location = "/callback";
          },
        });
      },
    });
  }
  return (
    <div>
      <form>
        <div>
          <input placeholder="사용자 아이디 또는 이메일" />
        </div>
        <div>
          <input placeholder="비밀번호" />
        </div>
        <div>
          <button>로그인</button>
        </div>
        <div}>
          <a onClick={loginWithKakao} id="kakao-login-btn">
            <img
              src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg"
              alt="카카오 로그인 버튼"
            />
          </a>
        </div>
      </form>
    </div>
  );
};

export default Login;