웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
안녕하세요! 로그인과 관련된 기능 구현 소스를 함께 만들어볼까합니다. 제목하여...
자동 로그아웃 구현하기 !! 입니다.
이번에 함께 만들어 볼 자동로그아웃 프로세스는 다음과 같습니다.
* 자동로그아웃 프로세스
- 현재 로그인중인지를 확인한다.
- 쿠키 정보가 존재하는지 확인한다.
- 세션이 존재하는지 확인하다.
- 둘 다 존재하지 않는 경우 로그인을 중단하기 위하여 로그아웃(Log out)페이지로 이동한다.
- 둘 다 존재하는 경우 10분 뒤에 다시 확인한다.
- 둘 다 없는 경우 프로세스를 종료한다.
위 프로세스를 보니 총 6단계로 구분되어집니다. 그럼 이제 하나하나 알아보도록 하겠습니다.
1. 현재 로그인중인지를 확인한다.
; 로그인중인지 확인하기 위하여 쿠키와 세션을 둘 다 사용합니다. 세션만으로 로그인 확인이 가능하지만 쿠키를 사용하는 이유는 사용자의 로그인 이후의 시간을 확인하기 위한 방법으로 쿠키를 이용하는 것이 가장 쉽고 간단하기 때문입니다. 쿠키를 설정할때 시간값을 설정할 수 있어 원하는 시간을 결정하기 매우 좋습니다.2. 쿠키 정보가 존재하는지 확인한다.
; 쿠키의 정보는 document.cookie를 사용합니다. cookie 정보를 얻을 수 있는 함수들이 있으나 간단하게 쿠키 존재 여부만 체크하므로 indexOf()를 사용하도록 하겠습니다. 이 함수는 해당 문자가 존재하는지 확인하여 위치를 반환하는 간단한 함수입니다. 만약 존재할 경우 0보다 큰 숫자를... 아닌 경우 -1을 반환합니다.
- 만약 쿠키명이 imLogin이라면 아래와 같이 검색을 수행합니다.
document.cookie.indexOf(imLogin)
3. 세션이 존재하는지 확인한다.
; 세션 정보의 확인 여부는 세션이 있는 경우 로그인되었다는 것만 확인하면 되므로 logout 링크가 존재하는지를 확인할 것입니다. 사실 현재 세션이 진짜 존재하느냐보다 보여지고 있는 화면이 세션이 있었던 상태였냐가 되겠습니다.
만약 logout 엘리먼트가 logout ID명을 가지고 있다면 아래의 엘리먼트가 존재할 것입니다. 그리고 아래 결과는 true일 것입니다.
if (document.getElementById("logout") !== null) {
hasCookie = true;
}4. 둘 다 존재하지 않는 경우 로그인을 중단하기 위하여 로그아웃(Log out)페이지로 이동한다.
만약 쿠키가 시간이 지났거나 세션이 없는 경우 ... 즉 하나만 존재하는 경우는 로그인이 유지되었으나 현재 로그인 상태가 정상적이지 않음을 의미합니다. 계속 유지되어서는 안되므로 로그아웃을 할 수 있는 로그아웃 페이지로 이동시킵니다. location.replace("/logout/")를 사용합니다.
window.location.replace("/logout/");5. 둘 다 존재하는 경우 10분 뒤에 다시 확인한다.
만약 둘 다 존재한다면? 아직 로그인이 유지되야하는 상황입니다. 이때 로그인을 10분 뒤에 다시 체크하도록 하며 재귀함수를 통해 반복적으로 정상적인 로그아웃이 될때가지 반복하게 됩니다. 참고로 재귀함수는 계속 반복되는 함수입니다. arguments.callee를 사용할 수 있으나 이 프로퍼티는 deprecated 되었으므로 동일한 함수 호출을 사용하였습니다.
6. 둘 다 없는 경우 프로세스를 종료한다.
만약 쿠키와 세션이 없는 경우 로그인이 시도되지 않았던 것으로 판단하여 10분 마다 로그인 체크를 할 이유가 없습니다. 즉 로그인 체크 프로세스를 종료하게됩니다.
이로써 저희가 원하는 로그인 자동 확인 및 로그아웃이 어떻게 만들어질지 알아보았습니다. 최종 소스는 아래와 같습니다.
(function() {
checkLogin(60000); // 1000 밀리세컨드 = 1초
function checkLogin(delay) {
setTimeout(function() {
var hasCookie, hasSession;
var loginCookie = document.cookie.indexOf("myLogin");
if ((loginCookie > 0) && (typeof loginCookie === "number")) {
hasCookie = true;
}
if (document.getElementById("logout") !== null) {
hasSession = true;
}
if (hasCookie && hasSession) {
console.log("isLogin: true");
}
else {
if (hasCookie || hasSession) {
// 둘 중 하나만 존재하는 경우 로그아웃 페이지로 이동시킴
window.location.replace("/includes/signout/");
}
else {
return false;
}
}
checkLogin(60000); // 재귀함수를 사용하여 반복수행함
}, delay);
}
})();
로그아웃이 확실히 되지 않는 경우 많은 문제가 발생가능합니다. 오픈된 장소에서는 다른 사용자가 접근할 수 있고 남아있는 정보를 누군가에 노출될 수 있기때문입니다. 보안을 위하여 자동로그 아웃 프로세스는 반드시 필요하다 말할 수 있습니다.
추가적으로 로그인 시간을 짧게 부여하고 ... 즉 쿠키시간을 짧게 부여하며 대신에 로그인 시간을 연장할 수 있는 간단한 UI 및 프로세스를 제공하는 방법도 있습니다. 이 방법은 보안이 특히 중요한 경우 사용시 더 유리합니다. 우리가 앞서 정한 10분 이라는 시간은 충분히 길 수 있기 때문입니다.
그럼 도움이 되셨길 바랍니다^^
코드 스니펫 widget
아래의 글도 찾고 계시지 않나요?