[Spring][커뮤니티 사이트]회원가입(4) - 이메일 전송 및 정규 표현식(유효성 검사)

우선 이메일 전송을 사용하기에 앞서 pom.xml에 라이브러리를 추가시켜줍니다.

<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-context-support</artifactId>
	<version>${org.springframework-version}</version>
</dependency>
		
<dependency>
	<groupId>javax.mail</groupId>
	<artifactId>javax.mail-api</artifactId>
	<version>1.5.4</version>
</dependency>
		
<dependency>
	<groupId>com.sun.mail</groupId>
	<artifactId>javax.mail</artifactId>
	<version>1.5.3</version>
</dependency>

위 3가지의 라이브러리는 스프링 이메일에 대한 값입니다.

---

이후 mail-context.xml 를 만들어 이메일 전송을 사용할 bean을 추가시켜 줍니다.

<?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">
	
    <!-- naver mail설정 -->
    <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>

우선 저는 naver 메일을 사용하였으며, 이것은 네이버 메일에 대한 값입니다.

만약 다른 메일을 사용할 경우 메이서버 호스트와 포트번호를 그 메일에 맞게 수정 후 사용하시면 됩니다.

설정을 완료했다면 컨트롤러에서 이메일코드를 작성해줍니다.

---

Controller

//의존성 주입
@Autowired
	private JavaMailSender mailSender;

------------------
//이메일 인증
	@PostMapping("/MailCheck")
	@ResponseBody
	public String MailCheck(String email) {
		log.info("이메일 인증번호 발송");
		
		//인증번호 생성
		Random random = new Random();
		int checkNum = random.nextInt(88888)+11111;
		log.info("인증 번호 발행:"+checkNum);
		
		//이메일 html
		//xml 등록된 계정
		String setFrom = "발신 이메일 ID";
		//수신받을 이메일
		String toMail = email;
		//메일 제목
		String title = "시끌벅적 커뮤니티 이메일 인증";
		//메일 내용
		String content = "사용자가 본인임을 확인하는 확인 코드를 입력하세요."
				+"<br><br>"
				+"인증번호는" + checkNum + "입니다";
		
		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 = Integer.toString(checkNum);
		return num;
	}

1. 이메일 전송 또한 ajax를 사용하기위해 ResponseBody 어노테이션을 선언,
2. @Autowired
   private JavaMailSender mailSender; 스프링 메일 기능 쓰기 위해 의존성 주입해줍니다.
3. 이후 인증번호를 받기위해 random 함수를 사용해서 0-99999 사이의 랜덤값을 보낼 수 있도록  변수 선언
4. 이후 setFrom은 xml에서 선언한 발신 이메일 ID 값을 넣어줍니다
5. toMail은 인증번호를 받을 이메일(매개변수로 선언한 email)을 넣어줍니다. 이러면 jsp에서 email에 입력한 값으로 전송을 하게 됩니다.
6. title,content 는 메일의 제목과 내용을 작성하는 것입니다.
7. MimeMessage 타입 객체 선언 및 메일을 보내기 위해 MimeMessageHelper 타입 객체를 선언해줍니다
8. 이후 수신이메일,받는사람,제목,내용을 MimeMessageHelper 객체에 넣어준 후 MimeMessage 객체의 .send 함수를 사용해서 메일을 보냅니다.
9. 마지막으로 인증번호를 리턴값으로 받아줍니다

만약 이메일을 html형식으로 보내고 싶은경우 StringBuffer을 사용해서 보내면 됩니다.(링크)

 

---

JSP

<div class="mail_wrap">이메일
	<div class="mail_input_box">
		<input type="text" name="email" id="email" class="mail_input" placeholder="이메일을 입력해주세요."/> 	
		<div class="mail_check_button">전송</div>
	</div>
    	<!-- email 형식이 올바르지 않을때 경고글을 나오게하기위해 -->
			<span class="mail_input_box_warn"></span>
 </div>

우선 이메일을 입력하는 부분입니다.

정규표현식을 통해 이메일을 제대로 입력하지 않은경우 경고 글이 나오게 하였습니다.

<div class="mail_wrap">이메일
	<div class="mail_input_box">
		<input type="text" name="email" id="email" class="mail_input" placeholder="이메일을 입력해주세요."/> 	
		<div class="mail_check_button">전송</div>
	</div>
<!-- email 형식이 올바르지 않을때 경고글을 나오게하기위해 -->
	<span class="mail_input_box_warn"></span>
	<br>
	인증번호
	<div class="mail_check_input_box" id="mail_check_input_box_false" >
		<input class="mail_check_input"  id="mail_check_input" placeholder="인증번호">
	</div>
</div>

이후 인증번호 입력하는 부분을 추가 시켜줍니다.

<div class="mail_wrap">이메일
	<div class="mail_input_box">
	<input type="text" name="email" id="email" class="mail_input" placeholder="이메일을 입력해주세요."/> 	
	<div class="mail_check_button">전송</div>
</div>
	<!-- email 형식이 올바르지 않을때 경고글을 나오게하기위해 -->
	<span class="mail_input_box_warn"></span>
	<br>
인증번호
	<div class="mail_check_input_box" id="mail_check_input_box_false" >
		<input class="mail_check_input"  id="mail_check_input" placeholder="인증번호">
	</div>
	<!-- 인증번호 일치여부 -->
	<div class="clearfix"></div>
	<span id="mail_check_input_box_warn"></span>
</div>

전체 코드입니다. 마지막 부분은 인증번호가 이메일로 보낸 인증번호와 맞는지 확인 하여 글씨를 나오게 하였습니다.

---

CSS

/* 이메일 인증 문구 */
.correct {
	color: green;
}

.incorrect {
	color: red;
}

두개의 css를 선언하여 스크립트를 통해 글씨가 나오는 부분에 넣기위해 선언하였습니다.

맞으면 초록글씨(correct) 틀릴경우 빨간글씨(incorrect) 로 만들었습니다.

---

JS

//email 정규표현식
function mailFormCheck(email){
	 var mailExp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
	 return mailExp.test(email);
}

우선 메일형식에 맞게 x@x.x  이렇게 정규표현식을 만들었습니다.

var code ="";
//이메일 인증번호 유효성 검사 변수
var mailnumCheck =false; 

//메일 보내기 버튼
$('.mail_check_button').click(function(){
	var email = $('.mail_input').val();
	//정규표현식에 어긋났을경우
	var warnMsg = $('.mail_input_box_warn');
	
	if(mailFormCheck(email)){
		warnMsg.html("이메일이 전송되었습니다.");
		warnMsg.css("display",'inline-block');
		warnMsg.css("color",'green');
	}else{
		warnMsg.html("이메일 형식이 올바르지 않습니다.");
		warnMsg.css("display",'inline-block');
		warnMsg.css("color",'red');
		return false;
	}
	
	$.ajax({
		type : 'post',
		url : '${path}/member/MailCheck?email='+email,
		success : function(data){
			code = data;
		}
	})//end ajax
})

우선 이메일 전송 버튼 클릭 시 행동하는 스크립트 입니다.

1. 우선 스프링에서 메일로 보낸 인증번호에 대한값을 넣기 위해 code = "" 변수를 선언 해주며, 유효성 검사 변수 mailnumCheck를 선언 시켜줍니다
2. HTML 소스에서 각태그의 클래스명으로 값을 가져올 변수를 만들어 줍니다.
3. 이후 정규식 표현을 통해 조건문 선언 후 맞으면 HTML에서 span태그에서 해당 글씨 및 css가 나오게 하였습니다.    만약 형식이 올바르지 않은 상태에서 전송 버튼을 누르게 되면 전송이 되지 않고 글씨가 나옵니다.

이후 전송한 이메일에 받은 인증코드와 입력한 인증코드의 값이 맞는지 비교하는 스크립트를 만들어줍니다.

//이메일 인증코드 비교
$('.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;
	}
})

내가 입력한 인증코드 값에 대한 변수를 선언 , 메시지를 띄울 변수 선언을 해줍니다

앞서 위에 code값 즉 이메일에서 받은 인증코드와 내가 입력한 인증코드를 비교하는 조건문을 만들어줍니다.

이후 맞으면 위에서 선언한 css를 통해 메시지의 글자 색상에 맞게 출력됩니다.

 

이상입니다~

마지막으로 다음주소API와 회원가입 버튼에 대한 스크립트로 마무리를 짓도록 하겠습니다!

혹시나 제 코드를 따라한 후 535 5.7.1 username and password not accepted 1mdwxkgetqkdgnmqvwa-gw - nsmtp

[Nodejs] Error: Invalid login: 535 5.7.1 Username and Password not accepted 오류

이러한 에러가 뜬다면 네이버 메일에서 이 블로그를 보고 수정 후 다시 보내보세요~