ShockX | 2차 프로젝트 Part.1

카카오소셜로그인 🍉

이번 2차 프로젝트때 처음으로 시도해본 카카오 소셜 로그인! 프론트앤드 <-> 백앤드 뿐만 아니라 카카오까지 연결을 시도를 해야하는거여서 낯설었지만 재밌었다 ㅋㅋ

먼저 카카오 developers을 통해 localhost:3000을 등록하고 JS Key를 발급 받는다.

발급 받은 JS Key를 index.html에 넣는다.

 <script>
      Kakao.init("발급받은키");
      console.log(Kakao.isInitialized());
 </script>

console.log를 보면 true라고 떠있다.

그런 다음에 해야할일은 로그인이 진행될 버튼에 함수를 작성하는 일이다.

먼저 첫 두줄은 카카오와 통신하는 과정이다. 버튼을 눌러 함수가 실행되면 먼저 카카오 로그인 모달이 뜬다. 모달에 아이디와 비밀번호를 입력하면 authObj라는 카카오에서 발행된 토큰이 포함된 객체가 나에게 다시 전달되는데 여기서 받은 access_token을 method: "POST"로 다시 백앤드에게 전달해줘야한다. 백앤드에게 access_token을 전달해주면 백앤드는 그 토큰을 가지고 카카오에게 authorization을 받고 다시 나에게 백앤드에서 발급하는 토큰을 발급해준다.

const loginWithKakao = () => {
    window.Kakao.Auth.login({
      success: function (authObj) {
        fetch(KAKAOAPI, {
          method: "POST",
          headers: {
            Authorization: authObj.access_token,
          },
        })
          .then((res) => res.json())
          .then((res) => {
            console.log(res);
            localStorage.setItem("username", res.user_name);
            localStorage.setItem("Kakao_token", res.access_token);
            if (res.access_token) {
              alert("You are Logged In with Kakao!");
              history.push("/");
            } else alert("Failed to Log In");
          });
      },
      fail: function (err) {
        console.log("Error", err);
      },
    });
  };

사실 이렇게 써놓고 보면 그렇게 복잡한 과정은 아니지만 코드를 작성하기전에 소셜로그인을 할때 어떤식으로 서로 토큰을 주고 받는지 이해하는게 중요한것 같다. 나중에는 구글 로그인도 도전해볼수있기를...!