java,spring]회원가입시 메일 인증하기 - 2 [인증번호 일치여부 확인]

	@RequestMapping("/CheckMail")
    @ResponseBody
	public String SendMail(String mail, HttpSession session) {

		Random random = new Random();
		String key = "";

		SimpleMailMessage message = new SimpleMailMessage();
		message.setTo(mail); // 스크립트에서 보낸 메일을 받을 사용자 이메일 주소
		// 입력 키를 위한 코드
		for (int i = 0; i < 3; i++) {
			int index = random.nextInt(25) + 65; // A~Z까지 랜덤 알파벳 생성
			key += (char) index;
		}
		int numIndex = random.nextInt(8999) + 1000; // 4자리 정수를 생성
		key += numIndex;
		message.setSubject("인증번호 입력을 위한 메일 전송");
		message.setText("인증 번호 : " + key);
		javaMailSender.send(message);

		return key;
	}
}

지난번 포스팅에서는 void함수여서 인증 키를 세션에 저장하고 사용하려 했지만

값을 받지 못해서 서버단에서 map을 사용하고, @Response Body 어노테이션을 지우고 리턴 값을 생성해줬다.

 

@ResponseBody를 추가하고 그냥 바로 String으로 리턴을 해준다.

개발자 도구에 값이 잘 찍혔다. 

 

 

---

 

인증 키 일치여부 확인하기.

 

$(".compare").on("propertychange change keyup paste input", function() {
		if ($(".compare").val() == key) {   //인증 키 값을 비교를 위해 텍스트인풋과 벨류를 비교
			$(".compare-text").text("인증 성공!").css("color", "black");
			isCertification = true;  //인증 성공여부 check
		} else {
			$(".compare-text").text("불일치!").css("color", "red");
			isCertification = false; //인증 실패
		}
	});

 

아래와 같은 메서드를 사용하여 인증키 값 입력란에 키가 입력될 때마다

값을 비교하여 인증 성공여부를 좌측 텍스트에 출력한다.

 

 

 

인증 키 일치여부가 잘 작동된 모습이고.

 

$(".submit-btn").click(function(){
		if(isCertification==false){ //인증이 완료되지 않았다면
			alert("메일 인증이 완료되지 않았습니다.");
		}
	});
	

아래에 자바스크립트 코드를 이용하여 회원 가입 전, 메일 인증 여부에 대한 검사를 진행합니다.

 

메일 인증이 되었다면 submit버튼을 클릭하면 서버측으로 사용자의 입력값이 전송됩니다.

 

---

300x250

조건 미 충족시, 페이지 전환 막기

 

 

아래와 같이 스크립트만 추가하면 form의 submit버튼을 누르게 되면 조건이 충족되지 않아도 페이지가 넘어가 서버 측으로 데이터가 전송이 된다.

 

맨 처음에는 서버단에서 값을 비교해서 쿼리문을 실행하지 않으면 되지 않을까 하다가, 괜히 서버단에서 조건문 하나 더 추가하고 서버 측에 요청이 하나 더 가고.. 더 좋은 방법이 없을까 찾다가 스크립트로 제어할 수 있는 방법을 찾았다.

이를 막기위해 form의 속성을 추가해준다.

onsubmit 항복에 return 함수();를 추가하면 submit을 눌렀을 때, 함수를 실행한다.

 

$(".submit-btn").click(function submitCheck(){
		if(isCertification==false){
			alert("메일 인증이 완료되지 않았습니다.");
			return false;
		}else
			true;
	});

위와 같이 함수 이름을 똑같이 해주고,

인증이 잘 완료되면 ture를 리턴 아니면 false를 리턴해서 서버 측으로 데이터를 가지 못하도록 막는다.