[React] Kakao Login AccessToken 받아오기

https://developers.kakao.com/tool/demo/login/login?method=dynamic

카카오에서 제공해주는 예제를 리액트 기준으로 수정했다. 

사람마다 코딩스타일이 다른 만큼 정말 필수적인 부분만 떼어옴. 

팝업으로 로그인창 띄운 다음에 동의화면 끝나면 콘솔로 access_token, refresh_token, 만료일자 등등등 바로 받아 온다. 

기존 restAPI 키 써서 인가코드 받고 -> 다시 요청 날려서 토큰값 받아오는 것보다 깔끔한 듯. 

 

 

Index.html 

  <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
  <script>Kakao.init("{javascript 앱 키}");</script>

 

Login.js에 들어가는 Kakao Btn

<button id="custom-login-btn" onClick={loginWithKakao}>
      <img
            src="//k.kakaocdn.net/14/dn/btroDszwNrM/I6efHub1SN5KCJqLm1Ovx1/o.jpg"
            width="222"
        alt="카카오 로그인 버튼"
      />
</button>

Login.js에 들어가는 onClick function

function loginWithKakao() {
  Kakao.Auth.login({
    success: function(authObj) {
      console.log(JSON.stringify(authObj));
    },
    fail: function(err) {
      alert(JSON.stringify(err))
    },
  })
}

그러면 콘솔로 값이 막 뜬다. 

내 서비스키를 사용해서 한 번 access_token까지 발급받은 유저는 내 카카오 서비스 회원으로 등록되기 때문에 다시 로그인 버튼을 누르면 동의창이 뜨지 않는다. 

 

값을 백엔드로 넘겨주시면 어케저게 잘 할게요. 화이팅.