요즘사이트에서 회원가입을 하다보면 꼭! 각종 인증들 이있다.
사용자 입장에서는 굳이?? 이걸 해야하나? 싶기도 하겠지만
사업자 입장에서보면 각종 Black Consumer 외 다른 부분에 대해서
보안을 강조한다. 그렇기 때문에 휴대폰인증 이메일인증은 꼭 필요하다고 말하고 싶다.
why 이메일인증?? 😞
JUST
비싸니까..
이유는 단순하다 그냥 프로젝트에 대해서 돈이들기 떄문이다.스프링에서 기본으로 제공하는 API로 충분한 이메일 인증이 가능하기 때문이다!
자 이제 시작해보자!
1. API 다운
https://mvnrepository.com/에서 javax.mail과 spring-context-support을 다운받아 준다.
<!-- 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>5.3.9</version>
</dependency>여러분의 시간은 소중하니까. 이걸 pom.xml 라이브러리에 추가해준다.
👻 나름의 꿀팁 👻
<version>${org.springframework-version}</version> 이거 써주면 알아서 버전 맞춰준다!
2. JSP 수정(HTML , JS 영역)
<div class="form-group email-form">
<label for="email">이메일</label>
<div class="input-group">
<input type="text" class="form-control" name="userEmail1" id="userEmail1" placeholder="이메일" >
<select class="form-control" name="userEmail2" id="userEmail2" >
<option>@naver.com</option>
<option>@daum.net</option>
<option>@gmail.com</option>
<option>@hanmail.com</option>
<option>@yahoo.co.kr</option>
</select>
/div>
<div class="input-group-addon">
<button type="button" class="btn btn-primary" id="mail-Check-Btn">본인인증</button>
</div>
<div class="mail-check-box">
<input class="form-control mail-check-input" placeholder="인증번호 6자리를 입력해주세요!" disabled="disabled" maxlength="6">
</div>
<span id="mail-check-warn"></span>
</div>기존의 Jsp에서 본인인증 버튼을 추가하고 인증번호를 받을 자리를 남겨 두었다. 😁
2-1 JS 작성
$('#mail-Check-Btn').click(function() {
const eamil = $('#userEmail1').val() + $('#userEmail2').val(); // 이메일 주소값 얻어오기!
console.log('완성된 이메일 : ' + eamil); // 이메일 오는지 확인
const checkInput = $('.mail-check-input') // 인증번호 입력하는곳
$.ajax({
type : 'get',
url : '<c:url value ="/user/mailCheck?email="/>'+eamil, // GET방식이라 Url 뒤에 email을 뭍힐수있다.
success : function (data) {
console.log("data : " + data);
checkInput.attr('disabled',false);
code =data;
alert('인증번호가 전송되었습니다.')
}
}); // end ajax
}); // end send eamil우선 회원가입 도중에 진행되는 부분이라 비동기통신인 ajax를 진행한다.
GET방식으로 진행하며 기존에 있던 name 파라미터 값을 그대로 컨트롤러로 옮기려고한다.
3. SPRING 부분
//이메일 인증
@GetMapping("/mailCheck")
@ResponseBody
public String mailCheck(String email) {
System.out.println("이메일 인증 요청이 들어옴!");
System.out.println("이메일 인증 이메일 : " + email);
}
Get방식으로 가져오며 이메일을 확인 할 수있게 간단하게 프린트로 찍어준다.
이때 변수의 이름이 동일하면 @붙는 아노테이션을 지정 안할수 있다.
컨트롤러에서 다 작성해주어도 되지만 컨트롤러가 너무 비대해지기 때문에 따로 MailSendService라는
CLASS를 하나 만들어서 진행하려고 한다.
클래스는 만들었다면 빈등록을 해주어야한다.
Spring 폴더에 있는 경로로 빈 xml 파일을 만들어 주어 설정값을 해주었다.
XML 빈등록
<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" />
<property name="port" value="587" />
<property name="username" value="${email.account}" />
<property name="password" value="${email.password}" />
<property name="javaMailProperties">
<props>
<prop key="mail.transport.protocol">smtp</prop>
<prop key="mail.smtp.auth">true</prop>
<!-- gmail의 경우 보안문제 업데이트로 인해 SSLSocketFactory를 추가해야 smtp 사용 가능. -->
<prop key="mail.smtp.socketFactory.class">javax.net.ssl.SSLSocketFactory</prop>
<prop key="mail.smtp.starttls.enable">true</prop>
<prop key="mail.debug">true</prop>
<prop key="mail.smtp.ssl.trust">smtp.gmail.com</prop>
<prop key="mail.smtp.ssl.protocols">TLSv1.2</prop>
</props>
</property>
</bean>각 property의 값
host : 이메일 보낼 url을 입력
port : 포트 번호 입력
userName : 이메일을 보낼 아이디 입력
Password : 이메일 비번
아래 키값은 보안 업데이트로 따로 추가 해 주어야한다.
아이디 비밀번호가 노출되는게 싫은 경우 file을 따로 만들어서 빈 주입후 따로 사용이 가능하다.
다시 돌아와서
MailSendService.class 제작🥰
@Component
public class MailSendService {
@Autowired
private JavaMailSenderImpl 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();
}
}
}🥰
makeRandomNumber()
이메일을 보낼때 인증번호로 111111~999999까지의 난수를 발생시킨다.
public String joinEmail(String email)
컨트롤러에서 아이디가 넘어오면서 붙을 스트링값
메일 샌드로 보내줄 준비를 마친다.
public void mailSend(String setFrom, String toMail, String title, String content) {
MimeMessage message = mailSender.createMimeMessage(); 객체를 생성해준다.
이것이 스프링에서 제공하는 메일 API이다.
여기서 중요한 점은 빈 자동등록을 위해 @component를 해준다.
컨트롤러 마무리😊
@Autowired
private IUserService service;
@Autowired
private MailSendService mailService;
//회원가입 페이지 이동
@GetMapping("/userJoin")
public void userJoin() {}
//이메일 인증
@GetMapping("/mailCheck")
@ResponseBody
public String mailCheck(String email) {
System.out.println("이메일 인증 요청이 들어옴!");
System.out.println("이메일 인증 이메일 : " + email);
return mailService.joinEmail(email);
}우선 아까 만들어둔 mailsendService 부분을 등록해준다.
AutoWired로 자동 빈등록을 해준다.
이제 Jsp파일 > 컨트롤러로 이메일값을 전달해주면 리턴값으로 Email을 전달하면서
아까 만들어둔 메일을 발송해준다.
🤪 JS 마무리!🤪
아까 만들어 둔 Jsp파일에 Js부분을 마무리해준다.
$('#mail-Check-Btn').click(function() {
const eamil = $('#userEmail1').val() + $('#userEmail2').val(); // 이메일 주소값 얻어오기!
console.log('완성된 이메일 : ' + eamil); // 이메일 오는지 확인
const checkInput = $('.mail-check-input') // 인증번호 입력하는곳
$.ajax({
type : 'get',
url : '<c:url value ="/user/mailCheck?email="/>'+eamil, // GET방식이라 Url 뒤에 email을 뭍힐수있다.
success : function (data) {
console.log("data : " + data);
checkInput.attr('disabled',false);
code =data;
alert('인증번호가 전송되었습니다.')
}
}); // end ajax
}); // end send eamil
// 인증번호 비교
// 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');
}
});Ajax부분을 우선 완성해준다!
error는 없다 왜냐하면 완벽하다!
제발..
우선 funtion(data)값으로 아까 보내둔 인증번호가 왔을 것이다.
이제 이것을 비교해 주면서 회원가입을 처리해주면 될것이다.
인증번호 어서오고
이제 받은 data값으로 인증번호를 비교 하면 된다 .
위의 코드를 참조 바란다.
🤩동작 확인🤩
이거 좀 어려워서 한두번 정도 더 반복을 해보아야겠다.
항상 지적은 환영!
위의 코드를 쓴 원글 작성자분의 깃 주소이다 . 한번쯤 방문해보자!
https://github.com/MoonSeokHyun/spring/tree/master/MyWeb/src
출처 : https://devofroad.tistory.com/43
(Spring /Java)이메일 인증 구현하기😎
요즘사이트에서 회원가입을 하다보면 꼭! 각종 인증들 이있다. 사용자 입장에서는 굳이?? 이걸 해야하나? 싶기도 하겠지만 사업자 입장에서보면 각종 Black Consumer 외 다른 부분에 대해서 보안을
devofroad.tistory.com
'Back-End > Spring' 카테고리의 다른 글
| [SpringBoot] Project에서 특정 Bean을 찾지 못하는 에러 (0) | 2023.03.02 |
|---|---|
| [JPA] Spring Boot에서 다중 DB를 사용하기 (0) | 2023.03.02 |
| [Spring Cloud] Spring Cloud Config 에서 Github Private Repository 접근하기 (0) | 2023.02.10 |
| [Spring Cloud] Application의 설정 정보 (application.yml) 를 중앙에서 관리하기 (0) | 2023.02.10 |
| [Spring Boot] JPA를 활용하여 간단한 CRUD 게시판 만들기 ( 블로그 추천 ) (0) | 2023.02.10 |