22.06.22 user 아이디 중복 체크,이메일 인증

아이디 중복 체크

userJoin.jsp

아이디값을 받아와서 비동기 통신을 통해 서버와 통신하고
중복되었다면 '중복된 아이디입니다.',
아니라면 '사용 가능한 아이디입니다' 라고 화면에 띄워주고
attr( )를 이용해서 readonly 속성을 true를 주어서 더이상 작성하지 못하도록 하자.

<script>
	$(function() {
		
		//아이디 중복 체크
		$('#idCheckBtn').click(function() {
			const userId = $('#userId').val();
            
            if(userId === ''){
            	alert('아이디는 필수값입니다.');
            	return;
            }
            
			$.ajax({
				type: 'post',
				url: '<c:url value="/user/idCheck" />',
				data: userId,
				contentType: 'application/json',
				success: function(data) {
					if(data === 'ok'){
						$('#userId').attr('readonly', true);
						$('#msgId').html('사용 가능한 아이디입니다.');
					} else {
						$('#msgId').html('중복된 아이디입니다.');
					}	
				},
				error: function() {
					alert('서버 에러입니다. 관리자에게 문의하세요.');
				}
			}); //end ajax 중복확인 비동기 통신 끝.			
		}); //아이디 중복 체크 끝
	}); //end jQuery
</script>

UserController

userJoin.jsp 에서 /user/idCheck요청.

<script>
//아이디 중복 체크(비동기)
@ResponseBody //RestController가 아닌 경우에는 아노테이션을 붙여야 비동기 통신이 가능하다.
@PostMapping("/idCheck")
public String idCheck(@RequestBody String userId) {
	int result = service.idCheck(userId);
	if(result == 1) {
		return "duplicated";
	} else {
		return "ok";
	}
}
</script>

UserService

@Override
public int idCheck(String id) {
	return mapper.idCheck(id);
}

UserMapper.xml

<select id="idCheck" resultType="int">
	SELECT COUNT(*) FROM users
	WHERE userId=#{id}
</select>

이메일 인증

휴대폰번호 인증은 돈이 들기때문에 이메일 인증으로 진행
스프링에서 제공하는 무료 라이브러리 사용.

userJoin.jsp

본인인증 버튼에 id 추가

<div class="input-group-addon">
	<button type="button" id="mail-check-btn" class="btn btn-primary">본인인증</button>
</div>

사용자가 이메일을 입력하고 인증버튼을 누르면
userEmail1, userEmail2를 합쳐서 완성된 이메일을 만들고 비동기 방식으로 전송.

<script>
//인증번호 이메일 전송
$('#mail-check-btn').click(function() {
         
	const email = $('#userEmail1').val() + $('#userEmail2').val();
    console.log('완성된 이메일: ' + email);
         
    $.ajax({
    	type: 'get',
        url: '<c:url value= "/user/mailCheck?email=" />' + email,
        success: function(data) { //여기로 인증번호가 온다.
        }            
	}); //end ajax(이메일 전송)         
}); //이메일 전송 끝.
</script>

라이브러리 가지고 오기

1.maven Repository - mail - 2. JavaMail API (compat)
2.maven Repository - Spring Context Support
pom.xml

<!-- java에서 메일을 보내기 위해 필요로 하는 라이브러리-->
<dependency>
	<groupId>javax.mail</groupId>
	<artifactId>mail</artifactId>
	<version>1.4.7</version>
</dependency>
<!-- 간단한 설정을 통해 메일 라이브러리를 사용할 수 있도록 도와주는 spring-context-support
			메일 뿐만아니라 캐시메모리, 메일, 스케쥴링 UI와 관련된 다양한 부가기능들을 지원하는 라이브러리 -->
<dependency>
	<groupId>org.springframework</groupId>
	<artifactId>spring-context-support</artifactId>
	<version>${org.springframework-version}</version>
</dependency>

emil-config.xml 생성

Servlet-config파일 말고 새파일 생성 (Spring Bean Definition file)
context 네임스페이스 추가
네이버,구글 사용 가능하며 아래 설정들이 있어야 이메일 전송이 가능하다.

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns:context="http://www.springframework.org/schema/context"
	xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
		http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-4.3.xsd">
	
	<context:property-placeholder location="classpath:/db-config/email.properties"/>
	
	<!-- 이메일 인증 관련 빈 등록 -->
	<bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl">
		<property name="host" value="smtp.gmail.com"/> <!-- smtp.naver.com -->
		<property name="port" value="587" />
		<property name="username" value="${email.account}"/>
		<property name="password" value="${email.password}"/>
		<property name="javaMailProperties">		
			
			<props>
            <prop key="mail.smtp.starttls.enable">true</prop>
            <prop key="mail.smtp.auth">true </prop>
            <prop key="mail.transport.protocol">smtp</prop>
            <prop key="mail.debug">true</prop>
            <prop key="mail.smtps.ssl.trust">*</prop>
            <prop key="mail.smtp.ssl.protocols">TLSv1.2</prop>
         </props>
		</property>		
	</bean>
</beans>

email.properties

개인정보가 적힌 파일.보안을 위해서 생성.

email.account = jjw6566@naver.com
email.password = 메일의 실제 비밀번호

email.account = jwons44@gmail.com
email.password = rpsmdrulibnslwev

web.xml

설정 파일 읽어오는 설정 추가

<servlet>
	<servlet-name>appServlet</servlet-name>
	<servlet-class>org.springframework.web.servlet.DispatcherServlet
	</servlet-class>
	<init-param>
		<param-name>contextConfigLocation</param-name>
		<param-value>
			/WEB-INF/config/servlet-config.xml
			/WEB-INF/config/email-config.xml				
		</param-value>
	</init-param>
	<load-on-startup>1</load-on-startup>
</servlet>

이메일 전송 로직 작성

userJoin.jsp

인증 이메일 전송 버튼을 클릭하면 이벤트 발생.
인증로직을 실행하고 인증번호가 data로 넘어오면 비활성화 상태였던 인증번호 입력창을 활성화 시킨다.

<script>
let code = '';//이메일 전송 인증번호 저장을 위한 변수

//인증번호 이메일 전송
	$('#mail-check-btn').click(function() {
			
		const email = $('#userEmail1').val() + $('#userEmail2').val();
		console.log('완성된 이메일: ' + email);
			
		$.ajax({
			type: 'get',
			url: '<c:url value= "/user/mailCheck?email=" />' + email,
			success: function(data) { //여기로 인증번호가 온다.
				console.log('컨트롤러가 전달한 인증번호: ' + data);
				$('.mail-check-input').attr('disabled', false)
				//비활성된 인증번호 입력창 활성화.
				code = data;
				alert('인증번호가 전송되었습니다. 확인 후 입력란에 정확하게 입력하세요!');
			}				
		}); //end ajax(이메일 전송)			
	}); //이메일 전송 끝.
</script>

UserController

userJoin.jsp /mailCheck?email=" 요청과 함께 완성된 email 넘어온다.
mailService.joinEmail(email)를 부르면서 완성된 이메일을 전달하면
MailSendService에서는 이메일을 보내고 함께 생성한 인증번호를 전달.

<script>
@Autowired
private MailSendService mailService;
...    
//이메일 인증 
@GetMapping("/mailCheck")
@ResponseBody
public String mailCheck(String email) { 
	//json으로 오는거 아니고 url에 묻어서오기 때문에 @Requestbody 사용 안해도 된다.
	System.out.println("이메일 인증 요청 들어옴!");
	System.out.println("인증 이메일: " + email);
	return mailService.joinEmail(email);
}
</script>

MailSendService

스프링에서 제공하는 JavaMailSender 타입을 참고하는 변수 선언.
6자리의 난수를 발생시켜 인증번호를 생성한다.

<script>
package com.spring.myweb.util;

@Service
public class MailSendService {
	
	@Autowired
	private JavaMailSender mailSender;
	private int authNum; //인증번호
	
	//난수 발생(마음대로 설정)
	public void makeRandomNumber() {
		//난수의 범위: 111111 ~ 999999
		Random r = new Random();
		int checkNum = r.nextInt(888888) + 111111;
		System.out.println("인증번호: " + checkNum);
		authNum = checkNum;
	}
	
	//회원 가입시 사용할 이메일 양식
	public String joinEmail(String email) {
		makeRandomNumber(); //난수생성 메서드 호출
		
		String setFrom = "jwons44@gmail.com"; //email-config에 설정한 자신의 이메일 주소를 입력.보내는 사람
		String toMail = email; //수신받을 이메일.받는 사람
		String title = "회원 가입 인증 이메일 입니다."; //이메일 제목
		String content = "홈페이지를 방문해 주셔서 감사합니다." +
						"<br><br>" +
						"인증 번호는" + authNum + "입니다." +
						"<br>" +
						"해당 인증 번호를 인증번호 확인란에 기입하여 주세요.";//이메일 내용 삽입.
		
		mailSend(setFrom, toMail, title, content);
		return Integer.toString(authNum); //정수를 문자열로 변경해서 리턴.
	}	
	
	//이메일 전송 메서드
	public void mailSend(String setFrom, String toMail, String title, String content) {
		
		try {
			MimeMessage mesaage = mailSender.createMimeMessage();//이미지 전송 가능
			//기타 설정들을 담당할 MimeMessageHelper 객체를 생성.
			//생성자의 매개값으로 MimeMessage 객체, bool의 논리값, 문자 인코딩 설정
			//true 매개값을 전달하면 MultiPart(이미지,오디오 등 대용량 파일 같이 전송) 형식의 메세지 전달이 가능.
			//값을 전달하지 않으면 단순 텍스트만 사용.
			MimeMessageHelper helper = new MimeMessageHelper(mesaage, true, "utf-8");
			
			helper.setFrom(setFrom);
			helper.setTo(toMail);
			helper.setSubject(title);
			//true를 전달해야 html 형식으로 전송하겠다는 뜻, 아무것도 작성하지 않으면 단순 텍스트.
			helper.setText(content, true);
			
			mailSender.send(mesaage); //메일 전송
			
		} catch (MessagingException e) {
			e.printStackTrace();
		}
	}	
}
</script>

작성된 이메일로 인증번호가 포함된 메일이 온다.

userJoin.jsp

인증번호 작성란 생성

<!-- 인증번호 입력란 -->
<div class="mail-check-box">
	<input type="text" class="form-control mail-check-input" placeholder="인증번호 6자리를 입력하세요." maxlength="6" disabled="disabled">
    <span id="mail-check-warn"></span>
</div>

인증번호 비교

userJoin.jsp

<script>
//인증번호 비교
	//blur -> focus가 벗어나는 경우 발생
	$('.mail-check-input').blur(function() {
		const inputCode = $(this).val(); //인증번호 입력 창
		const $resultMsg = $('#mail-check-warn'); //요소 얻어오기
			
		if(inputCode === code){ //인증번호와 일치하면 인증성공
			$resultMsg.html('인증번호가 일치합니다.');
			$resultMsg.css('color', 'green');
			$('#mail-check-btn').attr('disabled', true)//이메일 인증 더 이상 못하게 버튼 비활성.
			//값을 넘겨야하는 것들에 disabled 주면 값이 넘어가지 않기 때문에 함부로 사용하지 말자.
			$('#userEmail1').attr('readonly', true);
			$('#userEmail2').attr('readonly', true); //select라서 readonly 적용이 안된다.
			
			//초기값을 사용자가 선택한 값으로 무조건 설정하는 방법.(select에서 readonly 대용)
			$('#userEmail2').attr('onFocus', 'this.initalSelect = this.selectedIndex');
			$('#userEmail2').attr('onChange', 'this.selectedIndex = this.initalSelect');
		} else {
			$resultMsg.html('인증번호를 다시 확인해 주세요.');
			$resultMsg.css('color', 'red');
		}
	});//인증번호 이벤트 끝
</script>