Spring 회원가입양식 만들기(Ajax를 활용한 비동기 방식)(2)

- 목차 -

(1) 이메일 인증(with naver)

 

시작전 준비해야되는 것들

네이버

네이버 메일을 사용하여 인증 기능을 만드는 것이기 때문에 네이버에서 SMTP사용 설정 및 만일의 경우를 대비한 보안 설정을 해줍니다.

 

보안 설정은 내정보 > 보안설정에서 새로운 기기 로그인 알림을 ON으로 해줍니다.(해도되고 안해도되고)

 

그 다음 네이버 메일로 들어가 좌측 하단에 있는 환경설정에서 POP3/IMAP 설정 > 들어오면 두가지 설정창이 있는데 여기서 둘다 사용한다고 바꿔놓으시면 됩니다. 

 

 

pom.xml

※(Spring에서 email 서비스를 사용하기 위해 추가할 maven은 아래와 같습니다.)

<!-- STMP 메일 전송 관련 라이브러리 -->
<dependency>
          <groupId>javax.mail</groupId>
          <artifactId>javax.mail-api</artifactId>
          <version>1.5.5</version>
      </dependency>
<dependency>
    <groupId>javax.mail</groupId>
    <artifactId>mail</artifactId>
    <version>1.4.7</version>
</dependency>
<dependency>
    <groupId>com.sun.mail</groupId>
    <artifactId>javax.mail</artifactId>
    <version>1.5.3</version>
</dependency>
<dependency>
    <groupId>org.apache.httpcomponents</groupId>
    <artifactId>httpclient</artifactId>
    <version>4.5.13</version>
</dependency>
<dependency>
    <groupId>org.apache.commons</groupId>
    <artifactId>commons-email</artifactId>
    <version>1.5</version>
</dependency>

여러 사이트를 돌아다녀보며 직접 해본 결과 이렇게 5가지의 maven이 이메일 인증 서비스를 할 때 필요한 maven인 것 같습니다.(몇시간을 찾아 다녔는지ㅠㅠ)

 

servlet-context.xml

<!-- navermail설정 -->
<beans:bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl">
	<beans:property name="host" value="smtp.naver.com"/> <!-- 메이서버 호스트 -->
	<beans:property name="port" value="587"/> <!-- 메이서버 포트번호 -->
	<beans:property name="username" value="아이디"/> <!-- 자신의 이메일 아이디 -->
	<beans:property name="password" value="비번"/> <!-- 자신의 비밀번호 -->
	<!-- 보안연결 SSL과 관련된 설정 -->
	<beans:property name="javaMailProperties">
		<beans:props>
			<beans:prop key="mail.smtp.auth">true</beans:prop>
			<beans:prop key="mail.smtp.starttls.enable">true</beans:prop>
			<beans:prop key="mail.smtps.checkserveridentity">true</beans:prop>
			<beans:prop key="mail.transport.protocol">smtp</beans:prop>
			<beans:prop key="mail.smtps.ssl.trust">*</beans:prop>
			<beans:prop key="mail.debug">true</beans:prop>
			<beans:prop key="mail.smtp.socketFactory.class">javax.net.ssl.SSLSocketFactory</beans:prop>
		</beans:props>
	</beans:property>
</beans:bean>

이제 필요한 것들은 모두 준비되었습니다. HTML5부터 차근차근 해봅시다.

 

(1) 이메일 인증

HTML5

<tr class="email">
	<th>
		<label for="useremail">이메일</label>
	</th>
	<td>
		<p>
			<input id="sm_email" type="text" name="sm_email" title="이메일 주소를 입력해주세요." required/>
			<span id="emailChk" class="doubleChk">인증번호 보내기</span><br/>
			<input id="sm_email2" type="text" name="sm_email2" title="인증번호 입력" disabled required/>
			<span id="emailChk2" class="doubleChk">이메일인증</span>
			<span class="point successEmailChk">이메일 입력후 인증번호 보내기를 해주십시오.</span>
			<input type="hidden" id="emailDoubleChk"/>
		</p>
		<p class="tip">
			아이디 비밀번호 분실시 필요한 정보이므로, 정확하게 기입해 주십시오.
		</p>
	</td>
</tr>

※emailDoubleChk은 유효성 검사를 하기 위해 추가하였습니다.

 

 

JavaScript(jQuery)

//이메일 인증
var code = "";
$("#emailChk").click(function(){
	var sm_email = $("#sm_email").val();
	$.ajax({
        type:"GET",
        url:"mailCheck?sm_email=" + sm_email,
        cache : false,
        success:function(data){
        	if(data == "error"){
        		alert("이메일 주소가 올바르지 않습니다. 유효한 이메일 주소를 입력해주세요.");
				$("#sm_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;
        	}
        }
    });
});

※인증번호가 정상적으로 보내졌다면 인증번호 입력하는 input창의 disabled되어있는 부분을 false로 풀어줍니다.

 

 

Controller

(Ajax를 사용할 때는 @ResponseBody 꼭 있어야 합니다.)

@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 = "abcd@company.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;
}

※간단한 메일 내용과 반환값 작업을 해줍니다.

 

 

JavaScript(jQuery)

//이메일 인증번호 대조
$("#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);
	}
});

※이제 이메일을 보내고 나면 활성화된 인증번호 입력란에 인증번호를 입력하고 인증 버튼을 누르면 기존에 넘어왔던 인증번호와 사용자가 입력한 번호를 대조해주고 맞다면 마찬가지로 emailDoubleChk에 true가 저장될 수 있도록 해줍니다.

 

 

결과

입력하기 전

 

이메일 보내기

 

이메일 도착 확인

 

인증번호 입력

 

이메일 인증 후 번호 일치 확인

 

이제부터는 여러분도 네이버메일을 사용한 이메일 인증 기능을 사용할 수 있게되었습니다~

 

다음 포스팅에서는 휴대폰 문자 인증 기능을 다뤄보겠습니다.