JDBC 활용 연습용5. ( 인증번호 확인 + 비밀번호일치확인 )

 

 

 

-- signUp.js 에   인증번호 입력후 확인 (제한시간 ) 추가. 

// 인증번호 보내기
const sendBtn = document.getElementById("sendBtn");
const cMessage = document.getElementById("cMessage");    // 타이머 출력하는 span 태그

// 타이머에 사용될 변수
let min = 4;
let sec = 59;
let checkInterval ;  // setInterval 을 저장할 변수 


sendBtn.addEventListener("click",function(){

    if( checkObj.memberEmail ){  // 유효한 이메일이 작성되어 있을경우에만 메일보내기
        $.ajax({ 
            url : "sendEmail",
            data : {"inputEmail" : memberEmail.value},
            success : function(result){
                console.log("이메일 발송 성공");
                console.log(result);

                // 인증버튼이 클릭되어 정상적으로 메일이 보내졌음을
                checkObj.sendEmail = true;
            },
            error : function(){
                console.log("이메일 발송 실패");
            }
         });

         // Mail 발송 Ajax 코드는 동작이 느림 ...
         //   --> 메일은 메일대로 보내지고, 타이머는 버튼누르자마자 실행.
         //    --> ajax 코드가 비동기이기 때문에 메일이 보내지는것을 기다리지않고
         //        바로 수행된다 !! 

         // 5분 타이머    
         // setInterval(함수, 지연시간) : 지연시간이 지난 후 함수를 수행 (반복) 
         cMessage.innerText = "5:00";  // 초기값 5분

         min = 4;
         sec = 59;
         cMessage.classList.remove("confirm");
         cMessage.classList.remove("error");

         checkInterval = setInterval(function(){  // 변수에 저장해야 해당 함수를 멈출수있음.
            if ( sec < 10) sec = "0" + sec;
            cMessage.innerText = min + ":" + sec;

            if(Number(sec) === 0 ){ 
                min--;
                sec = 59;
            }else{
                sec--;
            }
            if( min === -1 ){
                cMessage.classList.add("error");
                cMessage.innerText = "인증번호가 만료되었습니다.";

                clearInterval(checkInterval);  // setInterval 함수 반복을 지움.
            }
         } , 1000 );   // 1초 지연 후 수행
         alert ( "인증번호가 발송되었습니다. 이메일을 확인해주세요,,");
    }
});


//  인증번호 입력후 인증하기 눌렀을때 . 클릭시에 대한 동작
const cNumber = document.getElementById("cNumber");
const cBtn = document.getElementById("cBtn");
// + cMessage , memberEmail  요소도 사용

cBtn.addEventListener("click",function(){
    // 1. 인증번호 받기 버튼이 클릭되어 이메일 발송되었는지 확인하기.
    if(checkObj.sendEmail){

        // 2. 입력된 인증번호가 6자리 맞는지 확인
        if(cNumber.value.length == 6){
            // ajax 송신.
            $.ajax({
                url : "checkNumber" ,
                data : { "cNumber" : cNumber.value,
                         "inputEmail" : memberEmail.value },
                success : function(result){
                    console.log(result);

                    //    1  : 인증번호 O , 시간도 O
                    //    2  : 인증번호 O , 시간이 X 
                    //    3  : 인증번호 X
                    if ( result == 1 ){
                        clearInterval(checkInterval);  // 제일먼저, 타이머 멈춤
                        cMessage.innerText = "인증되었습니다";
                        cMessage.classList.add( "confirm");
                        cMessage.classList.remove = ("error");
                    }else if ( result == 2 ){
                        alert("만료된 인증번호 입니다");
                    }else {
                        alert("인증번호가 일치하지 않습니다.");
                    }
                },         
                error : function(){
                    console.log("이메일 인증 실패");
                }
            })
        }else{
            alert("인증번호를 정확하게 입력해주세요.");
            cNumber.focus();
        }
    }else{
        alert("인증번호 받기 버튼을 먼저 클릭해주세요.");
    }
});

 

-- CheckNumberServlet.class 추가 

@WebServlet("/member/checkNumber")
public class CheckNumberServlet extends HttpServlet{
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		try {
			String cNumber = req.getParameter("cNumber");
			String inputEmail = req.getParameter("inputEmail");
			
			// 1 , 2 , 3
			int result = new MemberService().checkNumber(inputEmail,cNumber);
			
			resp.getWriter().print(result);
			
		}catch(Exception e) {
			e.printStackTrace();
		}
	}
}

 

 

-- MemberService.class   인증번호 확인 서비스 추가

	/** 인증번호 확인하는 서비스
	 * @param inputEmail
	 * @param cNumber
	 * @return
	 */
	public int checkNumber(String inputEmail, String cNumber) throws Exception {
		
		Connection conn = getConnection();
		
		int result = dao.checkNumber(conn,inputEmail,cNumber);
		
		close(conn);
		
		return result;
	}
}

 

--MemberDAO.class  인증번호 확인하는 DAO 추가

	/** 인증번호 확인하는 DAO
	 * @param conn
	 * @param inputEmail
	 * @param cNumber
	 * @return
	 */
	public int checkNumber(Connection conn, String inputEmail, String cNumber) throws Exception{
		int result = 0;
		
		try {
			String sql = prop.getProperty("checkNumber");
			
			pstmt = conn.prepareStatement(sql);
			
			pstmt.setString(1, inputEmail);
			pstmt.setString(2, cNumber);
			pstmt.setString(3, inputEmail);
			
			rs = pstmt.executeQuery();
			
			if( rs.next() ) {
				result = rs.getInt(1);
			}
		}finally {
			close(rs);
			close(pstmt);
		}
		return result;
	}
}

 

-- member-sql.xml    인증번호 확인하는 sql 문 추가

	<entry key="checkNumber">
	SELECT 
		CASE WHEN (SELECT '1' FROM CERTIFICATION
		     WHERE EMAIL = ?
		     AND C_NUMBER = ?)  = 1
		   
		THEN NVL( (SELECT '1' FROM CERTIFICATION
		     WHERE EMAIL = ?
		     AND ISSUE_DT + (INTERVAL '5' MINUTE) >= SYSDATE) , '2') 
		
	     ELSE '3'	
	    END			
    FROM DUAL
	</entry>

 

 

 

 

 

 

 

 

메일을 입력후 , 받기버튼 클릭시 !!!! 

버튼누르자마자 아래 5분 카운트다운 시작.

 

 

 

입력한 이메일로 인증번호가 갑니다 !!!!

 

 

DB 에 생성된 인증번호와 , 입력한 인증번호를 비교하여

인증 확인하기.

 

 

 

 

 

 

 

--signUp.js   비밀번호 일치확인 이벤트 작성

 

// 비밀번호 확인 . //////////////////////////////////////////////

const memberPw = document.getElementById("memberPw");
const memberPwConfirm = document.getElementById("memberPwConfirm");
const pwMessage = document.getElementById("pwMessage");
const regExp2 = /^[\w!@#_-]{6,30}$/;

memberPwConfirm.addEventListener("input",function(){

    if( memberPw.value.length==0 || memberPwConfirm.value.length==0 ){
        pwMessage.innerText="영어, 숫자, 특수문자(!,@,#,-,_) 6~30글자 사이로 작성해주세요.";
        pwMessage.classList.remove("confirm","error");
        checkObj.memberPw=false;
        checkObj.memberPwConfirm =false;
    }

    if ( regExp2.test(memberPw.value) || regExp2.test(memberPwConfirm.value) ){

        if ( memberPw.value == memberPwConfirm.value ){
            pwMessage.innerText = "비밀번호가 일치합니다";
            pwMessage.classList.add("confirm");
            pwMessage.classList.remove("error");
            checkObj.memberPw=true;
            checkObj.memberPwConfirm =true;

        }else{
            pwMessage.innerText = "비밀번호가 일치하지않습니다";
            pwMessage.classList.add("error");
            pwMessage.classList.remove("confirm");
            checkObj.memberPw=false;
            checkObj.memberPwConfirm =false;
        }

    }
    else{
        pwMessage.innerText="영어, 숫자, 특수문자(!,@,#,-,_) 6~30글자 사이로 작성해주세요.";
        pwMessage.classList.add("error");
        pwMessage.classList.remove("confirm");
        checkObj.memberPw=false;
        checkObj.memberPwConfirm =false;
    }
});