[Vue.js] 미니프로젝트:로그인 처리 - 카카오 연동
카카오 계정으로 로그인 하기
카카오 개발자 센터 가입
카카오 로그인 서비스를 이용하기 위해서는 먼저 카카오 개발자 센터에 가입을 해야한다.
위 사이트에 접속해서 가입 후 우측 상단의 내 애플리케이션 클릭
내 애플리케이션 추가하면
개발하고 있는 애플리케이션에서 사용할 수 있는 앱 키가 발행이 된다. 네이티브 앱 키, REST API키, JavaScript 키, Admin 키를 확인할 수 있다. Vue.js 내에서 자바스크립트로 구현할 것이기 때문에, JavaScript 키를 사용할 것이다.
- 네이티브 앱 키 : Android, IOS SDK에서 API를 호출할 때 사용한다.
- JavaScript 키 : 자바스크립트 SDK에서 API를 호출할 때 사용한다.
- REST API 키 : REST API를 호출할 때 사용.
- Admin 키 : 모든 권한을 가지고 있는 키
앱 키는 구현하고 있는 애플리케이션 내에서 카카오 로그인 기능을 사용할 떄 인증을 위해 사용된다.
앱 키를 클릭하면 다음과 같이 앱 키를 재발급 받을 수 있는 화면이 나타난다. 애플리케이션을 운영하다가 앱 키가 노출되었을 때 새로 등록할 필요 없이 재발급 받으면 된다.
플랫폼 설정하기
카카오 개발자센터 ‘내 애플리케이션’ 메뉴에서 요약정보를 통해 플랫폼 링크를 클릭한다.
다양한 플랫폼이 있지만 지금은 웹에서 사용할 것이기 때문에 제일 하단의 Web 플랫폼 등록 클릭한다.
사이트 도메인에 ‘http://localhost:8081’을 입력하고 저장버튼 클릭한다.
로컬에서 진행하고 있다면 vue 실행 시 자동으로 8080 포트로 실행된다.(근데 난 왜 8081인지 모르겠네 아무튼 지금 8081로 되니까 8081로 등록) 만일 별도의 도메인 혹은 다른 포트를 사용하고 있다면 현재 컴포넌트를 실행하고 있는 도메인 주소를 입력하면 된다.
사이트 도메인을 등록하고 나면 등록한 사이트 도메인 정보가 나타난다.
하단의 Redirect URI를 등록해야 합니다 라는 글자가 보이는데 옆에 등록하러 가기를 클릭
카카오 로그인 활성화 설정 상태가 OFF로 되어있다. 클릭하자.
OFF 버튼을 클릭하면 위 사진처럼 팝업 화면이 나타난다. 활성화 버튼을 클릭해서 카카오 로그인을 활성화 한다.
Redirect URI 등록 버튼을 클릭한다.
Login.vue 파일을 만들어서 카카오 로그인을 구현할 것이므로 URI에 ‘http://localhost:8081/login’을 입력하고 저장 버튼 클릭.
마지막으로 카카오 로그인을 통해 받아올 사용자 정보를 설정하자.
메뉴에서 ‘내 애플리케이션 -> 제품 설정 -> 카카오 로그인 -> 동의항목’으로 이동
동의 항목은 카카오 로그인으로 서비스를 시작할 떄 동의받는 항목을 설정받는 화면이다. 개인정보와 접근권한이 있다.
카카오 JavaScript SDK 및 앱 키 등록
카카오 로그인 컴포넌트를 구현하기에 앞서 카카오 로그인을 이용하기 위해서는 카카오에서 제공하는 JavaScript SDK를 등록해야 한다.
public -> index.html을 열고 sdk를 추가한다.
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
카카오 개발자 센터에서 애플리케이션을 생성하고 발급받은 JavsScript 앱 키를 등록한다. main.js 파일을 열고 제일 하단에 다음과 같이 앱 키를 추가한다. 등록된 앱 키가 정상적으로 작동하기 위해서는 Vue 프로젝트를 다시 실행해야 한다.(npm run serve)
window.Kakao.init("d45ecb2665288bd02ad1b4f0ce55508d"); // 발급받은 앱 키
댓글남기기