Vue.js 카카오 로그인 API 적용 2 (개발 툴 적용)

https://usability-coding.tistory.com/20 에서 kakao developers에 설정을 끝냈다 이제 API를 프로젝트에 적용시켜주고 사용하면 되겠다. 여기서부턴 설정하는거보다 더 간단하다.

Vue.js 카카오 로그인 API 적용 1 (kakao Developers 설정)

 

vue 프로젝트를 만들었다는 전제하고 순서대로 정리하겠다.

1. index.html에 SDK코드 편집

public 폴더에 있는데 index.html에 SDK코드를 넣어줘야한다.

적용한 버전은 Auth 2.1 버전이고 SDK와 Key를 입력해주면 kakao API를 사용할수있게된다.

 

찾아보면 sdk를 node로 install받을수있는데, 일단 카카오 API에 적응이되면 사용해볼까 생각중이다.

index.html

<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.1.0/kakao.min.js"
        integrity="sha384-dpu02ieKC6NUeKFoGMOKz6102CLEWi9+5RQjWSV0ikYSFFd8M3Wp2reIcquJOemx"
        crossorigin="anonymous"></script>
<script>window.Kakao.init('본인 앱키')</script>

 

 

2. API호출

설정을 했다면 이제 vue파일에서 로그인 api를 호출하면된다.

이미지는 kakao developers에서 다운로드 가능하다. 개발에 관심있는사람이라면 잘 찾을수있을거라고 생각한다.

 

redirect URI는 자신이 정한 uri를 적어주면된다. 이렇게만하면 로그인 이미지 클릭했을때 카카오 로그인 화면이 뜨게된다.

<script setup>

</script>

<template>
  <div id="app">
    <img src="../assets/1.png" @click="onClickLogin()">

  </div>
</template>

<script>
export default {
  name: "KakaoLogin",
  methods :{
    onClickLogin() {
      window.Kakao.Auth.authorize({
        redirectUri:'https://example.com/oauth'
      })
    }
  }
}

 

실행해본 로그인 화면

---

redirect를 test용으로해놔서 404에러가 나온다. uri를 맞춰주니 잘 되는걸 볼수있다.

간단하게 카카오 로그인 적용하는 방법을 적어봤고 이제 문서를 보면서 토큰유지, 사용자정보를 활용해보면 될거같다. 

 

저는 기능이 되는지 확인이되야 이해가 빠른편이라 먼저 기능을 실행해보고 처음부터 다시 뜯어보는편이라서 기능부터 빠르게 적용해봤는데 저와 비슷한분들이 이 블로그를보고 적용해봤다면 API 문서에 설명을 잘 읽어 보고 올바른 API사용하길 바랍니다 감사합니다~