[Vue.js] 카카오 로그인처리

 

카카오 앱키 발급받은 이후 vue에서 처리하는 법에대한 설명이다.

 

 

 

kakao developers 내에서 앱키를 발급받고 내 애플리케이션 > 제품 설정 > 카카오 로그인 > 동의항목 에서 로그인한 사용자에게 제공받을 정보에 대해 동의 체크를 한다.

 

 

 

내 애플리케이션 > 앱 설정 > 플랫폼 에서 플랫폼을 등록한다. 내 경우엔 web 으로 실행할 예정이라 web 플랫폼을 등록했고, 로컬에서 실행하므로 http://localhost:8080으로 등록했다.

 

public > index.html

index.html 내에 아래 카카오에서 제공하는 Javascript SDK를 등록한다.

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

 

public &amp;gt; src &amp;gt; main.js

 

main.js 파일 내 아래와 같이 카카오에서 발급받은 앱키를 입력해준다.

window.Kakao.init("본인 앱키");

 

 

public &amp;gt; src &amp;gt; views &amp;gt; KakaoLogin.vue

위와같이 vue 코드 작성 후 router를 통해 링크 등록해준다. (나는 /kakaologin 으로 설정)

작성이 되었다면, 서버를 키고 실행결과를 확인한다.

 

 

 

개발자도구에 쿠키가 생성된것이 확인된다.

 

 

이제 카카오에서 response된 사용자 정보를 이용해서 구현할 페이지에서 로그인을 구현하면 된다.