[팀플] DongneBook_ 자동로그인

 

[ login.jsp ] _ body 부분

<div class="LogoBox">
	    		<img src="img/login/DongneBook_logo.png" alt="mainLogo" id="mainLogo" >
	    	</div>
	    
			<div class="login-form" align="center">
				<form action="./Glogin" method="post" id="frm">
					<div class="form-item idBox">
						<input type="text" name="id" id="id" placeholder="아이디를 입력하세요">
					</div>
					<div class="form-item pwBox">
						<input type="password" name="pw" id="pw" placeholder="패스워드를 입력하세요">
					</div>
					<div class="saveBox">
						<div class="form-item saveIDBox">
							<input type="checkbox" id="saveID"> <label for="saveID">아이디저장</label>
						</div>
						<div class="form-item saveAllBox">
							<input type="checkbox" id="saveAll"> <label for="saveAll">자동로그인</label>
						</div>
					</div>
	
					<div class="form-item loginBtnBox">
						<button type="button" id="loginbtn">로그인</button>
					</div>
				</form>
			</div>
	
			<div class="login-with" align="center">
				<div id="kbtnBox">
					<img src="img/login/login_kakaoBtn.png" alt="kakaoBtn" id="kakao" onclick="kakaoLogin()">
				</div>
				<div id="nbtnBox">
					<img src="img/login/login_naverBtn.png" alt="naverBtn" id="naver" onclick="naverLogin()">
				</div>
			</div>
			
			<div class="forUserBox" align="center">
				<a href="./finduser">아이디 & 비밀번호 찾기 </a> |
				<span></span>
				<a href="./join"> 회원가입</a>
			</div>
		</div>

[ login.jsp ] _ script 부분

    <script type="text/javascript">
		
		// 카카오로그인
		function kakaoLogin(){
			location.href="https://kauth.kakao.com/oauth/authorize?client_id=******&redirect_uri=http://localhost/login/kakao&response_type=code"
		}
		
		//네이버로그인
		function naverLogin(){
			location.href="https://nid.naver.com/oauth2.0/authorize?client_id=******&redirect_uri=http://localhost/login/naver&response_type=code";
		}
		
		
		$(function() {
			
			let sid = getCookie("SuserID");
			let setS = getCookie("setS");
			let userID = getCookie("userID");
			let setY = getCookie("setY");
			
			
			// 자동로그인 기록이 있을때
			if (setS == "S" && ${sessionScope.mid eq null}){
				
				$.ajax({
					url : "./login",
					type : "post",
					data : {sid : sid, setS : setS},
						dataType : "json",
						success : function(data) {
							if(data.auto == 1){
								alert("자동로그인이 진행됩니다.");
								window.location.href = "/";
							} else {
								window.location.href = "/login";
							}
						},
						error : function(error) {
							alert("에러발생");
							}
					});
		
				return false;
			}
			
			// 아이디저장 기록이 있을때
			if(setY == "Y"){
				$("#saveID").prop("checked", true);
				$("#id").val(userID);
			} 
			else{
				$("#saveID").prop("checked", false);
			}
		
			// 로그인버튼 클릭하면 작동
			$("#loginbtn").click(function(){
				
				let id = $("#id").val();
				let pw = $("#pw").val();
		
				if(id == "" || id.length < 3){
					Swal.fire('아이디를 입력해주세요.');
					$("#id").focus();
					return false;
				} 
				
				if(pw.length < 3) {
					Swal.fire('비밀번호를 입력해주세요.');
					$("#pw").focus();
					return false;
				}  
				
				let saveIDT = $("#saveID").is(":checked"); // 아이디저장체크_ true
				let saveAllT = $("#saveAll").is(":checked"); // 자동로그인체크_ true
				
				//자동로그인 체크했다면
				if(saveAllT){
					alert("자동로그인에 체크되었습니다.");
					sid = getCookie("SuserID");
					
					$.ajax({
						url : "./autoCheck",
						type : "post",
						data : {id : id, pw : pw},
							dataType : "json",
							success : function(data) {
								
								if(data.auto == 1){		// 계정일치 => 쿠키저장&로그인
									//alert("S쿠키저장");
									setCookie("SuserID", id, 7);
									setCookie("setS", "S", 7);
									frmsubmit();
									saveIDT = false;
									
								} else if(data.auto == 0){	// 계정불일치
									Swal.fire("정보를 다시 입력해주세요");
								}
							},
							error : function(error) {
								alert("에러발생");
								}
						});
				return false;
				}
				
				
				if(saveIDT) {	// true
					
					//alert("아이디저장");
					setCookie("userID", id, 2);
					setCookie("setY", "Y", 2);
					frmsubmit();
					return false;
				}
				
				if(!saveIDT) {	// false
					
					//alert("걍로그인"); 
					delCookie("userID");
					delCookie("setY");
					frmsubmit();
					return false;
				}
				
				//login-form 최종제출
		 		function frmsubmit(){
					//alert("form제출");
		 			document.getElementById('frm').submit();
				}
				
			});
		
			
			// 쿠키 저장
			function setCookie(cookieName, value, exdays){
				let exdate = new Date();
				exdate.setDate(exdate.getDate() + exdays);
				
				let cookieValue;
				if(exdays == null) {
					cookieValue = value;
				} else {
					cookieValue = value +"; expires="+ exdate.toUTCString()
				}
				
				document.cookie = cookieName+"="+cookieValue;
			}
			
			
			// 쿠키 삭제
			function delCookie(cookieName){
				let expireDate = new Date();
				expireDate.setDate(expireDate.getDate() - 1);
				document.cookie = cookieName +"="+ "; expires="+ expireDate.toUTCString()
			}
			
			
			// 쿠키가져오기
			function getCookie(cookieName){
				let cname, cvalue;
				let val = document.cookie.split(";");
				for(let i = 0; i < val.length; i++){
					cname = val[i].substr(0, val[i].indexOf("="));
					cvalue = val[i].substr(val[i].indexOf("=")+1);
					cname = cname.trim();
					
					if(cname == cookieName){
						return cvalue;
					}
				}
			}
			
		
		});
		
	</script>

---

 

자동로그인 체크박스에 체크한 채로 로그인버튼을 누르면

login.jsp에서 체크박스 체크여부를 검사한다.

체크되어있다면 입력한 id와 pw를 서버로 보낸다.

 

위의 요청에 대해 LoginController에서 처리

> 입력한 id & pw 값에 대한 일치여부 확인 (login메소드)

> 일치한다면 해당 계정에 대한 auto값을 1로 설정 (autoCheck메소드)

 

login메소드에 대한 쿼리문

 

autoCheck메소드에 대한 쿼리문

 

auto값을 update한 결과값 (auto=1)이 들어온다면

setCookie("SuserID", id, 7); 
setCookie("setS", "S", 7);      해당 id를 SuserID로, S를 setS로 쿠키에 7일동안 저장 

frmsubmit(); 함수실행

 

---

쿠키처리함수

 

---

form이 제출되면 컨트롤러에서 post방식의  /Glogin요청을 받는다.

 

LoginController에서 일반로그인 처리 진행

login메소드에 대한 쿼리문

 

 

 

---

로그아웃 버튼은 메뉴바에 있다.

 

[ menu.jsp ] _ body부분

 

[ menu.jsp ] _ script 부분

Logout 함수 실행 

LoginController 에서 /logout에 대한 요청 처리 => 세션 무효화

로그아웃이 완료되면 메인페이지로

---

(자동로그인이 세팅된 상태에서 _ 즉 쿠키에 SuserID 와 setS (='S') 가 저장되어 있을때 )

다시 메뉴바의 로그인을 클릭해서 login.jsp 페이지로 넘어가면

아래의 함수의 조건문에 걸려서 sid & setS 값을 매개변수로 서버에 /login요청을 전송.

                              

LoginController에서 /login요청을 받아 hasAuto 메소드실행

sid와 일치하는 mid에 대해 auto값과 mname, mgrade, mid, mno (세션에 넣기위해) 를 가져온다.

                     auto가 1이라면 자동로그인 설정이 되어있다는 의미

 

auto값이 1이면서 setS값이 존재한다면, session에 값들을 담아 로그인 처리 후 json에 1을 담아 보내고, 

auto값이 1이 아니라면(0이면) json에 0을 담아 보낸다.

컨트롤러에서 보낸 auto값을 login.jsp에서 받는다.

auto값이 1이라면 (이미 로그인과정은 컨트롤러에서 진행했으니) 메인페이지로 이동

auto값이 0이라면 다시 로그인페이지로 이동.

클라이언트 입장에서는 (자동로그인 세팅이 되어있다면) 메뉴바의 '로그인'을 클릭했을 때, 

로그인페이지로 넘어가자마자 바로 팝업창이 뜨고, 확인을 누르면 로그인 처리가 된 상태로 메인페이지로 넘어간다.

---

자동로그인 해제 

userinfo.jsp 페이지에 자동로그인 해제 버튼을 따로 만들었다.

자동로그인 해제 버튼을 클릭하면

autoLogout() 함수실행

autoLogout 함수가 실행되면 sid를 매개변수로 컨트롤러에 /autologout 요청을 보낸다.

 

컨트롤러에서는 sid를 매개변수로 autoLogout 메소드 실행

매개변수로 가지고 간 sid와 일치하는 계정의 auto값을 0으로 바꿔준다. (자동로그인 해제)

auto값이 수정되었다면 컨트롤러에서 내보낸 result값이 1이 되는데

이걸 ajax에서 받아서 쿠키삭제처리 후 Logout() 함수실행.

컨트롤러에 /logout 요청을 보내게 되고

컨트롤러에서 일반 로그아웃 처리가 된다. (세션무효화)