요즘사이트에서 회원가입을 하다보면 꼭! 각종 인증들 이있다.
사용자 입장에서는 굳이?? 이걸 해야하나? 싶기도 하겠지만
사업자 입장에서보면 각종 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
'Spring > 학원에서 배운거정리 끄적' 카테고리의 다른 글
| (Spring /Java) SNS 스타일 게시판 만들기(1)😁 (0) | 2022.02.21 |
|---|---|
| (Spring /Java) 스프링 파일 업로드 구현 (2) | 2022.02.20 |
| Spring 게시판(1) 🤪 (0) | 2022.02.15 |
| Spring스프링(Spring) 회원가입 진행(3-1) ajax 문제해결 404 error (0) | 2022.02.14 |
| Spring(4) 로그인 처리 및 로그인 검증 세션작업(1)😁 (0) | 2022.02.14 |