Spring mini project 회원가입 이메일 인증

전에 구성했던 화면중에 이메일 인증관련 구성요소가 있었는데 보안을 좀더 높이기 위해서 회원가입에 필요한 인증부분이 필요하다고 생각을 해서 이메일 인증에 대한 글을 쓸려고 한다 

 

물론... 블로그를 참고해서 했다. 필요한 부분이 생각보다 많았다..

 

추후 Spring에서 해당 SMTP 서버를 사용하기 전에 해당 Naver SMTP 서버를 활성화 시켜준다. 네이버 메일서버를 외부에서 사용하기 위해서는 pop3/SMTP 설정을 필수로 활성화 시켜주어야된다.

 

자아..이렇게 설정을 해주고 이메일 관련 dependency를 pom.xml에 넣어준다. 

이제 email에 대한 Controller설계를 해주자

 

@RequestMapping(value = "/mailCheck", method = RequestMethod.GET)
	@ResponseBody
	public String mailCheck(@RequestParam("sm_email") String sm_email) throws Exception{
	    int serti = (int)((Math.random()* (99999 - 10000 + 1)) + 10000);
	    
	    String from = "cjstmdgusqw@naver.com";//보내는 이 메일주소
	    String to = sm_email;
	    String title = "회원가입시 필요한 인증번호 입니다.";
	    String content = "[인증번호] "+ serti +" 입니다. <br/> 인증번호 확인란에 기입해주십시오.";
	    String num = "";
	    try {
	    	MimeMessage mail = mailSender.createMimeMessage();
	        MimeMessageHelper mailHelper = new MimeMessageHelper(mail, true, "UTF-8");
	        
	        mailHelper.setFrom(from);
	        mailHelper.setTo(to);
	        mailHelper.setSubject(title);
	        mailHelper.setText(content, true);       
	        
	        mailSender.send(mail);
	        num = Integer.toString(serti);
	        
	    } catch(Exception e) {
	        num = "error";
	    }
	    return num;
	}

다음과 같이 설정을 해주면 

 

다음과 같이 인증번호가 도착을 하게된다!!

 

이제 인증번호를 입력해주면 

 

이메일 인증은 성공했다. 

아 물론 JS에서도 이메일관련해서 개발을 하였다

1. 인증번호가 일치할때 메세지 남기기

$("#emailChk").click(function(){
			var sm_email = $("#email").val();
			$.ajax({
		        type:"GET",
		        url:"mailCheck?sm_email=" + sm_email,
		        cache : false,
		        success:function(data){
		        	if(data == "error"){
		        		alert("이메일 주소가 올바르지 않습니다. 유효한 이메일 주소를 입력해주세요.");
						$("#email").attr("autofocus",true);
						$(".successEmailChk").text("유효한 이메일 주소를 입력해주세요.");
						$(".successEmailChk").css("color","red");
		        	}else{	        		
						alert("인증번호 발송이 완료되었습니다.\n입력한 이메일에서 인증번호 확인을 해주십시오.");
		        		$("#sm_email2").attr("disabled",false);
		        		$("#emailChk2").css("display","inline-block");
		        		$(".successEmailChk").text("인증번호를 입력한 뒤 이메일 인증을 눌러주십시오.");
		        		$(".successEmailChk").css("color","green");
		        		code = data;
		        	}
		        }
		    });
		});
		
		//이메일 인증번호 대조
		$("#emailChk2").click(function(){
			if($("#sm_email2").val() == code){
				$(".successEmailChk").text("인증번호가 일치합니다.");
				$(".successEmailChk").css("color","green");
				$("#emailDoubleChk").val("true");
				$("#sm_email2").attr("disabled",true);
				//$("#sm_email").attr("disabled",true);
			}else{
				$(".successEmailChk").text("인증번호가 일치하지 않습니다. 확인해주시기 바랍니다.");
				$(".successEmailChk").css("color","red");
				$("#emailDoubleChk").val("false");
				$("#sm_email2").attr("autofocus",true);
			}
		});

2. 회원가입 버튼을 눌렀을 때 혹시나 인증번호가 일치하지 않을때 회원가입되는 불상사를 없애기 위한 새로운 조건문

 if($("#sm_email2").val() != code){ 
		  		$(".successEmailChk").text("인증번호가 일치하지 않습니다. 확인해주시기 바랍니다.");
				$(".successEmailChk").css("color","red");
				alert("인증번호가 일치하지 않습니다. 확인해주시기 바랍니다.");
		  }

이런식으로 완성해주었다!