[HOW_YOGO] 로그인 구현 (feat. a-jax) -jsp/servlet/mvc

<script><%@include file="/WEB-INF/lib/jquery-3.7.1.min.js" %></script>

<div class="form-box login">
		<h2>Login</h2>
		<form method="post">
			<div class="input-box">
				<span class="icon"><ion-icon name="person"></ion-icon></span>
				<input type="text" id="loginId"/>
				<label>id</label>
			</div>
			<div class="input-box">
				<span class="icon"><ion-icon name="lock-closed"></ion-icon></span>
				<input type="password"  id="loginPassword" />
				<label>password</label>
			</div>
			<div class="forgot-idpassword">
			<a href="#" id="searchId">아이디찾기</a>
			<a href="#" id="searchPassword">비밀번호찾기</a>			
			</div>
			<button type="button" class="btn" id="loginAction">Login</button>
			<div class="login-register">
				<p>요고어때 회원이 아니신가요?  <a href="#" class="register">회원가입</a></p>
			</div>
		</form>
	</div>

 

먼저 html을 이용한 화면 구성. 위와 같이 div를 나눠주어서 각각의 영역 지정

로그인 화면 구현

		String id = request.getParameter("id");
		String password = request.getParameter("password");

		UserDAO udao = new UserDAO();
		int count= udao.loginAction(id,password);

		String result=null;
		if(count==0) {
			result="false";
		}else {
			result="true";
		}
		System.out.println(result);
		JSONObject json = new JSONObject();
		json.put("result", result);	
		response.setContentType("application/json; charset=utf-8");
		response.getWriter().append(json.toJSONString());

 

로그인 자체를 검증하는기능은 어렵지 않았다. 

아작스를 이용해서 dao에 접근해 id와 password가 일치하는 것이 있으면 true, 하나라도 일치하지 않으면 ,false를 반환하도록 dao 구현.

 

$(function(){
	$("button#loginAction").click(function(){
		const idVal = $("#loginId").val();
		const passwordVal = $("#loginPassword").val();
		
		if(idVal=="" ||idVal.length==0 ){
			alert("id를 입력해주세요");
				   $("#loginId").focus();
			return;
			}
            
		if(passwordVal=="" ||passwordVal.length==0 ){
			alert("비밀번호를 입력해주세요");
				   $("#loginPassword").focus();
			return;
			}
		
		$.ajax({
			url:"/loginActionCon.do",
			type:"post",
			data:{id: idVal, password:passwordVal, afterLoginId: idVal},
			dataType:"json",
			success:function(data){
				
				if(data['result']=='false') {
					//로그인 실패
					alert("ID 또는 비밀번호의 정보가 다릅니다");
					$("#loginId").val("");
					$("#loginPassword").val("");
				
			        } else{
			        	//로그인 성공
			        	window.location.href = '/loginSession.do?afterLoginId=' + idVal;
			        }
		
			},
			error:function(){
				alert("로그인에 실패하였습니다");
				$("#loginId").val("");
				$("#loginPassword").val("");
	                
			}
			
		});//ajax끝 			
	});
});

 

 

 

 

위에서 각각 input의 value값을 변수로 선언해주어서 서블릿으로

data:{id: idVal, password:passwordVal, afterLoginId: idVal}

해당 정보값을 넘겨 주어 위에 보여준 서블릿에서 result값을 

리턴해준 후 alert를 띄우고 각각에 맞게 페이지로 이동하게 된다. 

 

//로그인 성공
window.location.href = '/loginSession.do?afterLoginId=' + idVal;

 

로그인을 한 후에는세션값을 저장해야 하기 때문에, 그를 위해 아이디 값도 같이 세션 서블릿으로 넘겨주는 방식을 택했다.