글 목차
728x90
1. 환경구축
2. HTML 코드 작성
1. 환경 구축
(1) 키 생성
에 접속해서 새 어플리케이션을 생성하여 키를 받는다.
(2) 플랫폼 설정
(3) 카카오 로그인 설정
(4) 받아올 항목 설정
2. HTML 코드 작성
(1) 전체코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<script>
Kakao.init('397de212a30d20206ee83caaf59ef7e8'); //발급받은 키 중 javascript키를 사용해준다.
console.log(Kakao.isInitialized()); // sdk초기화여부판단
</script>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input id="islogin" type="text">
<button onclick="logining();">카카오로그인</button>
<button onclick="ttt()">임시버튼</button>
<script>
Kakao.Auth.setAccessToken(null);
console.log(Kakao.Auth.getAccessToken());
function logining() {
Kakao.Auth.login({
success: function(auth) {
console.log(auth);
Kakao.Auth.setAccessToken(auth.access_token);
Kakao.API.request({
url: '/v2/user/me',
success: function (res) {
console.log(res.kakao_account.profile);
// 이메일, 성별, 닉네임, 프로필이미지
var nickname = res.kakao_account.profile.nickname;
var profile_image = res.kakao_account.profile.thumbnail_image_url;
console.log(nickname, profile_image);
},
fail: function (error) {
alert('카카오 로그인에 실패했습니다. 관리자에게 문의하세요.' + JSON.stringify(error));
}
});
}
});
}
function ttt() {
Kakao.Auth.getStatusInfo(
(r) => console.log(r.status)
);
}
</script>
</body>
</html>(2) 기억해야 할 것 들
a. Kakao는 accessToken을 로컬스토리지에 보관한다 그래서
보는 것처럼 로그인을 하면 로컬 스토리지에 토큰이 저장되고 이는 브라우저가 꺼져도 사라지지 않는다. 그래서 한번 로그인 하면 로그인 정보는 브라우저에 항상 기록된다.
b. 로그인 되어 있는지 확인하는 방법
Kakao.Auth.getStatusInfo(
(r) => console.log(r.status)
);Kakao객체가 로컬스토리지에 접근하여 토큰을 자기 서버에 보낸다. 그래서 StatusInfo를 반환받는다. 만약 token == null 이면 그냥 status속성에 not_connect가 담기고 유효한 토큰이면 connected 유효한 토큰이 아니면 오류가 난다.
c. 로그인 하는 방법
Kakao.Auth.login({
success: function(auth) {
console.log(auth);
}
});로그인 페이지로 가서 로그인 success라는 로그인 성공 콜백 함수를 트리거한다.
d. 토큰 정보를 가져오는 방법
Kakao.API.request({
url: '/v2/user/me',
success: function (res) {
console.log(res.kakao_account.profile);
var nickname = res.kakao_account.profile.nickname;
var profile_image = res.kakao_account.profile.thumbnail_image_url;
console.log(nickname, profile_image);
},
fail: function (error) {
alert('카카오 로그인에 실패했습니다. 관리자에게 문의하세요.' + JSON.stringify(error));
}
});환경구축에서 받고자 했던 정보가 success에 의한 콜백함수의 인자에 담긴다. 그걸 꺼내오면 된다.
e. 로그아웃 하는 방법
Kakao.Auth.logout();이 코드를 실행하면 로컬스토리지가 비게 되고, 로그인 상태가 아닌데 logout하면 에러가 난다.
728x90