[Vue js] 카카오 로그인 연동

1. Kakao Developers 셋팅

 - https://developers.kakao.com

Kakao Developers

로그인 -> 내 애플리케이션 -> 애플리케이션 추가하기로 앱 추가

 

요약 정보 -> JavaScript 키 기록

 

 

플랫폼 -> 사이트 도메인 등록(http://localhost 가능)

 

카카오 로그인 -> ON -> Rdeirect URL 등록

 

 

동의항목 -> 카카오 계정(이메일) 동의

 

 

2. FrontEnd

 

 - public/index.html에 스크립트 추가

<script src="//developers.kakao.com/sdk/js/kakao.js"></script>

 

 - component

<template>
  <section class="test">
    <div v-on:click="kakaoLoginBtn">카카오 연동</div>
  </section>
</template>

<script>

export default {
  name: "test",
  methods: {
    kakaoLoginBtn:function(){

      window.Kakao.init('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx') // Kakao Developers에서 요약 정보 -> JavaScript 키

      if (window.Kakao.Auth.getAccessToken()) {
        window.Kakao.API.request({
          url: '/v1/user/unlink',
          success: function (response) {
            console.log(response)
          },
          fail: function (error) {
            console.log(error)
          },
        })
        window.Kakao.Auth.setAccessToken(undefined)
      }


      window.Kakao.Auth.login({
        success: function () {
          window.Kakao.API.request({
            url: '/v2/user/me',
            data: {
              property_keys: ["kakao_account.email"]
            },
            success: async function (response) {
              console.log(response);
            },
            fail: function (error) {
              console.log(error)
            },
          })
        },
        fail: function (error) {
          console.log(error)
        },
      })
    }
  }
}
</script>

<style scoped>
  .test{ display:flex; justify-content: center; align-items: center; height:100vh; }
  div{ width: 200px; height:40px; background-color:#fdd101; color:white; display:flex; align-items: center; justify-content: center; cursor:pointer; }
</style>

 

 

3. 테스트

 

결과값을 console log로 찍어봤는데 이메일 잘 받음