[JavaScript] 쿠키를 이용한 자동 로그인

구현 목표

• 로그인 시 쿠키 생성
• 로그아웃 및 일정 시간이 지나기 전까지는 브라우저가 닫혀도 로그인 상태 유지
• 로그아웃을 하거나 일정 시간이 지나면 자동으로 쿠키 삭제

 

로그인

<div style="position: absolute; width:100%; height: 100%; background-color: #f3f3f3; background-repeat: no-repeat; background-size: cover ;">
	<div class="loginBox">
		<div class="LogoBox">
			<img src="" style="width: 200px;">
		</div>
		<form name="saveForm">	
			<div class="login_id">
				<input type="text" placeholder="아이디" name="USER_ID"/>
			</div>
			<div class="login_pw">
			<input type="password" placeholder="비밀번호" name="USER_PWD" onkeypress="onkey(event);"/>
			</div>
			<div class="auto_login">
			<input type="checkbox" name="auto_login" onclick="is_checked()"> 로그인 유지
			</div>
			<div style="text-align : center;">
			    <button type="button" class="login_button" onclick="login();">로그인</button>
			</div>
		</form>
        <div style="margin-top:8%;">
            <img src="./images/egovframework/example/LG_logo(mini).png" style="width: 50px; display: block; margin: auto;">
            <span style="width: 150px; color:#6e6f71; display: block; margin: auto; margin-top:10px; font-size:80%;">대표전화 070 4333 8844</span>
        </div>
	</div>
</div>

<script type="text/javascript">

$(function(){
	
	var USER_ID = getCookie("USER_ID");
	var USER_PWD = getCookie("USER_PWD");
	
	if(USER_ID != "") {
		$('input[name=USER_ID]').val(USER_ID);	
		$('input[name=USER_PWD]').val(USER_PWD);	
			
		login();
	}
})

function login() {
	
	if($(this).hasClass('active')){ 
		$(this).removeClass('active'); 
	}else{
		$(this).addClass('active');
	}
	
	if($('input[name=USER_ID]').val() == "") {
		
		alert('id를 입력해주세요.');
		
		return false;
	}
	
	if($('input[name=USER_PWD]').val() == "") {

		alert('Password를 입력해주세요.');
		
		return false;
	}
	
	var form = $('form[name=saveForm]');
	var param = getSearchFormData(form);
	
	PostData('./login_check.do', param, login_result);
}

function login_result(data) {
	
	if(data == "success") {
		
		if($('input[name="auto_login"]').is(":checked")) {
			setCookie("USER_ID", $('input[name=USER_ID]').val(), 10000000);
			setCookie("USER_PWD", $('input[name=USER_PWD]').val(), 10000000);
		}
		
		_go('./linkman_log.do');
	} else {
		alert("등록된 정보가 없습니다.\n관리자에게 문의하시기 바랍니다.");	
	}
	
}

function onkey(e) {
	if (e.keyCode == 13) {
		login();
	}
}

function setCookie(cookieName, value, exdays){
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + exdays);
    
    var cookieValue = escape(value) + ((exdays==null) ? "" : "; expires=" + exdate.toGMTString());
    document.cookie = cookieName + "=" + cookieValue;
}

function getCookie(cookieName) {
    cookieName = cookieName + '=';
    var cookieData = document.cookie;
    var start = cookieData.indexOf(cookieName);
    var cookieValue = '';
    if(start != -1){
        start += cookieName.length;
        var end = cookieData.indexOf(';', start);
        if(end == -1)end = cookieData.length;
        cookieValue = cookieData.substring(start, end);
    }
    
    return unescape(cookieValue);
}

function deleteCookie(cookieName){
    var expireDate = new Date();
    expireDate.setDate(expireDate.getDate() - 1);
    document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}

</script>

 

로그아웃

<ul class="navbar-nav ml-auto">
    <div class="topbar-divider d-none d-sm-block"></div>
       <!-- Nav Item - User Information -->
       <li class="nav-item"><a href="javascript:void(0);" class="nav-link"><span class="mr-2 d-none d-lg-inline text-gray-600 small">${DEPT_NM}</span></a></li>
       <li class="nav-item dropdown no-arrow">
	 <a class="nav-link" href="./logout.do"><img alt="" src="./images/egovframework/example/logout.png" style="height:30px" onclick="javascript:logout();"></a></li>
</ul>

 

function logout() {
	deleteCookie('USER_ID');
	deleteCookie('USER_PWD');
	
	_go('./logout.do');
}

function deleteCookie(cookieName){
	var expireDate = new Date();
    expireDate.setDate(expireDate.getDate() - 1);
    document.cookie = cookieName + "= " + "; expires=" + expireDate.toGMTString();
}

 

 

[참조]

https://inpa.tistory.com/177#%EB%B9%84%EC%97%B0%EA%B2%B0%EC%84%B1(Connectionless)%EA%B3%BC_%EB%B9%84%EC%83%81%ED%83%9C%EC%84%B1(Stateless) 

 

https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%BF%A0%ED%82%A4Cookie-%EB%8B%A4%EB%A3%A8%EA%B8%B0