카카오톡 로그인 구현(with JavaScript)

카카오톡 로그인 구현하기

• 카카오로 로그인하기 

이걸 구현하기 위해 카카오 개발자 문서와 구글링을 엄청 많이 했다... 그래서 꼭 성공한 후 정리해서 남겨두고 싶었다.

카카오 로그인의 로직은 'Kakao.Auth.authorize()호출'로 카카오톡을 실행하여 동의를 얻으면 '카카오 Auth Server'에서 Redirect URL로 인가 코드를 전달한다. 그 후 토큰을 이용하여 사용자 정보를 받아오게 된다.

 

1. 카카오 SDK 로드
2. 카카오 초기화
3. 카카오로그인 코드 확인
4. 액세스 토큰 발급 후, 함수 호출을 통해 사용자 정보 받아오기
5. 로그아웃 기능- 카카오 서버에 접속하는 액세스 토큰 만료 시키기

 

코드로 로그인부터 로그아웃까지 다 작성하였다.

    <!--1. 카카오 SDK 로드-->
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

    <script type="text/javascript" src="/js/apikey.js"></script>
    <script>
      const KaApiKey = KAKAO_API_KEY;
      //2. 카카오 초기화
      Kakao.init(KaApiKey);
      Kakao.isInitialized();
      //3. 카카오로그인 코드 확인
      function loginWithKakao() {
        Kakao.Auth.login({
          success: function (authObj) {
            console.log(authObj); //access토큰 값
            Kakao.Auth.setAccessToken(authObj.access_token); //access 토큰 값 저장
            getInfo();
          },
          fail: function (err) {
            console.log(err);
          },
        });
      }
      //4. 엑세스 토큰을 발급받고, 아래 함수를 호출시켜 사용자 정보 받아옴.
      function getInfo() {
        Kakao.API.request({
          url: "/v2/user/me",
          success: function (res) {
            console.log(res);
            var id = res.id;
            var profile_nickname = res.kakao_account.profile.nickname;
            localStorage.setItem("nickname", profile_nickname);
            localStorage.setItem("id", id);
            console.log(profile_nickname);
            console.log(id);
          },
          fail: function (error) {
            alert("카카오 로그인 실패" + JSON.stringify(error));
          },
        });
      }

      //5.로그아웃 기능 - 카카오 서버에 접속하는 액세스 토큰을 만료 시킨다.
      function kakaoLogOut() {
        if (!Kakao.Auth.getAccessToken()) {
          alert("로그인을 먼저 하세요.");
          return;
        }
        Kakao.Auth.logout(function () {
          alert("로그아웃" + Kakao.Auth.getAccessToken());
        });
      }
    </script>

이렇게 하면 사용자 정보 중에 nickname과 id를 받아와서 localstorage에 저장할 수 있다. 

 

 

더 자세한 내용은 카카오 개발자 문서를 확인하면 된다.

https://developers.kakao.com/docs/latest/ko/kakaologin/js

Kakao Developers

---