TIL #10 | 이메일 인증

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>

email-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">

	 <!-- email 인증 관련   -->
    <bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl">
        <property name="host" value="smtp.gmail.com" />
        <property name="port" value="587" />
        <property name="username" value="이메일"/>
        <property name="password" value="비밀번호" />
        <property name="javaMailProperties">
            <props>
                <prop key="mail.transport.protocol">smtp</prop>
                <prop key="mail.smtp.auth">true</prop>
                <prop key="mail.smtp.starttls.enable">true</prop>
                <prop key="mail.debug">true</prop>
            </props>
        </property>
    </bean>
</beans>

이메일 인증 (customJoin.jsp)

		<!-- 이메일인증 -->
		<div class="form-group">
			<label for="email">이메일 인증</label> 
			<input type="text" name="email" class="form-control" placeholder="Enter email">
		</div>
		<div class="form-inline mb-3">
			<div class="mail_check_input_box" id="mail_check_input_box_false">
				<input type="text" class="mail_check_input form-control col-8" disabled="disabled">
				<button id="mail_check_button" class="btn btn-outline-primary btn-sm">인증번호 전송</button>
			</div>
		</div>
		<!-- 인증번호 확인 -->
		<div class="alert alert-success" id="alert-success-email">인증번호가 일치합니다.</div>
		<div class="alert alert-danger" id="alert-danger-email">인증번호가 일치하지 않습니다.</div>

1. 맨 처음에 인증번호 전송 버튼을 누르기 전에는 인증번호 입력란을 disable
2. 인증 번호(111111~999999)를 작성한 메일로 전송되면 인증번호 입력창을 사용할 수 있게 만듬
3. 실시간으로 인증번호와 내가 입력한 인증번호가 일치한지 확인
4. 일치하면 다시 인증번호 입력 창을 disable시킴
5. 다시 인증번호 전송을 누르면 2번부터 진행\

.
.
.
		//인증번호 알림창 가림
		$("#alert-success-email").hide();
		$("#alert-danger-email").hide();
		//true일시 전송
.
.
.

		var checkCode = false;
.
.
.
		//회원가입 버튼 클릭
		$("#btn-join").on("click", function(e) {
			e.preventDefault();
			var id = $("input[name='userid']").val();
			var name = $("input[name='userName']").val();
			var pw = $("input[name='userpw']").val();
			
			console.log("회원가입_아이디: "+id);
			console.log("회원가입_이름: "+name);
			console.log("회원가입_비밀번호: "+pw);
			
			//아이디,비밀번호 유효성 검사
			if (id == null || id == "") { 
				alert("아이디를 입력해주세요");
				return false;
			} 
			if (pw == null || pw == "") {
				alert("비밀번호를 입력해주세요");
				return false;
			} 
			if (name == null || name == "") {
				alert("이름을 입력해주세요");
				return false;
			} 
			if (checkId == false || id != finalId) { 
				alert("아이디 중복 체크를 해주세요");
				return false;
			} 
			if(checkPw == false || pw != finalPw) {
				alert("비밀번호를 정확히 입력하세요");
				return false;
			}
			if(checkCode == false){
				alert("인증번호를 확인해주세요");
				return false;
			}
			$("form").submit();
		});
		
		//인증번호를 저장할 변수
		var code = "";
		
				//인증번호 이메일 전송
		$("#mail_check_button").on("click",function(e){
			e.preventDefault();
			var email = $("input[name='email']").val();
			var checkBox = $(".mail_check_input");
			
			$.ajax({
				type:"GET",
				url : "/mailCheck",
				data : {email : email},
				contentType :"text/plain;charset=UTF-8",
				success : function(data){ //인증번호를 가져옴
					checkBox.attr("disabled",false); //인증번호 입력 가능
					checkBox.val(''); // 기존에 값이 있었으면 지워줌
					$("#alert-success-email").hide();
					$("#alert-danger-email").hide();
					checkCode = false;
					code = data; // 인증번호를 변수에 저장
				}
			});
		});
		
		//인증코드 입력 시 동일성 확인
		$(".mail_check_input").keyup(function() {
			var inputCode = $(".mail_check_input").val();
			if (inputCode != "" || code != "") {
				if (inputCode == code) {
					$("#alert-success-email").show();
					$("#alert-danger-email").hide();
					$(".mail_check_input").attr("disabled",true); //인증번호 입력 멈춤
					checkCode = true;
				} else {
					$("#alert-success-email").hide();
					$("#alert-danger-email").show();
					checkCode = false;
				}
			}
		});

Controller

	@GetMapping(value="/mailCheck",consumes = {MediaType.TEXT_PLAIN_VALUE})
	@ResponseBody
	public String mailCheck(String email) throws Exception{
		log.info("이메일 데이터 전송확인");
		log.info("인증 메일 : "+email);
		
		Random random = new Random();
		int checkNum = random.nextInt(888888)+111111; // 111111 - 999999
		log.info("인증번호 : "+checkNum);
		
		//이메일 보내기
		String setFrom = "jisung1367@gmail.com";
		String toEmail = 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(toEmail);
            helper.setSubject(title);
            helper.setText(content,true);
            mailSender.send(message);
            
        }catch(Exception e) {
            e.printStackTrace();
        }
        
        String num = Integer.toString(checkNum);
        return num;
	}