기본 적으로 kakao developer에서 어플리케이션을 만들어두었다는 전제 하에 시작합니다!
📗 인가 Code 받아오기
Kakao 로그인에서 Token을 발급 받기 전에 우선 인가 Code를 발급받아 와야 한다.
카카오에서 제공하는 그림을 보면 인가 코드를 먼저 받고 토큰을 발급 받아 토큰으로 회원의 정보를 조회하라고 되어 있다.
📄 CDN 적용하기
<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.0.0/kakao.min.js" integrity="sha384-PFHeU/4gvSH8kpvhrigAPfZGBDPs372JceJq3jAXce11bVA6rMvGWzvP4fMQuBGL" crossorigin="anonymous"></script>현재는 2.0.0 버전으로 CDN을 제공하고 있는데 이 부분은 카카오 공식 문서를 참고해서 적용하자.
위 CDN은 index.html에 넣어주면 된다.
<!DOCTYPE html>
<html lang="ko">
<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://t1.kakaocdn.net/kakao_js_sdk/2.0.0/kakao.min.js" integrity="sha384-PFHeU/4gvSH8kpvhrigAPfZGBDPs372JceJq3jAXce11bVA6rMvGWzvP4fMQuBGL" crossorigin="anonymous"></script>
<title>O.un</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>📄 login button 만들기
<template>
<div class="text-center">
<button type="button" class="kakoBtn" @click="kakaoLogin" />
</div>
</template>
<style>
button.kakoBtn {
background-image: url("https://velog.velcdn.com/images/ililil9482/post/09d0b625-db31-48cb-9948-c5d280d6c840/image.png");
background-repeat: no-repeat;
background-size: 100% auto;
margin: 10px;
width: 100px;
height: 50px;
}
</style>
<script>
export default {
name: 'login',
methods: {
kakaoLogin() {
const params = {
redirectUri: process.env.VUE_APP_KAKAO_REDIRECT,
};
window.Kakao.Auth.authorize(params);
},
}
}
</script>
kakao login 버튼을 만들었다.
📄 login redirect 만들기
js로 바로 연결해서 컴포넌트를 만들지 않고 바로 실행할 수 있는 방법도 있는거 같은데... 잘 모르겠다... 일단 컴포넌트에서 mounted를 사용하면 비슷하게 작동할 수 있으니까 그렇게 해보았다. 나중에 이 부분은 js로 대체할 수 있도록 수정할거다.
redirect가 된 url에 해당하는 컴포넌트이다.
<template>
<div class="text-center">
<h1>카카오 로그인 시도 중...</h1>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'kakaoOauth',
async mounted() {
const code = this.$route.query.code;
const kakaoHeader = {
'Authorization': process.env.VUE_APP_KAKAO_ADMIN,
'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
};
console.log("kakao login 실행");
try {
const data = {
grant_type: 'authorization_code',
client_id: process.env.VUE_APP_KAKAO_API,
redirect_uri: process.env.VUE_APP_KAKAO_REDIRECT,
code: code,
};
const queryString = Object.keys(data)
.map(k => encodeURIComponent(k) + '=' + encodeURIComponent(data[k]))
.join('&');
const result = await axios.post('https://kauth.kakao.com/oauth/token', queryString, { headers: kakaoHeader });
console.log('카카오 토큰', result);
return result;
} catch (e) {
alert('실패');
console.log(e);
return e;
}
}
}
</script>axiso를 사용해서 하고 있는데 나중에 fetch로 바꿀 수 있으면 fetch로 바꿔보려고 한다. 대부분 예제들이 axios를 사용하고 있어서 그냥 axios로 사용했다.
콘솔을 찍어보면 다음과 같이 정상적으로 토큰을 가져오는 것도 확인할 수 있다. 이제 이 토큰 값을 그대로 백엔드로 던져서 사용자의 정보를 가져와 회원가입까지 시켜보려고 한다.
코딩을 깔끔하게 하고 싶어하는 초보 개발자 (편하게 글을 쓰기위해 반말체를 사용하고 있습니다! 양해 부탁드려요!) 현재 KakaoVX 근무중입니다!