반응형
1. 이메일 인증 동작 원리
사용자가 입력한 이메일 주소를 Servlet으로 가져와, 해당 이메일주소와 설정한 인증코드(난수)를 라이브러리를 이용하여 메일 전송하여 이메일 인증 절차를 적용할 수 있다.
*사용 라이브러리: java-mail.jar, java-activation.jar
2. 이메일 인증 적용 방법 [ Servlet ]
package apply.controller.member;
import java.io.IOException;
import java.util.Random;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import apply.model.dto.MemberDto;
@WebServlet("/apply/Email")
public class Email extends HttpServlet {
private static final long serialVersionUID = 1L;
public Email() { }
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 1. 받을 회원 이메일 요청
String memail = request.getParameter("memail");
// System.out.println(memail);
String auth = "";
// 용도: 인증코드로 사용
for( int i = 0; i < 6; i++ ) {
Random random = new Random(); auth += random.nextInt(10);
}
// 2. SMTP(간이 메일 전송 프로토콜): Simple Mail Transfer Protocol
// 1) 필요한 라이브러리: java-mail , java-activation
// 2) 원리: 위의 라이브러리 이용하여, 서버( 네이버, 다음, 구글)에 메일 전송
boolean result = new MemberDto().sendEmail(memail, auth);
if( result ) { response.getWriter().print(auth); }
else { response.getWriter().print(result); }
}
}
3. 타이머 적용 방법 [ JS ]
let checkconfirm = document.querySelectorAll('.checkconfirm');
let auth = 0;
let timer = 0;
let timerInter;
function getauth(){
// console.log('함수 작동')
// ajax JAVA에게 이메일 전송 후 인증코드 방기! [실제 인증 절차 적용할 때 코드!]
$.ajax({
url:"/JSPWEB/apply/Email",
method: "post",
data: { "memail" : document.querySelector('.memail').value },
success: ( o )=>{
// console.log(o);
let html = `
<input type="text" class="authinput" placeholder="인증코드">
<div class="timebox"> </div>
<button onclick="authconfirm()" class="authconfirmbtn" type="button"> 확인 </button>
`
document.querySelector('.authbox').innerHTML = html;
// 타이머 함수 적용
auth = o; timer = 120;
settimer();
}
})
}
// 타이머 함수 [이메일]
function settimer(){
timerInter = setInterval( ()=>{
let min = parseInt(timer / 60); let sec = parseInt(timer % 60);
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let timeHTML = min + ":" + sec;
document.querySelector('.timebox').innerHTML = timeHTML;
timer--;
if( timer < 0 ){
clearInterval( timerInter )
checkconfirm[3].innerHTML = "인증 실패";
document.querySelector('.authbox').innerHTML = "";
}
} , 1000 )
}
// 인증코드 확인
function authconfirm(){
// console.log('함수 동작 확인');
let authinput = document.querySelector('.authinput').value;
// 2. 발급된 인증코드 와 입력한 인증코드 비교
if( auth == authinput ){ // 인증코드 일치
clearInterval( timerInter );
document.querySelector('.authbox').innerHTML = "";
document.querySelector('.authbtn').innerHTML = "완료";
document.querySelector('.authbtn').disabled = true;
checkconfirm[3].innerHTML = '사용가능';
}else{ // 인증코드 불일치
checkconfirm[3].innerHTML = '인증코드 일치하지 않습니다.';
}
}
4. HTML 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 반응형 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link href="/JSPWEB/apply/css/signup.css" rel="stylesheet">
</head>
<body>
<%@ include file = "../header.jsp" %>
<div class="container">
<h3> CuoreEspresso Ansan </h3>
<p> 환영합니다. </p>
<form class="signupForm" enctype="multipart/form">
<div class="title"> 아이디 </div>
<input onkeyup="idcheck()" maxlength="30" type="text" name="mid" class="mid" id="mid"> <br/>
<div class = "checkconfirm"> </div>
<div class="title"> 비밀번호 </div>
<input onkeyup="pwcheck()" maxlength="20" type="password" name="mpw" class="mpw" id="mpw"> <br/>
<div class = "checkconfirm"></div>
<div class="title"> 비밀번호 확인</div>
<input onkeyup="pwccehck()" maxlength="20" type="password" name="mpwc" class="mpwc" id="mpwc"> <br/>
<div class = "checkconfirm"></div>
<div class="title"> 이메일 </div>
<div class="emailBox">
<input onkeyup="emailcheck()" type="text" name="memail" class="memail" id="memail"> <br/>
<button onclick="getauth()" class="authbtn" type="button" disabled> 인증 </button>
</div>
<div class="authbox">
</div>
<div class = "checkconfirm"></div>
<div class="title"> 프로필 </div>
<div class="pimgbox">
<input onchange="premimg(this)" type="file" name="mimg" class="mimg" id="mimg"> <br/>
<img class="premig" alt="" src="/JSPWEB/apply/member/pimg/default.png"> <br/>
</div>
<button class="signupbtn" onclick="signup()" type="button"> 가입 </button>
</form>
</div>
<!-- 1. 최신 jquery(js 라이브러리) import (ajax 함수 활용하기 위함) -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/JSPWEB/apply/js/member/signup.js" type="text/javascript"> </script>
</body>
</html>반응형
'JSP' 카테고리의 다른 글
| JSP - 소켓 사용 (1) | 2023.04.28 |
|---|---|
| JSP - Servlet 사용 (0) | 2023.04.28 |
| JSP - 공공데이터 사용 (0) | 2023.04.28 |
| JSP - 페이징 처리 (0) | 2023.04.28 |
| Java JSP 알아보기 (0) | 2023.03.06 |
