ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • springwebmvcproject
    SPRING 2022. 2. 10. 14:45

    자동로그인! 체크 박스까지 만들어서 시작해 볼까요~

     

    //자동 로그인 쿠키값 DB저장 처리
    //SQL => UPDATE
    void 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 계층의 객체가 필요
    @Autowired
    private IUserMapper mapper;
     
    //회원 가입을 진행
    @Test
    public void registTest() {
    UserVO vo = new UserVO();
    vo.setAccount("abc1234");
    vo.setName("홍길동");
    vo.setPassword("aaa111!");
    mapper.register(vo);
    }
     
    //위에서 회원 가입한 아이디로 중복 확인을 해서
    //COUNT(*)를 이용해서 1이 리턴이 되는지 확인
    @Test
    public void checkIdTest() {
    int result = mapper.checkId("abc1234");
    if(result == 1) {
    System.out.println("아이디가 이미 존재합니다.");
    } else {
    System.out.println("아이디 사용 가능합니다.");
    }
    }
     
    //가입한 회원의 모든 정보를 얻어내서 출력
    @Test
    public void selectTest() {
    System.out.println(mapper.selectOne("abc1234"));
    }
     
    //위에서 가입한 계정의 탈퇴를 진행
    //탈퇴가 성공했는지의 여부도 체크
     
    @Test
    public 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, 올바른 값이면 true
    else 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', //서버 요청 url
    headers : {
    '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{
    @Autowired
    private IUserMapper mapper;
     
    @Override
    public 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
Designed by Tistory.