-
springwebmvcprojectSPRING 2022. 2. 10. 14:45
자동로그인! 체크 박스까지 만들어서 시작해 볼까요~
//자동 로그인 쿠키값 DB저장 처리//SQL => UPDATEvoid keepLogin(Map<String, Object> datas);//세션 아이디를 통한 회원 정보 조회 기능/* 자동 로그인 하고 싶다는 사람에게 쿠키 (세션 id)를 주었습니다.그리고 그 유저가 나중에 사이트에 다시 방문했다면, 서버에 다시 요청을 보낼 것이고, 요청과 함께 쿠키가 전달될 것입니다.쿠키 안에 들어 있는 세션 id로 회원 정보를 조회해서 마치 이 사람이 로그인 중인 것처럼 세션 데이터를 만들어 주면 됩니다.(login이라는 세션 데이터 -> 로그인 중이라는 징표)*/UserVO getUserWithSessionId(String sessionId);회원가입이 되는지 테스트!@RunWith(SpringJUnit4ClassRunner.class)@ContextConfiguration(locations = {"file:src/main/webapp/WEB-INF/spring/mvc-config.xml"})public class UserMapperTest {//Mapper 계층의 객체가 필요@Autowiredprivate IUserMapper mapper;//회원 가입을 진행@Testpublic void registTest() {UserVO vo = new UserVO();vo.setAccount("abc1234");vo.setName("홍길동");vo.setPassword("aaa111!");mapper.register(vo);}//위에서 회원 가입한 아이디로 중복 확인을 해서//COUNT(*)를 이용해서 1이 리턴이 되는지 확인@Testpublic void checkIdTest() {int result = mapper.checkId("abc1234");if(result == 1) {System.out.println("아이디가 이미 존재합니다.");} else {System.out.println("아이디 사용 가능합니다.");}}//가입한 회원의 모든 정보를 얻어내서 출력@Testpublic void selectTest() {System.out.println(mapper.selectOne("abc1234"));}//위에서 가입한 계정의 탈퇴를 진행//탈퇴가 성공했는지의 여부도 체크@Testpublic void deleteTest() {mapper.delete("abc1234");if(mapper.selectOne("abc1234") == null) {System.out.println("삭제가 완료되었습니다.");} else {System.out.println("삭제에 실패했습니다.");}}}jsp에 어마무시한.. 코드들을 적어줍니다.
<script>//start jQuery//각 입력값들의 유효성 검증을 위한 정규표현식을 변수로 선언.const getIdCheck = RegExp(/^[a-zA-Z0-9]{4,14}$/);const getPwCheck = RegExp(/([a-zA-Z0-9].*[!,@,#,$,%,^,&,*,?,_,~])|([!,@,#,$,%,^,&,*,?,_,~].*[a-zA-Z0-9])/);const getNameCheck = RegExp(/^[가-힣]+$/);//입력값 중 하나라도 만족하지 못한다면 회원가입 처리를 막기 위한 논리형 변수를 선언합니다.let chk1 = false, chk2 = false, chk3 = false, chk4 = false;//회원가입 시 사용자의 입력값 검증!//1. ID 입력값 검증$('#user_id').keyup(function(){if($(this).val() === ''){$(this).css('background-color', 'pink');$('#idChk').html('<b style="font-size: 14px; color: red;">[아이디는 필수 정보입니다.]</b>');chk1 = false;}//아이디 입력값 유효성 검사 (영문으로만 4~14글자 허용)//정규표현식변수.test('검증하고 싶은 값') -> return boolean type//정규 표현식에 어긋난 값이면 false, 올바른 값이면 trueelse if(!getIdCheck.test($(this).val())){$(this).css('background-color', 'pink');$('#idChk').html('<b style="font-size: 14px; color: red;">[아이디는 영문자, 숫자 조합 4-14자입니다.]</b>');chk1 = false;}//ID 중복 확인 (비동기 처리)//특정 로직의 실행이 끝날 때까지 기다리지 않고 먼저 코드를 실행합니다.// (페이지 전환 없이 통신합니다.)else{//ID 중복 확인 통신을 통해 입력값을 가져오기const id = $(this).val();//비동기 통신 시작 - ajax 호출//클라이언트에서 서버와 비동기 통신을 진행하는 ajax 함수$.ajax({type : 'POST', //서버에 전송하는 HTTP 방식url : '/user/checkId', //서버 요청 urlheaders : {'Content-Type' : 'application/json' //내가 전송할 데이터의 모양}dateType : "text", //서버로부터 응답 받을 데이터의 형태data : id, //서버로 전송할 데이터success : function(result){ //매개변수에 통신 성공 시 데이터가 저장됩니다.//서버와 통신 성공 시 실행할 내용console.log('통신 성공!:' + result);if(result === 'available'){$(this).css('background-color', 'pink');$('#idChk').html('<b style="font-size: 14px; color: red;">[아이디 사용이 가능합니다.]</b>');}else{$(this).css('background-color', 'pink');$('#idChk').html('<b style="font-size: 14px; color: red;">[아이디가 중복되었습니다.]</b>');}error : function(status, error){console.log('통신 실패!');console.log(status, error);}}); // end ajax (회원가입 처리 종료)}if(result === 'available'){$('#user_id').css('background-color', 'aqua');$('#idChk').html('<b style="font-size: 14px; color: red;">[비밀번호는 필수 정보입니다.]</b>');}else{$('#user_id').css('background-color', 'pink');$('#idChk').html('<b style="font-size: 14px; color: red;">[비밀번호는 필수 정보입니다.]</b>');}}}); //아이디 검증 끝//2. 패스워드 입력값 검증$('#password').keyup(function(){//비밀번호란 공백 확인if($(this).val() === ''){$(this).css('background-color', 'pink');$('#pwChk').html('<b style="font-size: 14px; color: red;">[비밀번호는 필수 정보입니다.]</b>');chk2 = false;}//비밀번호 유효성 검사else if(!getPwCheck.test($this).val()) || $(this).val().length < 8){$(this).css('background-color', 'pink');$('#pwChk').html('<b style="font-size: 14px; color: red;">[특수문자 포함 8자 이상입니다.]</b>');chk2 = false;} else {$(this).css('background-color', 'aqua');$('#pwChk').html('<b style="font-size: 14px; color: green;">[비밀번호 입력 완료]</b>');chk2 = true;}} // 통과}); //비밀번호 검증 종료//3. 비밀번호 확인란 입력 검증$('#password_check').keyup(function(){//비밀번호 확인란 공백 검증if($(this).val() === ''){$(this).css('background-color', 'pink');$('#pwChk2').html('<b style="font-size: 14px; color: red;">[비밀번호 확인 칸은 필수 입력 정보입니다.]</b>');chk3 = false;}//비밀번호 확인란 유효성 검사else if($(this).val() !== $('#password').val()){$(this).css('background-color', 'pink');$('#pwChk2').html('<b style="font-size: 14px; color: red;">[비밀번호와 일치하지 않습니다.]</b>');chk3 = false;}else{$(this).css('background-color', 'aqua');$('#pwChk2').html('<b style="font-size: 14px; color: green;">[비밀번호 확인 칸 입력 완료했습니다.]</b>');chk3 = true;} //비밀번호 확인 검증 종료//4. 이름 입력값 검증$('#user_name').keyup(function(){//이름값 공백 확인if($(this).val() === ''){$(this).css('background-color', 'pink');$('#nameChk').html('<b style="font-size: 14px; color: red;">[이름은 필수 정보입니다.]</b>');chk4 = false;}//이름값 유효성 검사else if(!getNameCheck.test($(this).val())){$(this).css('background-color', 'red');$('#nameChk').html('<b style="font-size: 14px; color: green;">[한글로 작성하셔야 합니다.]</b>');chk4 = false;} else{$(this).css('background-color', 'aqua');$('#nameChk').html('<b style="font-size: 14px; color: green;">[이름 입력 완료했습니다.]</b>');chk4 = true;}}); //이름 입력 검증 종료//사용자가 회원 가입 버튼을 눌렀을 때의 이벤트 처리//사용자가 입력하는 4가지 데이터 중 단 하나라도 문제가 생기면 회원가입 처리를 해 줄 수 없습니다.$('#signup-btn').click(function(){if(chk1 && chk2 && chk3 && chk4) {//아이디 정보const id = $('user_id').val();//비밀번호 정보const pw = $('password').val();//이름 정보const name = $('#user_name').val();const user = {"id" : id,"password" : pw,"name" : name}; //자바 스크립트//비동기 통신 시작$.ajax({type : "POST",url : "/user/",contentType : "application/json",dateType : "text",data : user,//javascript 객체를 json 문자열로 변환해 주는 메서드data : JSON.stringify(user),success : function(result){console.log('통신 성공!:' + result);alert('회원 가입을 환영합니다.');location.href="/";},error : function(){alert('회원 가입 실패');}}); // end ajax (회원가입 처리 종료)} else{alret('입력 정보를 다시 확인하세요.');}}});$('#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;">[영문, 숫자로 4-14자로 작성해 주세요.]</b>');chk1 = false;} else{$(this).css('background-color', 'aqua');$('#idCheck').html('<b style="font-size: 14px; color: green;">[아이디가 입력 완료되었습니다.]</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;">[비밀번호는 특수문자 포함 8자입니다.]</b>');chk2 = false;}else{$(this).css('background-color', 'aqua');$('#nameChk').html('<b style="font-size: 14px; color: green;">[비밀번호는 필수 정보입니다.]</b>');chk2 = true;}}); // 비밀번호 입력값 검증 종료$('#signIn-btn').click(function(){if(chk1 && chk2){}/*아이디, 비밀번호를 가져오셔서 객체로 포장하세요.비동기 통신을 진행하여 서버로 객체를 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({type: 'POST',url : '/user/loginCheck',contentType : 'application/json',dataType : 'text',data : JSON.stringify(userInfo),success : function(data){if(data === 'idFail'){//console.log('아이디가 없습니다.');$('#signInId').css('background-color', 'pink');$('#idCheck').html('<b style="font-size: 14px; color: red;">[존재하지 않는 아이디입니다.]</b>');$('#signInPw').val('');$('#signInId').focus(); //커서를 이동시키고, 스크롤도 해당 위치로 이동시키는 함수chk1 = false, chk2 = false;} else if(data === 'pwFail'){//console.log('비밀번호가 틀렸습니다.');$('#signInPw').css('background-color', 'pink');$('#pwCheck').html('<b style="font-size: 14px; color: red;">[비밀번호가 틀렸습니다.]</b>');$('#signInPw').val('');$('#signInPw').focus();chk2 = false;}else{console.log('로그인 성공!');}},error : function(){console.log('통신 실패!');}}); // end ajax (로그인 비동기 처리)}else {alert('입력값을 다시 확인하세요.');}}); //로그인 버튼 클릭 이벤트 처리 종료}); //end jQuery</script>public class AutoLoginInterceptor implements HandlerInterceptor{@Autowiredprivate IUserMapper mapper;@Overridepublic boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)throws Exception {System.out.println("자동 로그인 인터셉터 발동합니다.");//원하는 쿠키의 값을 한번에 꺼내올 수 있습니다. (request에서 cookie를 찾아와서 리턴해 줍니다.)Cookie loginCookie = WebUtils.getCookie(request, "loginCookie");//자동 로그인 신청한 사람이라면 로그인 유지를 위해 세션 데이터를 만들어 줘야 합니다.HttpSession session = request.getSession();if(loginCookie != null) { //자동 로그인 신청한 유저//2. DB에서 쿠키값(세션ID)과 일치하는 세션ID를 가진 회원의 정보를 조회UserVO vo = mapper.getUserWithSessionId(loginCookie.getValue());System.out.println("쿠키의 값: " + loginCookie.getValue());System.out.println("DB에서 가지고 온 값: " + vo);if(vo != null) {session.setAttribute("login", vo);System.out.println("세션 제작을 완료했습니다.");}}//true면 컨트롤러로 요청이 들어가고, false면 요청을 막습니다.//자동 로그인 신청 여부와 상관없이 홈 화면은 무조건 봐야 하기 때문에 true를 작성합니다.return true;}}끝나고서는 다음날 할 댓글 프로젝트 설정을 했습니다.'SPRING' 카테고리의 다른 글
MyWeb (0) 2022.02.15 mywebproject (0) 2022.02.11 springwebmvcproject (0) 2022.02.09 springwebmvcproject (0) 2022.02.08 springwebmvcproject (0) 2022.02.04