YJ의 새벽
JDBC 활용 연습용5. ( 인증번호 확인 + 비밀번호일치확인 ) 본문
-- signUp.js 에 인증번호 입력후 확인 (제한시간 ) 추가.
// 인증번호 보내기
const sendBtn = document.getElementById("sendBtn");
const cMessage = document.getElementById("cMessage"); // 타이머 출력하는 span 태그
// 타이머에 사용될 변수
let min = 4;
let sec = 59;
let checkInterval ; // setInterval 을 저장할 변수
sendBtn.addEventListener("click",function(){
if( checkObj.memberEmail ){ // 유효한 이메일이 작성되어 있을경우에만 메일보내기
$.ajax({
url : "sendEmail",
data : {"inputEmail" : memberEmail.value},
success : function(result){
console.log("이메일 발송 성공");
console.log(result);
// 인증버튼이 클릭되어 정상적으로 메일이 보내졌음을
checkObj.sendEmail = true;
},
error : function(){
console.log("이메일 발송 실패");
}
});
// Mail 발송 Ajax 코드는 동작이 느림 ...
// --> 메일은 메일대로 보내지고, 타이머는 버튼누르자마자 실행.
// --> ajax 코드가 비동기이기 때문에 메일이 보내지는것을 기다리지않고
// 바로 수행된다 !!
// 5분 타이머
// setInterval(함수, 지연시간) : 지연시간이 지난 후 함수를 수행 (반복)
cMessage.innerText = "5:00"; // 초기값 5분
min = 4;
sec = 59;
cMessage.classList.remove("confirm");
cMessage.classList.remove("error");
checkInterval = setInterval(function(){ // 변수에 저장해야 해당 함수를 멈출수있음.
if ( sec < 10) sec = "0" + sec;
cMessage.innerText = min + ":" + sec;
if(Number(sec) === 0 ){
min--;
sec = 59;
}else{
sec--;
}
if( min === -1 ){
cMessage.classList.add("error");
cMessage.innerText = "인증번호가 만료되었습니다.";
clearInterval(checkInterval); // setInterval 함수 반복을 지움.
}
} , 1000 ); // 1초 지연 후 수행
alert ( "인증번호가 발송되었습니다. 이메일을 확인해주세요,,");
}
});
// 인증번호 입력후 인증하기 눌렀을때 . 클릭시에 대한 동작
const cNumber = document.getElementById("cNumber");
const cBtn = document.getElementById("cBtn");
// + cMessage , memberEmail 요소도 사용
cBtn.addEventListener("click",function(){
// 1. 인증번호 받기 버튼이 클릭되어 이메일 발송되었는지 확인하기.
if(checkObj.sendEmail){
// 2. 입력된 인증번호가 6자리 맞는지 확인
if(cNumber.value.length == 6){
// ajax 송신.
$.ajax({
url : "checkNumber" ,
data : { "cNumber" : cNumber.value,
"inputEmail" : memberEmail.value },
success : function(result){
console.log(result);
// 1 : 인증번호 O , 시간도 O
// 2 : 인증번호 O , 시간이 X
// 3 : 인증번호 X
if ( result == 1 ){
clearInterval(checkInterval); // 제일먼저, 타이머 멈춤
cMessage.innerText = "인증되었습니다";
cMessage.classList.add( "confirm");
cMessage.classList.remove = ("error");
}else if ( result == 2 ){
alert("만료된 인증번호 입니다");
}else {
alert("인증번호가 일치하지 않습니다.");
}
},
error : function(){
console.log("이메일 인증 실패");
}
})
}else{
alert("인증번호를 정확하게 입력해주세요.");
cNumber.focus();
}
}else{
alert("인증번호 받기 버튼을 먼저 클릭해주세요.");
}
});
-- CheckNumberServlet.class 추가
@WebServlet("/member/checkNumber")
public class CheckNumberServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
String cNumber = req.getParameter("cNumber");
String inputEmail = req.getParameter("inputEmail");
// 1 , 2 , 3
int result = new MemberService().checkNumber(inputEmail,cNumber);
resp.getWriter().print(result);
}catch(Exception e) {
e.printStackTrace();
}
}
}
-- MemberService.class 인증번호 확인 서비스 추가
/** 인증번호 확인하는 서비스
* @param inputEmail
* @param cNumber
* @return
*/
public int checkNumber(String inputEmail, String cNumber) throws Exception {
Connection conn = getConnection();
int result = dao.checkNumber(conn,inputEmail,cNumber);
close(conn);
return result;
}
}
--MemberDAO.class 인증번호 확인하는 DAO 추가
/** 인증번호 확인하는 DAO
* @param conn
* @param inputEmail
* @param cNumber
* @return
*/
public int checkNumber(Connection conn, String inputEmail, String cNumber) throws Exception{
int result = 0;
try {
String sql = prop.getProperty("checkNumber");
pstmt = conn.prepareStatement(sql);
pstmt.setString(1, inputEmail);
pstmt.setString(2, cNumber);
pstmt.setString(3, inputEmail);
rs = pstmt.executeQuery();
if( rs.next() ) {
result = rs.getInt(1);
}
}finally {
close(rs);
close(pstmt);
}
return result;
}
}
-- member-sql.xml 인증번호 확인하는 sql 문 추가
<entry key="checkNumber">
SELECT
CASE WHEN (SELECT '1' FROM CERTIFICATION
WHERE EMAIL = ?
AND C_NUMBER = ?) = 1
THEN NVL( (SELECT '1' FROM CERTIFICATION
WHERE EMAIL = ?
AND ISSUE_DT + (INTERVAL '5' MINUTE) >= SYSDATE) , '2')
ELSE '3'
END
FROM DUAL
</entry>
메일을 입력후 , 받기버튼 클릭시 !!!!
버튼누르자마자 아래 5분 카운트다운 시작.
입력한 이메일로 인증번호가 갑니다 !!!!
DB 에 생성된 인증번호와 , 입력한 인증번호를 비교하여
인증 확인하기.
--signUp.js 비밀번호 일치확인 이벤트 작성
// 비밀번호 확인 . //////////////////////////////////////////////
const memberPw = document.getElementById("memberPw");
const memberPwConfirm = document.getElementById("memberPwConfirm");
const pwMessage = document.getElementById("pwMessage");
const regExp2 = /^[\w!@#_-]{6,30}$/;
memberPwConfirm.addEventListener("input",function(){
if( memberPw.value.length==0 || memberPwConfirm.value.length==0 ){
pwMessage.innerText="영어, 숫자, 특수문자(!,@,#,-,_) 6~30글자 사이로 작성해주세요.";
pwMessage.classList.remove("confirm","error");
checkObj.memberPw=false;
checkObj.memberPwConfirm =false;
}
if ( regExp2.test(memberPw.value) || regExp2.test(memberPwConfirm.value) ){
if ( memberPw.value == memberPwConfirm.value ){
pwMessage.innerText = "비밀번호가 일치합니다";
pwMessage.classList.add("confirm");
pwMessage.classList.remove("error");
checkObj.memberPw=true;
checkObj.memberPwConfirm =true;
}else{
pwMessage.innerText = "비밀번호가 일치하지않습니다";
pwMessage.classList.add("error");
pwMessage.classList.remove("confirm");
checkObj.memberPw=false;
checkObj.memberPwConfirm =false;
}
}
else{
pwMessage.innerText="영어, 숫자, 특수문자(!,@,#,-,_) 6~30글자 사이로 작성해주세요.";
pwMessage.classList.add("error");
pwMessage.classList.remove("confirm");
checkObj.memberPw=false;
checkObj.memberPwConfirm =false;
}
});
'SelfStudy > JDBC' 카테고리의 다른 글
| JDBC 활용 연습용7. ( 회원가입 + DB저장 ) (0) | 2023.03.30 |
|---|---|
| JDBC 활용 연습용6. ( 닉네임 중복확인 + 전화번호유효성검사 ) (0) | 2023.03.29 |
| JDBC 활용 연습용4. ( 롬복 + 회원가입(이메일인증) ) (0) | 2023.03.28 |
| JDBC 활용 연습용3. ( 암호화 (로그인)) (0) | 2023.03.27 |
| JDBC 활용 연습용2. ( ajax 이용 화면에 정보 바로뿌리기 ) (0) | 2023.03.24 |
'SelfStudy/JDBC' Related Articles
more
Comments