[javascript]카카오 API로 로그인하기 - javascript, 액세스 토큰 받아오기

Prologue

카카오 로그인을 구현하기 위해 연습용으로 javascript로 만들어보았다. 하지만 나는 react였기 떄문에 다시 만들어야만 했다고...
그래도 혹시 도움이 될까 싶어 이렇게 글을 남긴다!

What?

상기하였듯 카카오 API.
대략적인 가이드 문서 :
https://developers.kakao.com/docs/latest/ko/kakaologin/js
https://developers.kakao.com/sdk/reference/js/release/Kakao.html

How?

카카오 로그인 버튼을 클릭했을 때, KAKAO_AUTH_URL로 이동하게 되고, 카카오 API를 통해 후미에 인가 코드가 붙은 채로 리다이렉트된다.
그 후 화면이 재 렌더되고, 인가 코드를 저장한 후 서버로 발송하는 로직을 통해 구현했다.

사용된 hooks

    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
    <script>
      window.Kakao.init("e4dae92fceb345887914a31277525c73");

      function kakaoLogin() {
        window.Kakao.Auth.login({
          scope: "profile_nickname, profile_image, account_email",
          success: (authObj) => {
            console.log("authObj : ");
            console.log(authObj);

            // 백한테 authobj 속 access토큰만 줌
            // 그 후 authorize를 통해 확인
            window.Kakao.API.request({
              url: "/v2/user/me",
              success: (res) => {
                console.log("success: ");
                console.log(res);
              },
              fail: (res) => {
                console.log(res);
              },
            });
          },
        });
      }

      function kakaoLogout() {
        if (!Kakao.Auth.getAccessToken()) {
          alert("Not logged in.");
          return;
        }
        Kakao.Auth.logout(function () {
          alert("logout ok\naccess token -> " + Kakao.Auth.getAccessToken());
        });
      }
    </script>

HTML 코드

              <a class="loginFacebook" href="javascript:kakaoLogin();"
                ><i class="fab fa-facebook-square"></i> Facebook으로 로그인
              </a>
              <a class="loginFacebook" href="javascript:kakaoLogout();"
                ><i class="fab fa-facebook-square"></i> Facebook으로 로그아웃
              </a>