Eggs Sunny Side Up
본문 바로가기
프레임워크(Framework)/Spring

[Spring] 구글 이메일 인증

by guswn100059 2023. 7. 16.

pom.xml에서 maven 라이브러리 설정!

<!-- 이메일 인증 라이브러리 -->
		<!-- https://mvnrepository.com/artifact/javax.mail/mail -->
		<dependency>
		    <groupId>javax.mail</groupId>
		    <artifactId>mail</artifactId>
		    <version>1.4.7</version>
		</dependency>

signUp.jsp

<div class="mail_wrap">
	<div class="mail_name">이메일</div>
		<div class="mail_input_box">
			<input type="text" name="u_email" id="u_email" placeholder="이메일" >
		<div class="mail_check_wrap">
		<div class="mail_check_button">
			<button type="button" class="btn btn-primary" id="mail-Check-Btn">본인인증</button>
		</div>
		<div class="mail_check_input_box">
			<input class="form-control mail-check-input" placeholder="인증번호 6자리를 입력해주세요!" disabled="disabled" maxlength="6">
		</div>
			<span id="mail-check-warn"></span>
		</div>
	</div>
</div>

js

/*이메일 인증*/
$('#mail-Check-Btn').click(function(){
			var email = $('#u_email').val();
			console.log(email);
			var checkEmail = $('.mail-check-input');
			
			$.ajax({
				url : 'checkEmail.com',
				type : 'post',
				data : {"u_email" : email},
				success : function(data){
					console.log(data);
					checkEmail.attr('disabled', false);
					code = data;
					alert('인증번호가 전송되었습니다.');
				}
			})
		})
		
	// 인증번호 비교 
	// 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);
			$('#userEamil1').attr('readonly',true);
			$('#userEamil2').attr('readonly',true);
			$('#userEmail2').attr('onFocus', 'this.initialSelect = this.selectedIndex');
	         $('#userEmail2').attr('onChange', 'this.selectedIndex = this.initialSelect');
		}else{
			$resultMsg.html('인증번호가 불일치 합니다. 다시 확인해주세요!.');
			$resultMsg.css('color','red');
		}
	});

 

servlet-context.xml

<!-- email 인증 -->
	<beans:bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl">
		<beans:property name="host" value="smtp.gmail.com"/>
		<beans:property name="port" value="587"/>
		<beans:property name="defaultEncoding" value="utf-8"/>
		<beans:property name="username" value="이메일 계정"/>
		<beans:property name="password" value="해당 이메일 비밀번호"/>
		<beans:property name="javaMailProperties">
			<beans:props>
				<beans:prop key="mail.transport.protocol">smtp</beans:prop>
				<beans:prop key="mail.smtp.auth">true</beans:prop> <!-- 2단계본인인증을 했으니 보안적으로 true라고 준다 -->
				<beans:prop key="mail.smtp.starttls.enable">true</beans:prop>
				<beans:prop key="mail.debug">true</beans:prop>
			</beans:props>
		</beans:property>
	</beans:bean>
	
	<!-- email component 등록해주기 -->
	<context:component-scan base-package="spring.service" />

=> 구글 이메일로 인증번호를 발송하고 싶을 때는 

Google 계정 관리를 들어가서

앱 비밀번호로 들어간다.

(이때 2단계 보안설정을 해줘야만 '앱 비밀번호'가 보임!)

들어가면 어떻게 앱 비밀번호를 설정할 건지 나오는데 나는 아래와 같이 생성해주었다.

생성하면 앱 비밀번호를 확인할 수 있다. 

이때 사용된 이메일 계정과 앱 비밀번호를 각각 value값에 알맞게 넣어주기만 하면 됨!


MailSendService.java

package kr.mds.controller;

import java.util.Random;

import javax.mail.MessagingException;
import javax.mail.internet.MimeMessage;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.mail.javamail.JavaMailSender;
import org.springframework.mail.javamail.MimeMessageHelper;
import org.springframework.stereotype.Component;

@Component
public class MailSendService {
	@Autowired
	private JavaMailSender mailSender;
	private int authNumber;
	// 난수 발생

	public void makeRandomNumber() {
		// 난수의 범위 111111 ~ 999999 (6자리 난수)
		Random r = new Random();
		int checkNum = r.nextInt(888888) + 111111;
		System.out.println("인증번호 : " + checkNum);
		authNumber = checkNum;
	}

	// 이메일 보낼 양식!
	public String joinEmail(String email) {
		makeRandomNumber();
		String setFrom = ".com"; // email-config에 설정한 자신의 이메일 주소를 입력
		String toMail = email;
		String title = "회원 가입 인증 이메일 입니다."; // 이메일 제목
		String content = "홈페이지를 방문해주셔서 감사합니다." + // html 형식으로 작성 !
				"<br><br>" + "인증 번호는 " + authNumber + "입니다." + "<br>" + "해당 인증번호를 인증번호 확인란에 기입하여 주세요."; // 이메일 내용 삽입
		mailSend(setFrom, toMail, title, content);
		return Integer.toString(authNumber);
	}

	// 이메일 전송 메소드
	public void mailSend(String setFrom, String toMail, String title, String content) {
		MimeMessage message = mailSender.createMimeMessage();
		// true 매개값을 전달하면 multipart 형식의 메세지 전달이 가능.문자 인코딩 설정도 가능하다.
		try {
			MimeMessageHelper helper = new MimeMessageHelper(message, true, "utf-8");
			helper.setFrom(setFrom);
			helper.setTo(toMail);
			helper.setSubject(title);
			// true 전달 > html 형식으로 전송 , 작성하지 않으면 단순 텍스트로 전달.
			helper.setText(content, true);
			mailSender.send(message);
		} catch (MessagingException e) {
			e.printStackTrace();
		}
	}
}

Controller

@Controller
public class userController {
	@Autowired
	private MailSendService mailService;

	// 회원가입 이메일 인증
	@RequestMapping("/checkEmail.com")
	public @ResponseBody String checkEmail(String u_email) {
		System.out.println(u_email);
		return mailService.joinEmail(u_email);
	}
    
 }

위 코드를 실행하면 아래같이 이메일 인증번호가 전송된다.

html 코드는 잠시 흐린 눈 필수!

댓글