회원가입 구현

최주영·2023년 7월 2일
0

세미프로젝트

목록 보기
9/11

✅ 회원가입

  • 회원가입 정보들을 입력할 때, 각 부분들이 정상적으로 처리되었는지 구분하는 객체를 만듬
  • 다 작성하기에는 너무 길기 때문에, 제일 중요했던 부분인 이메일 인증번호부분만 보여주겠다

  • enrollmember.js 부분

const checkObj = {  // 해당 회원가입 정보입력할 때, 정상적으로 처리됬는지 구분하는 객체
	"memberEmail": false,  
	"memberPw": false,
	"memberPwConfirm": false,
	"memberId": false,
	"memberName": false,
	"memberNickName": false,
	"sendEmail": false, // 인증번호 성공
	"successNumber": false
};

// 인증번호 보내기
const sendBtn = document.getElementById("authEmail");
const timerMessage = document.getElementById("timerMemssageId");
const timerMessageClass = $(".timerMessageClass");

sendBtn.addEventListener("click", function() { // 인증번호 보내기 버튼을 클릭했을 때

	if (checkObj.memberEmail) {  // 유효한 이메일이 작성되어 있을경우에만 메일보내기 
		$.ajax({
			url: "sendEmail",
			data: { "inputEmail": memberEmail.value },
			success: function(result) {
				
				checkObj.sendEmail = true; // 인증버튼이 클릭되어 정상적으로 메일이 보내졌음을 의미
			},
			error: function() {
				checkObj.sendEmail = false; // 인증버튼이 클릭되어 정상적으로 메일이 보내지지 않음을 의미
			}
		})

		timerMessageClass.text("5:00");// 초기값 5분

		min = 4;
		sec = 59;

		checkInterval = setInterval(function() { // 5분에서 1초씩 감소하여, 타이머를 체크
			if (sec < 10) sec = "0" + sec;
			timerMessageClass.text(min + ":" + sec);

			if (Number(sec) === 0) {
				min--;
				sec = 59;
			} else {
				sec--;
			}
			if (min === -1) {
				timerMessageClass.text("인증번호가 만료되었습니다.");
				clearInterval(checkInterval);  // setInterval 함수 반복을 지움.
			}
		}, 1000);   // 1초 지연 후 수행
		alert("인증번호가 발송되었습니다. 이메일을 확인해주세요,,");
	}
});


const cNumber = document.getElementById("cNumber");
const cBtn = document.getElementById("cBtn");

cBtn.addEventListener("click", function() {
	if (checkObj.sendEmail) { // 1. 인증번호 받기 버튼이 클릭되어 이메일 발송되었는지 확인하기.
		if (cNumber.value.length == 6) { // 2. 입력된 인증번호가 6자리 맞는지 확인
		
			$.ajax({
				url: "checkNumber",
				data: {
					"cNumber": cNumber.value,
					"inputEmail": memberEmail.value
				},
				success: function(result) {

					if (result == 1) { //    1  : 인증번호 O , 시간도 O
						clearInterval(checkInterval);  // 제일먼저, 타이머 멈춤
						timerMessageClass.text("인증되었습니다.").css("color","green");
						checkObj.successNumber = true;
						cNumber.readOnly = true; // 인증완료되면 더이상입력못하도록 막음
						memberEmail.readOnly = true;  // 이메일정보 더이상 입력못함
						sendBtn.disabled = true; // 이메일인증 버튼 비활성화
						cBtn.disabled = true; // 인증하기 버튼 비활성화
					} else if (result == 2) { //    2  : 인증번호 O , 시간이 X 
						checkObj.successNumber = false;
						alert("만료된 인증번호 입니다");
					} else { //    3  : 인증번호 X
						checkObj.successNumber = false;
						alert("인증번호가 일치하지 않습니다.");
					}
				},
				error: function() {
					console.log("이메일 인증 실패");
				}
			})
		} else {
			checkObj.successNumber = false;
			alert("인증번호를 정확하게 입력해주세요.");
			cNumber.focus();
		}
	} else {
		checkObj.successNumber = false;
		alert("인증번호 받기 버튼을 먼저 클릭해주세요.");
	}
});

function fn_registEnrollMember(){ // form태그에서token comment">// 이말은 즉 해당 fn_registEnrollMember() 메소드가 true가 될때만 값이 넘어간다
	if(checkObj.memberId && checkObj.memberEmail && checkObj.memberName && checkObj.successNumber &&
		checkObj.memberNickName && checkObj.memberPw&& checkObj.sendEmail && checkObj.memberPwConfirm){
			return true;	
	}
	console.log("다 입력해라")
	return false;
}

properties -> checknumber

  • 인증번호 쿼리문에서 각 조건에 따라 경우의 수를 두는 쿼리문을 만드는 것이 어려웠다
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

✅ 로그아웃

  • 로그아웃 서블릿
		// 로그인 사용자를 로그아웃 시키기
		//HttpSession에 저장된 데이터를 삭제
		//1. HttpSession을 가져오기
		HttpSession session = request.getSession(false);
		
		if(session!=null) { 
			session.invalidate(); //2. HttpSession을 삭제하는 메소드를 이용함
		}
		
		response.sendRedirect(request.getContextPath());  // 메인화면으로 이동
profile
우측 상단 햇님모양 클릭하셔서 무조건 야간모드로 봐주세요!!

0개의 댓글