Dev of road

	@Override
	public void keepLogin(String session, Date limitTime, String account) {
		Map<String, Object> datas = new HashMap<String, Object>();
		datas.put("sessionId", session);
		datas.put("limitTime", limitTime);
		datas.put("account", account);
		
		mapper.keepLogin(datas);
	}
    
    	@Override
	public UserVO selectOne(String account) {
		return mapper.selectOne(account);
	}

로그인 처리를 위한 html 코드 작성. 🤩

부트스트랩으로 작성되었음!!

<div class="modal-body">
<table style="cellpadding: 0; cellspacing: 0; margin: 0 auto; width: 100%">
<tr>
	<td style="text-align: left">
		<p><strong>아이디를 입력해주세요.</strong>&nbsp;&nbsp;&nbsp;<span id="idCheck"></span></p>
	</td>
</tr>
<tr>
<td><input type="text" name="userId" id="signInId"
	class="form-control tooltipstered" maxlength="10"
	required="required" aria-required="true"
	style="margin-bottom: 25px; width: 100%; height: 40px; border: 1px solid #d9d9de"
	placeholder="최대 10자"></td>
	</tr>
	<tr>
<td style="text-align: left">
<p><strong>비밀번호를 입력해주세요.</strong>&nbsp;&nbsp;&nbsp;<span id="pwCheck"></span></p>
</td>
/tr>
	<tr>
	<td><input type="password" size="17" maxlength="20" id="signInPw"
	name="userPw" class="form-control tooltipstered" 
	maxlength="20" required="required" aria-required="true"
	style="ime-mode: inactive; margin-bottom: 25px; height: 40px; border: 1px solid #d9d9de"
								placeholder="최소 8자"></td>
		</tr>
		<!--  자동로그인 체크박스 -->
		<tr>
		<td><input type="checkbox" id="auto-login" name="autoLogin"> 자동 로그인</td>
			</tr>
			<tr>
		td style="padding-top: 10px; text-align: center">
		<p><strong>로그인하셔서 더 많은 서비스를 이용하세요~</strong></p>
			</td>
			</tr>
		tr>
		td style="width: 100%; text-align: center; colspan: 2;"><input
		type="button" value="로그인" class="btn form-control tooltipstered" id="signIn-btn"
		style="background-color: #643691; margin-top: 0; height: 40px; color: white; border: 0px solid #f78f24; opacity: 0.8">
			</td>
			</tr>
				<tr>
				<td
style="width: 100%; text-align: center; colspan: 2; margin-top: 24px; padding-top: 12px; border-top: 1px solid #ececec">

<a class="btn form-control tooltipstered" data-toggle="modal"
href="#sign-up"
style="cursor: pointer; margin-top: 0; height: 40px; color: white; background-color: orange; border: 0px solid #388E3C; opacity: 0.8">
			회원가입</a>
			</td>
			</tr>

		</table>
			
			</div>
		</div>
	</div>
</div>

2. 로그인 처리를 위한 JQuery문 🤩

  - 아이디 검증

 //각 입력값들의 유효성 검증을 위한 정규표현식을 변수로 선언.
         const getIdCheck = RegExp(/^[a-zA-Z0-9]{4,14}$/);
         const getPwCheck = RegExp(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/);
         const getNameCheck = RegExp(/^[가-힣]+$/);

// ID 입력값 검증 (공백확인 , 정규표현식 어긋나는지 확인)
		$('#signInId').keyup(function() {
			if($(this).val() === ''){
				$(this).css('background-color', 'pink');
			 	$('#idCheck').html('<b style="font-size: 14px; color: red">[아이디는 필수 값입니다.]</b>');
			 	chk1 = false;
			}else if(!getIdCheck.test($(this).val())){
				$(this).css('background-color', 'pink');
			 	$('#idCheck').html('<b style="font-size: 14px; color: red">[아이디가 형식에 어긋납니다!]</b>');
			 	chk1 = false;
			}else{
				$(this).css('background-color', 'aqua');
			 	$('#idCheck').html('<b style="font-size: 14px; color: red">[아이디 입력 성공!]</b>');
			 	chk1 = true;
			}

/ 비밀번호 입력값 검증 (공백확인 , 정규표현식 어긋나는지 확인)
		$('#signInPw').keyup(function() {
			if($(this).val() === ''){
				$(this).css('background-color', 'pink');
			 	$('#pwCheck').html('<b style="font-size: 14px; color: red">[비밀번호는 필수 값입니다.]</b>');
			 	chk2 = false;
			}else if(!getPwCheck.test($(this).val())){
				$(this).css('background-color', 'pink');
			 	$('#pwCheck').html('<b style="font-size: 14px; color: red">[비밀번호가 형식에 어긋납니다.]</b>');
			 	chk2 = false;
			}else{
				$(this).css('background-color', 'aqua');
			 	$('#pwCheck').html('<b style="font-size: 14px; color: red">[비밀번호 입력 성공!]</b>');
			 	chk2 = true;
			}
		}); // 비밀번호 검증 끝

정규식 표현식으로 아이디가 어긋나는지 or 빈칸인지 둘다 만족 된다면 

else값으로 이동하여 OK표기!

$('#signIn-btn').click(function() {
			if(chk1 && chk2){
				// ajax를 이용한 비동기 방식으로 로그인을 처리할 예정이다. 
		        /*
		        아이디, 비밀번호를 가져오셔서 객체로 포장하세요.
		        비동기 통신을 진행하여 서버로 객체를 json형태로 전송하세요.
		        그리고, console.log()로 서버가 보내온 데이터를 확인하여
		        아이디가 없습니다, 비밀번호가 틀렸습니다, 로그인 성공이라는
		        메세지를 브라우저의 console창에서 확인하세요.
		        서버에서 클라이언트로 데이터 전송은 text로 이루어 질 것이며
		        idFail, pwFail, loginSuccess라는 문자열을 리턴할 것입니다.
		        전송방식: POST, url: /user/loginCheck
		        */
		        
				const id = $('#signInId').val();
				const pw = $('#signInPw').val();
				
				//자동로그인 체크박스가 체크가 되었는지의 여부 
				//제이쿼리 is 상태여부를 확인할 수 있는 함수 논리값을 판단하여 논리값을 리턴
				const autoLogin = $('#auto-login').is(':checked');
				
				console.log("id" + id);
				console.log("pw" + pw);
				const userInfo ={
						"account" : id,
						"password" : pw,
						
						//오토로그인 추가 체크의 여부를 확인하여 자동로그인을 구현할지 말지를 정한다. 
						"autoLogin" : autoLogin
				};
				// ajax 시작!
				$.ajax({
					type : "post",
					url : "/user/loginCheck",
					contentType : "application/json",
					dataType : "text",
					data : JSON.stringify(userInfo),
					success : function(result) {
						console.log("통신 성공" + result);
						if(result === 'idFail'){
							//console.log('아이디가 없습니다.');
							$('#idCheck').css('background-color', 'pink');
						 	$('#idCheck').html('<b style="font-size: 14px; color: red">[아이디가 없습니다.]</b>');
						 	$('#signInPw').val('');
						 	$("#singInPw").focus(); // 커서 이동 및 스크롤도 해당 위치로 이동시키는 함수 
						 	 chk2 = false;
						 	
						}else if (result === 'pwFail') {
							//console.log('비밀번호가 틀렸습니다.');
							$('#pwCheck').css('background-color', 'pink');
						 	$('#pwCheck').html('<b style="font-size: 14px; color: red">[비밀번호가 틀렷습니다.]</b>');
						 	$('#signInPw').val('');
						 	$("#singInId").focus(); // 커서 이동 및 스크롤도 해당 위치로 이동시키는 함수 
						 	chk1 = false;  chk2 = false;
						}else{
							console.log('로그인 성공');
							location.href = '/';
						}
					},
					error : function() {
						alert('로그인 실패!');
					}
				}); // ajax 종료!
				
			}else{
				alert('입력값을 다시 확인하세요');
			}
		}); /

if(chk1 && chk2){ 의값으로 

아이디 및 비밀번호 입력값이 모두가 true값이 진행되면 로그인 이벤트 처리 

ajax(비동기 통신으로 진행) 이제 컨트롤러 작성하러 가보자! 😀

3. 스프링 작성 🤩 

자 이제 컨트롤러 및 서비스 > 매퍼 및 xml을 작성 해보자!!

이번에도 비동기 통신임으로 

@RestController 
@RequestMapping("/user")

를 진행해준다. 그리고 user라는 url로 진행하였다. 

ajax에서 loginCheck라는 url으로 컨트롤러에 요청을 보내니 loginCheck와 같은 이름으로 작성한다. 

@PostMapping("/loginCheck")
	public String loginCheck(@RequestBody UserVO vo, HttpSession session , HttpServletResponse respones  ) {//HttpServletRequest request) {
		System.out.println("/user/logincheck : post");
		System.out.println("param : " + vo);
		
		// 매개값으로 httpsession 객체 받아서 사용
		BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
		UserVO dbData =  serivce.selectOne(vo.getAccount());
		// mybatis는 조회된 데이터가 없을경우 null이 온다.
		if(dbData != null) {
			if(encoder.matches(vo.getPassword(), dbData.getPassword())) {
				//로그인 성공 히원을 대상으로 세션 정보를 생성
				session.setAttribute("login", dbData);
					serivce.keepLogin(session.getId(), limitDate, vo.getAccount());
				}
				return "loginSuccess";
			}else {
				return "pwFail";
			}
		}else {
			return "idFail";
		}
		
	}

이때 session.setAttribute("login", dbData); 세션을 생성해준다. 

스프링에서는 간단하게 세션을 만들수 있다. 라는 login이라는 이름으로 dbDate의 값을 만들었다 . 이곳에는 userVO의 객체의 값이 들어있다. 

이때 selectOne의 서비스와 keeplogin의 코드를 작성한다. 

	@Override
	public UserVO selectOne(String account) {
		return mapper.selectOne(account);
	}
    
    	@Override
	public void keepLogin(String session, Date limitTime, String account) {
		Map<String, Object> datas = new HashMap<String, Object>();
		datas.put("sessionId", session);
		datas.put("limitTime", limitTime);
		datas.put("account", account);
		
		mapper.keepLogin(datas);
	}

이때 SeletOne은 로그인하는 아이디의 검증을 위해 사용된다. 

keeplogin은 세션의 유지 등에 사용된다. 

package com.spring.mvc.user.repository;

import java.util.Map;

import com.spring.mvc.user.model.UserVO;

public interface IUserMapper {
	
	//아이디 중복체크 기능
	int checkId(String account);
	
	//회원 가입기능
	void register(UserVO vo);
	
	//회원 정보 조회 기능 
	UserVO selectOne(String account);
	
	//회원 탈퇴 기능 
	void delete(String account);
	
	//자동 로그인 쿠키값 db 저장 처리
	//sql > update 문으로 작성
	void keepLogin(Map<String, Object> datas);
	
	//세션아이디를 통한 회원 정보조회기능
	/*
	  - 자동로그인을 하고 싶다는 사람한테 뭘 만들어 줬죠? > 쿠키(세션Id)
	  그리고 나서 그 사람이 나중에 우리사이트에 다시 방문했다고 칩시다. 
	  단연히 우리 서버에 요청을 보낼 거고 , 요청과 함게 쿠키도 같이 전달이 되겠죠? 
	  우리는 쿠키 안에 들어있는 세션 id로 회원 정보를 조회해서 마치 이사람이 로그인 중인 것 처럼 
	  세션 데이터를 만들어 주자는 겁니다. (login이라는 세션 데이터 -> 로그인 중이라는 징표)
	 */
	UserVO getUserWithSessionId(String sessionId);
	
	
}

매퍼 작성 후 xml을 작성해준다. 

	<!-- 자동로그인을 희망하는 경우 쿠키값(세션아이디)와 유효시간을 갱신 -->
	<update id="keepLogin">
		update mvc_user set session_id = #{sessionId}, LIMIT_TIME = #{limitTime}
		where account = #{account}
	</update>
    
         <select id="selectOne" resultMap="UserMap">
		SELECT * FROM mvc_user
		WHERE account=#{account}
	</select>

이제 세션이 얻어 졌으니 로그인 유지 작업을 해보자!

세션의 활용 로그인 유지 HTML,JS 작업😀

  <c:if test="${login != null}">
	           <li class="nav-item">
	            <a class="nav-link js-scroll-trigger" href="#">My Page</a>
	          </li>
	           <li class="nav-item">
	            <a class="nav-link js-scroll-trigger" href="<c:url value='/user/logout'/>" onclick="confirm('로그아웃 하시겠음?')">LOGOUT</a>
	          </li>
	          
           </c:if>
          
          <c:if test="${login == null}">
	           <li class="nav-item">
	            <a class="nav-link js-scroll-trigger" data-toggle="modal" data-target="#log-in">LOGIN</a>
	          </li>
  </c:if>

jstl을 활용하여 로그인 전에는 로그인 버튼이 생성되게

로그인 후에는 로그아웃 및 마이페이지가 생성  되게 하였다. 

마무리 확인 작업 😁

🙏

🙏

🙏

🙏

🙏

🙏

🙏

자!! 기도 메타 한번 가고

이렇게 세션 적용은 완료되었다. !