국비 교육 69일차 - 로그인

회원가입을 끝냈으니 로그인 기능을 완성하고, 로그인 이후에 만들 수 있는 것들을 하나씩 추가하는 것을 배웠다. 

 

일단 로그인 부터 

 

<div style="height:20px"></div>
  <div class="container">
    <div class="row">
     <table class="table">
      <tr>
       <th width=30% class="text-right danger">ID</th>
       <td width=70%>
         <input type=text name=id size=15 class="input-sm" id=id>
       </td>
      </tr>
      <tr>
       <th width=30% class="text-right danger">Password</th>
       <td width=70%>
         <input type=password name=pwd size=15 class="input-sm" id=pwd>
       </td>
      </tr>
      <tr>
        <td colspan="2" class="text-center">
          <input type="button" value="로그인" class="btn btn-sm btn-success" id="logBtn">
          <input type="button" value="취소" class="btn btn-sm btn-info" id="canBtn">
        </td>
      </tr>
     </table>
    </div>
  </div>

 html 태그를 사용해서 버튼을 만들고 id를 줘서 ajax로 처리할 준비를 해준다. 로그인 기능은 ShadowBox를 사용했기 때문에 이것을 염두하고 코드를 이해하면 좋을것 같다. 

 

우선 먼저 로그인 취소 버튼을 누르면 로그인 창이 꺼져야 하기 때문에 아래와 같이 적어준다. 

$('#canBtn').click(function(){
		// 취소버튼 클릭시 처리
		parent.Shadowbox.close();
	});

 Shadowbox는 main 페이지에서 띄우고 있기 때문에 parent, 즉 상위 페이지에서 닫아줄 수 있도록 처리를 해둔다. 

 

$('#logBtn').click(function(){
		//  로그인 버튼 클릭시 처리
		let id=$('#id').val();
		/*
		    val()  <input type=text value=""> 입력한 값,value에 저장된 값 읽기
		    text() <td>값</td>
		    html() <td><span>값</span></td>  ==> <span>값</span>
		    attr() <img src=""> : 속성값 읽기
		    ====================================== getter
		    val("값"),text("")
		*/
		if(id.trim()=="")
		{
			$('#id').focus();
			return;
		}
		
		let pwd=$('#pwd').val();
		if(pwd.trim()=="")
		{
			$('#pwd').focus();
			return;
		}

 로그인 버튼을 눌렀을시 처리되는 기능이다. 아이디 입력창에 입력된 값을 변수에 저장해주고, 아이디가 null이면 focus를 줘서 다시 입력할 수 있게 한다. 

 

마찬가지로 password도 null값이 들어오면 focus를 줘서 다시 입력될 수 있게 한다. 

 

값을 id, pwd에 저장했으면 ajax로 값을 넘겨줄 준비를 한다. 

$.ajax({
			type:'POST',
			url:'../member/login.do',
			data:{"id":id,"pwd":pwd},
		});

 우선 post방식으로 데이터 들을 login.do로 넘겨준다. 

 

그럼 이 값들은 model로 넘어간다. 

 @RequestMapping("member/login.do")
  public String member_login(HttpServletRequest request,HttpServletResponse response)
  {
	  // id,pwd
	  String id=request.getParameter("id");
	  String pwd=request.getParameter("pwd");
	  // id와 pwd가 오라클에 존재하는 확인 
	  MemberDAO dao=MemberDAO.newInstance();
	  String result=dao.isLogin(id, pwd);
	  if(!(result.equals("NOID")||result.equals("NOPWD")))
	  {
		  StringTokenizer st=new StringTokenizer(result,"|");
		  String name=st.nextToken();
		  String admin=st.nextToken();
		  result="OK";
		  // session에 저장 
		  HttpSession session=request.getSession();
		  session.setAttribute("id", id);
		  session.setAttribute("name", name);
		  session.setAttribute("admin", admin);
	  }
	  request.setAttribute("result", result); // NOID,NOPWD,OK
	  return "../member/login_ok.jsp";
  }

 request를 통해 아이디와 비번을 받고, id와 비번이 오라클에 존재하는지 확인하는 메소드를 만들어 준다. 

 

// 로그인 처리
	   public String isLogin(String id,String pwd)
	   {
		   String result="";
		   try
		   {
			   getConnection();
			   String sql="SELECT COUNT(*) FROM project_member "
					     +"WHERE id=?";
			   ps=conn.prepareStatement(sql);
			   ps.setString(1, id);
			   ResultSet rs=ps.executeQuery();
			   rs.next();
			   int count=rs.getInt(1);
			   rs.close();
			   
			   if(count==0) //ID가 없는 상태
			   {
				   result="NOID";
			   }
			   else // ID가 있는 상태 
			   {
				   sql="SELECT pwd,name,admin "
					  +"FROM project_member "
					  +"WHERE id=?";
				   ps=conn.prepareStatement(sql);
				   ps.setString(1, id);
				   rs=ps.executeQuery();
				   rs.next();
				   String db_pwd=rs.getString(1);
				   String name=rs.getString(2);
				   String admin=rs.getString(3);
				   rs.close();
				   
				   if(db_pwd.equals(pwd))// 로그인 
				   {
					   result=name+"|"+admin;
				   }
				   else
				   {
					   result="NOPWD";
				   }
			   }
			   
		   }catch(Exception ex)
		   {
			   ex.printStackTrace();
		   }
		   finally
		   {
			   disConnection();
		   }
		   return result;
	   }

 우선 로그인 하려는 아이디가 존재하는지 아닌지를 확인해준다. 이때 사용하는건 count(*) sql문장이다. 이때 받아온 count 변수의 값이 0이면 result에 'NOID'를 저장해준다. 

 

아니라면 비밀번호 확인을 위해 다음 조건문으로 넘어간다. 

데이터베이스에서 아이디를 이용해서 비밀번호, 이름, 관리자여부를 결과값으로 받아온다. db에 저장된 비밀번호가 사용자로부터 입력받은 비밀번호와 같다면, result에 '이름|관리자 여부'를 저장해준다. 

 

비밀번호가 다르다면 'NOPWD'를 저장해서 최종적으로 3개의 result 경우의 수가 존재하게 된다. 

메소드를 만들어줬기 때문에 다시 model로 넘어온다. 

 

 if(!(result.equals("NOID")||result.equals("NOPWD")))
	  {
		  StringTokenizer st=new StringTokenizer(result,"|");
		  String name=st.nextToken();
		  String admin=st.nextToken();
		  result="OK";
		  // session에 저장 
		  HttpSession session=request.getSession();
		  session.setAttribute("id", id);
		  session.setAttribute("name", name);
		  session.setAttribute("admin", admin);
	  }
	  request.setAttribute("result", result); // NOID,NOPWD,OK
	  return "../member/login_ok.jsp";

 NOID, NOPWD가 아니라면 로그인에 성공한 것이기 때문에 result에 저장해준 '이름|관리자 여부' 를 StringTokenizer로 잘라온다. 

 

이름과 관리자 여부를 각각 변수에 저장해준 다음에, result의 값은 'OK'로 바꿔서 다시 저장해준다. 

 

그리고 세션객체를 생성해서, 세션에 id,name,관리자여부를 저장한다. 이렇게 되면 로그인에 성공한 사용자의 아이디, 이름, 관리자 여부는 사용자가 창을 끄거나 로그아웃 할때까지 세션에 저장되어 남아있게 된다. 

 

그리고 결과값으로는 NOID, NOPWD, OK 세 문자열중 하나가 전송되게 된다. 

 

 그럼 그 결과값은 login_ok.jsp에서 받아온다. 

 

$.ajax({
			type:'POST',
			url:'../member/login.do',
			data:{"id":id,"pwd":pwd},
			success:function(result)
			{
				let s=result.trim();
				if(s=="NOID")
				{
					alert("아이디가 존재하지 않습니다!!");
					$('#id').val("");
					$('#pwd').val("");
					$('#id').focus();
				}
				else if(s=="NOPWD")
				{
					alert("비밀번호가 틀립니다!!");
					$('#pwd').val("");
					$('#pwd').focus();
				}
				else
				{
					// 이동 => main.do로 이동 
					parent.location.href="../main/main.do";
				}
			}
		});

 다시 login.jsp의 ajax코드

 

함수를 실행한 결과값인 result가 어떤 값을 가지고 있느냐에 따라 처리하는 기능이 달라진다. 

 

아이디가 존재하지 않으면, 아이디가 존재하지 않는다는 alert창을 띄우고, id와 pwd값에 전부 공백을 준다. 

 

비밀번호가 틀린 경우에는 아이디 값은 그대로 두고, pwd값만 비워준뒤 pwd에 다시 포커스를 준다. 

 

둘 중 하나의 경우도 아니라면 로그인에 성공한 것이기 때문에 상위 페이지인 main으로 다시 이동하게 만든다. 이때 로그인이 성공했기 때문에, main에서 뿌려주는 화면은 로그아웃일때랑 다르게 된다. 

 

 <c:if test="${sessionScope.id==null }">
        <li><a href="#" id="login">로그인</a></li>
      </c:if>
      <c:if test="${sessionScope.id!=null }">
        <li><a href="../member/logout.do">로그아웃</a></li>
      </c:if>
      
      
      <c:if test="${sessionScope.id==null }">
	      <li><a class="drop" href="#">회원가입</a>
	        <ul>
	          <li><a href="../member/join.do">회원가입</a></li>
	          <li><a href="pages/full-width.html">아이디찾기</a></li>
	          <li><a href="pages/sidebar-left.html">비밀번호찾기</a></li>
	        </ul>
	      </li>
      </c:if>

 이렇게 SessionScope에 id가 저장되어있는지 아닌지에 따라 메뉴바를 다르게 만들어 준다. 

 

 

로그아웃은 간단하다. 

 @RequestMapping("member/logout.do")
  // 로그아웃 
  public String memberLogout(HttpServletRequest request,HttpServletResponse response)
  {
	  HttpSession session=request.getSession();
	  session.invalidate(); // 저장된 내용을 전체 해제
	  return "redirect:../main/main.do";
  }
  

이렇게 세션에 담긴 모든 내용을 삭제하고 다시 메인으로 돌려보내주면 끝이다. 

 

로그인 기능이 완성됐기 때문에 이제 그 다음 단계인 찜목록 만들기, 댓글 수정 삭제의 기능을 다음 게시글에 이어서 포스팅하도록 하겠다.