kakao 로그인 (javascript)

카카오 로그인 구현은 여러방식중에 javascript 기반 구현을 살펴보고자 한다.

 

https://developers.kakao.com/tool/demo/login/login

 

위 카카오 디벨로퍼의 js sdk 데모를 보면 아래와 같이 샘플 코드를 제공한다.

 

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
  integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx" crossorigin="anonymous"></script>
<script>
  Kakao.init('xxx'); // 사용하려는 앱의 JavaScript 키 입력
</script>

<a id="kakao-login-btn" href="javascript:loginWithKakao()">
  <img src="https://k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg" width="222"
    alt="카카오 로그인 버튼" />
</a>
<p id="token-result"></p>

<script>
  function loginWithKakao() {
    Kakao.Auth.authorize({
      redirectUri: 'https://developers.kakao.com/tool/demo/oauth',
    });
  }

  function requestUserInfo() {
    Kakao.API.request({
      url: '/v2/user/me',
    })
      .then(function(res) {
        alert(JSON.stringify(res));
      })
      .catch(function(err) {
        alert(
          'failed to request user information: ' + JSON.stringify(err)
        );
      });
  }
  
  // 아래는 데모를 위한 UI 코드입니다.
  displayToken()
  function displayToken() {
    var token = getCookie('authorize-access-token');

    if(token) {
      Kakao.Auth.setAccessToken(token);
      Kakao.Auth.getStatusInfo()
        .then(function(res) {
          if (res.status === 'connected') {
            document.getElementById('token-result').innerText
              = 'login success, token: ' + Kakao.Auth.getAccessToken();
          }
        })
        .catch(function(err) {
          Kakao.Auth.setAccessToken(null);
        });
    }
  }

  function getCookie(name) {
    var parts = document.cookie.split(name + '=');
    if (parts.length === 2) { return parts[1].split(';')[0]; }
  }
</script>

 

위 코드를 간략하게 분석해보면 화면단에서 카카오 로그인 버튼을 누르면 아래 메소드가 실행되고 카카오 Auth서버로 이동하여 로그인 화면으로 진입하게 된다.

 

  function loginWithKakao() {
    Kakao.Auth.authorize({
      redirectUri: 'https://developers.kakao.com/tool/demo/oauth',
    });
  }

 

여기서  redirectUri가 로그인 후 인가 Code를 받을 주소를 입력한다.

 

로그인 이후 사용자 정보를 가져오는 api를 사용하려면 accessToken 을 발급받아 헤더에 실어서 보내야 하는데 카카오에서 제공하는 예제 샘플에서는 카카오 서버로 redirect가 되고 cookie에 accessToken을 실어서 그걸로 api를 호출하게 되어있다.

 

각자 만든 application에서는 redirectUri로 직접 code를 받고 accessToken을 받아야 활용이 가능할것이다.

 

javascript 버전에서는 redirectUri로 직접 accessToken이 오지 않고 인가 code만 온다. 따라서 아래 API를 이용해서 직접 accessToken을 받아와야 한다.

 

아래  api가 카카오에서 제공하는  accessToken 취득을 위한  api이다. POST 방식으로 호출하고 request body에 client_id와 앞서 습득한 code를 실어서 요청을 하면 응답으로 access_token을 받을 수 있다.

 

api이 성공적으로 되었을때 kakao.Auth.setAccessToken api 로 가져온 토큰을 설정한다.

 

$.ajax({
    type : "POST"
    , url : 'https://kauth.kakao.com/oauth/token'
    , data : {
        grant_type : 'authorization_code',
        client_id : '본인이 할당받은 key입력',
        redirect_uri : 'http://localhost:8080/login',
        code : kakaoCode
    }
    , contentType:'application/x-www-form-urlencoded;charset=utf-8'
    , dataType: null
    , success : function(response) {
        Kakao.Auth.setAccessToken(response.access_token);
        document.querySelector('button.api-btn').style.visibility = 'visible';
    }
    ,error : function(jqXHR, error) {

    }
});

 

그러면 최종적으로 아래 사용자 정보 가져오기 api 를 수행해볼 수 있다.

 

function requestUserInfo() {
    Kakao.API.request({
      url: '/v2/user/me',
    })
      .then(function(res) {
        alert(JSON.stringify(res));
      })
      .catch(function(err) {
        alert(
          'failed to request user information: ' + JSON.stringify(err)
        );
      });
  }

 

아래와 같이 로그인한 사람의 정보가 성공적으로 수신됨을 볼 수 있다.

{
   "id":19564xx,
   "connected_at":"2023-01-26T02:30:03Z",
   "synched_at":"2023-01-26T02:30:03Z",
   "properties":{
      "nickname":"xxx",
      "profile_image":"http://k.kakaocdn.net/dn/yGRXH/zz/zz/img_640x640.jpg",
      "thumbnail_image":"http://k.kakaocdn.net/dn/yGRXH/zz/zz/img_110x110.jpg"
   },
   "kakao_account":{
      "profile_needs_agreement":false,
      "profile":{
         "nickname":"zzz",
         "thumbnail_image_url":"http://k.kakaocdn.net/dn/yGRXH/zz/zz/img_110x110.jpg",
         "profile_image_url":"http://k.kakaocdn.net/dn/yGRXH/zz/zz/img_640x640.jpg",
         "is_default_image":false
      },
      "has_email":true,
      "email_needs_agreement":false,
      "is_email_valid":true,
      "is_email_verified":true,
      "email":"zzz@naver.com",
      "has_phone_number":true,
      "phone_number_needs_agreement":false,
      "phone_number":"+82 10-zzzz-zzzz",
      "legal_name_needs_agreement":false,
      "legal_name":"zzz",
      "legal_birth_date_needs_agreement":false,
      "legal_birth_date":"zzz",
      "legal_gender_needs_agreement":false,
      "legal_gender":"male"
   }
}

 

 

--- The End ---