목차
1. 구현 절차
2. 실행 예시
3. 전체 코드
이전 게시글에서 로그인까지 구현했습니다.
이번엔 이어서 로그아웃 구현해보겠습니다.
다만 실습 중인 웹 페이지 이외에도 카카오 로그인이 되어있을 경우
로그아웃 후 재로그인을 누르면 이미 로그인된 카카오 계정으로 자동 로그인될 수 있습니다.
2020년 10월 경에 카카오에서 업데이트를 해주긴 했습니다. (참고: https://github.com/kakao/kakao_flutter_sdk/issues/29)
이전에 로그인했던 계정으로 재로그인할지, 아니면 다른 계정으로 로그인할지 물어보는 창이 생겼습니다.
제가 원하는 건 완전히 초기화된 로그인 창이 나오는 것입니다.
그렇게는 되지 않기 때문에 일단은 업데이트 전 버전으로 그냥 진행해보겠습니다.
간단하게 구현하겠습니다.
로그인 구현 때 사용한 JSP 파일을 그대로 사용할 겁니다.
1. 구현 절차
① AfterLogin.jsp 에 카카오 Javascript SDK 추가합니다.
<!-- 카카오 로그인 API -->
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
② 간단하게 로그아웃 버튼을 만듭니다.
- a 태그는 자바스크립트의 kakaoLogout() 함수로 이어지게 합니다.
<a href="javascript:kakaoLogout()">로그아웃</a>
③ 자바스크립트에 kakaoLogout() 함수를 작성합니다.
<script>
function kakaoLogout() {
// Javascript SDK 초기화
Kakao.init("Javascript 키");
// 액세스 토큰이 없을 경우
if (!Kakao.Auth.getAccessToken())
{
location.href = "Login.jsp";
}
// 액세스 토큰이 있을 경우
else
{
// 액세스 토큰 초기화하는 함수
Kakao.Auth.logout(function() {
// 성공적으로 초기화되었는지 확인
alert('액세스 토큰: ' + Kakao.Auth.getAccessToken())
location.href = "Login.jsp";
});
}
}
</script>
2. 실행 예시
로그인 후 AfterLogin.jsp 페이지입니다.
'F12' > 상단 'Applications' > 왼쪽 'Storage' > 'Cookies' 를 확인해줍니다.
그냥 확인용입니다.
JSESSIONID와 함께 카카오 로그인 쿠키들이 생성되었습니다.
'F12'를 다시 누르고, 돌아온 AfterLogin.jsp 하단의 '로그아웃'을 눌러줍니다.
액세스 토큰이 잘 지워져 null 값으로 뜹니다.
'확인'을 눌러주면 Login.jsp 로 이어집니다.
이 페이지에서 다시 'F12'로 쿠키를 확인해줍니다.
쿠키가 그대로 남아있습니다.
당연합니다. Kakao.Auth.Logout()은 쿠키를 지우는 게 아니라 액세스 토큰을 지우는 것이기 때문입니다.
쿠키를 하나하나 우클릭 'Delete'로 지워주고 난 뒤에 '카카오 로그인' 버튼을 누르게 되면
아이디 비밀번호를 입력할 수 있는 로그인 창이 열리는 것을 알 수 있습니다.
참고로 자바에서 getCookie로 가져와서 지워주려고 시도해봤지만 카카오 쿠키는 가져와지지 않았습니다.
전체를 다 가져와도... 이름을 특정해도... 도메인을 특정해도...
쿠키를 지워주지 않고 '카카오 로그인' 버튼을 누르면 로그인 되어있는 계정으로 자동 로그인됩니다.
3. 전체 코드
AfterLogin.jsp
<%@ page contentType="text/html; charset=UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>카카오 로그인 예제</title>
</head>
<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<!-- 카카오 로그인 API -->
<script src="https://developers.kakao.com/sdk/js/kakao.js"></script>
<body>
<h1>로그인 성공!</h1>
<hr><br>
로그인 아이디: ${param.kakao_id }
<br><br>
설정한 이름: ${param.kakao_nickname }
<br><br>
프로필 사진: ${param.kakao_image }
<br>
<img src=" ${param.kakao_image }">
<br><br>
액세스 토큰: ${param.kakao_access_token }
<br><br><br>
<a href="javascript:kakaoLogout()">로그아웃</a>
<script>
function kakaoLogout() {
// Javascript SDK 초기화
Kakao.init("Javascript 키");
// 액세스 토큰이 없을 경우
if (!Kakao.Auth.getAccessToken())
{
location.href = "Login.jsp";
}
// 액세스 토큰이 있을 경우
else
{
// 액세스 토큰 초기화하는 함수
Kakao.Auth.logout(function() {
// 성공적으로 초기화되었는지 확인
alert('액세스 토큰: ' + Kakao.Auth.getAccessToken())
location.href = "Login.jsp";
});
}
}
</script>
</body>
</html>
카카오 로그인 API로 로그인, 로그아웃 구현이 끝났습니다.
수고하셨습니다.
참고: 카카오 디벨로퍼스 카카오 로그인 Javascript Document - 로그아웃
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
'REST API' 카테고리의 다른 글
| [Kakao] 카카오 로그인 API - 2. 로그인 구현 (0) | 2021.07.16 |
|---|---|
| [Kakao] 카카오 로그인 API - 1. 설정 (0) | 2021.07.16 |