[Spring]이메일 인증번호 전송 & 유효성검사

출처 : https://kimvampa.tistory.com/105?category=771727 

이분의 블로그 글을 통해 이메일 인증 및 유효성 검사에 대해 공부를 하게 되었다.

제 블로그를 먼저 보게된다면 미흡한(이해가 안되는부분?) 부분은 이분 블로그를 참조해주세요!

[Spring][쇼핑몰 프로젝트][4] 인증번호 이메일 전송(1)

1.이메일 전송 환경 세팅

 

pom.xml

        <!-- https://mvnrepository.com/artifact/javax.mail/mail -->
        <dependency>
            <groupId>javax.mail</groupId>
            <artifactId>mail</artifactId>
            <version>1.4.7</version>
        </dependency>        
        
        <!-- https://mvnrepository.com/artifact/org.springframework/spring-context-support -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-context-support</artifactId>
            <version>${org.springframework-version}</version>
        </dependency>

mail-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd">
	
    <!-- navermail설정 -->
    <bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl"> 
     <property name="host" value="smtp.naver.com"/> <!-- 메이서버 호스트 -->
     <property name="port" value="587"/> <!-- 메이서버 포트번호 -->
     <property name="username" value="이메일 아이디"/> <!-- 인증번호를 보낼 아이디 -->
     <property name="password" value="이메일 비밀번호"/> <!-- 비밀번호 -->
     
       <!-- 보안연결 SSL과 관련된 설정 ,
       메일 전달 프로토콜 세부 속성을 설정-->
     <property name="javaMailProperties">
      <props>
      <prop key="mail.smtp.auth">true</prop>
      <prop key="mail.smtp.starttls.enable">true</prop>
      <prop key="mail.smtps.checkserveridentity">true</prop>
      <prop key="mail.smtps.ssl.trust">*</prop>
      <prop key="mail.debug">true</prop>
      <prop key="mail.smtp.socketFactory.class">javax.net.ssl.SSLSocketFactory</prop>
      </props>
     </property>
    </bean>


</beans>

 

2. Controller & View & Script

 

VIEW(JSP)/CSS

/html
<div class="mail_wrap">
	<div class="mail_name">이메일</div>
	<div class="mail_input_box">
		<input type="text" name="email" class="mail_input" /> 	
	</div>
		<span class="final_mail_ck">이메일을 입력해주세요.</span>
		<span class="mail_input_box_warn"></span>
        <!-- email 형식이 올바르지 않을때 경고글을 나오게하기위해(유효성검사) -->
			
	<div class="mail_check_wrap">
    <!-- 입력란 색상 변경하기위해 id 추가 -->
		<div class="mail_check_input_box" id="mail_check_input_box_false">
 		<!-- 전송 누르기전 비활성화 시키기 위해 -->
			<input class="mail_check_input" disabled="disabled">	
		</div>
		
        <div class="mail_check_button">
			<span>인증번호 전송</span>
		</div>
		
        <div class="clearfix"></div>
			<span id="mail_check_input_box_warn"></span> 
            <!-- 인증번호 일치여부 경고글 역할 -->
		</div>
	</div>
        
   ----------------------------------------------------------
   //css
   /* 인증번호 입력란 
   	#mail_check_input_box_false 와 #mail_check_input_box_true 추가 함으로써
    false에는 회색 true는 흰색으로 설정, 추후 이메일 전송이 완료되었을때 색상이 변경되기위해 
   */
#mail_check_input_box_false {
	background-color: #ebebe4;
	width:10%;
}

#mail_check_input_box_true {
	background-color: white;
}
.mail_check_button{
    border: 1px solid black;
    width: 10%;
    text-align: center;
    background-color: #ececf7;
    cursor: pointer;
}
/* 이메일 인증 문구 
script에서 인증번호를 입력하였을 때 인증번호가 맞으면 초록색으로, 틀렸으면 빨간색 글씨가
출력되게 하기위해서 
*/
.correct {
	color: green;
}

.incorrect {
	color: red;
}

.final_mail_ck {
	display: none;
}

Script

var code = ""; //인증번호 저장하기 위한 코드

var mailCheck = false; //이메일
var mailnumCheck =false; //이메일 인증번호

//이메일 보내기
	$(".mail_check_button").click(function(){
		var email = $(".mail_input").val();//입력한 이메일
		var checkBox = $(".mail_check_input");//인증번호 입력란
		var boxWrap = $(".mail_check_input_box"); //인증번호 입력란 박스
		var warnMsg = $(".mail_input_box_warn"); // 유효성 검사를 위해
		
		if(mailFormCheck(email)){
			warnMsg.html("이메일이 전송되었습니다. 이메일을 확인해주세요.");
			warnMsg.css("display", "inline-block");
		}else{
			warnMsg.html("올바르지 못한 이메일 형식입니다.");
			warnMsg.css("display", "inline-block");
			return false;
		}
		
		$.ajax({
			type:"POST",
			url:"mailCheck.do?email=" +email,
			success:function(data){
                
                //.mail_check_input << 부분이 
                // 메일이 성공적으로 전송이 되면 입력이 가능하도록 속성 변경 코드 추가
				checkBox.attr("disabled",false); 
                //메일이 성공적으로 되면 회색부분 css -> 흰색 css로 변경 되도록함
				boxWrap.attr("id" , "mail_check_input_box_true");
				code = data;
			}			
		})		
	});
    
-----------------------------------------
//인증번호 비교
	$(".mail_check_input").blur(function(){
		var inputCode = $(".mail_check_input").val(); //입력코드(사용자가 입력하는코드)
		var checkResult = $("#mail_check_input_box_warn") //비교 결과
		
		if(inputCode == code){ //일치할경우
			checkResult.html("인증번호가 일치합니다.");
			checkResult.attr("class", "correct");
			mailnumCheck = true;
		}else{
			checkResult.html("인증번호를 다시 확인해주세요.");
			checkResult.attr("class","incorrect");
			mailnumCheck = false;
		}
	});
    
 ---------------------------------------------
 //이메일 유효성 검사
 
 //email 형식 유효성검사
function mailFormCheck(email){
	 var form = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
	 return form.test(email);
	 //정규표현식에 부합 할경우 true 아닐경우 false 반환
}

Controller

MemberController.java 에서 JavaMailSender 객체 타입인 mailSender 변수를 선언함에 있어, 의존성 주입을 사용하기 위해 @Autowired 어노테이션을 사용하였습니다.

@Autowired
private JavaMailSender mailSender;

	//회원가입 이메일 인증
	@RequestMapping(value="/mailCheck.do" ,method=RequestMethod.POST)
	@ResponseBody
	public String mailCheck(String email)throws Exception{
		
		logger.info("이메일 데이터 전송확인");
		//logger.info("인증번호 :" + email);
		
		//인증번호(난수)생성
		Random random = new Random();
		int checkNum = random.nextInt(888888)+ 11111; //11111 ~ 99999 난수 얻기위해 
		logger.info("인증번호:" + checkNum);
		
		//이메일 보내기
		String setFrom= "cckwang2345@naver.com"; //xml에 삽입한 자신의 계정
		String toMail = email; //수신받을 이메일
		String title = "회원가입 인증 메일";/ /이메일 제목
		String content = "홈페이지를 방문해주셔서 감사합니다."
				+"<br><br>"
				+"인증번호는" + checkNum + "입니다"
				+"<br>"
				+"해당 인증번호를 인증번호 확인란에 기입해주세요.";
        try {         
        //이메일 전송을 위한 코드
        	MimeMessage message = mailSender.createMimeMessage();
            MimeMessageHelper helper = new MimeMessageHelper(message, true, "utf-8");
            helper.setFrom(setFrom);
            helper.setTo(toMail);
            helper.setSubject(title);
            helper.setText(content,true);
            mailSender.send(message);
            
        }catch(Exception e) {
            e.printStackTrace();
        }
		
        //String 타입 변수 num을 선언하여 인증번호(checkNum)를 String으로 형 변환 한 값 할당
		String num = Integer.toString(checkNum);
		return num;
	}