✅ 비밀번호 찾기 완료 화면 jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ include file="/views/common/header.jsp"%>
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/member/findPwdResult.css"/>
<section>
<input type="hidden" id="hiddenEmail" name="email" value="<%=(String) request.getAttribute("userEmail")%>">
<div class="findPwdClass1">
<input type="text" id="findPwdAuth" placeholder="인증번호 입력"
autocomplete="off">
<button type="button" id="findPwdAuthButton">인증</button>
</div>
<span id="findPwdAuthId"></span>
<div class="findPwdClass2">
<input type="text" id="newPassword" name="pass" placeholder="새로운 패스워드를 입력하세요"
autocomplete="off"> <input type="text"
id="newPasswordCheck" placeholder="새로운 패스워드를 다시 입력하세요"
autocomplete="off">
</div>
<button id="newPasswordButton">변경</button>
</section>
<script src="<%=request.getContextPath()%>/js/member/findPwd.js"></script>
<%@ include file="/views/common/footer.jsp"%>
✅ 비밀번호 찾기 js
const url = "http://localhost:9090/semi-hifive/";
const hiddenEmail = document.getElementById("hiddenEmail");
// 모든 부분들을 가려놨다가 이메일 인증이 되면
// 해당 창들이 보이게 하는 작업
$("#newPassword").css("display", "none");
$("#newPasswordCheck").css("display", "none");
$("#newPasswordButton").css("display", "none");
$(function() {
$.ajax({
url: "findPwdSendEmail",
data: { "inputEmail": hiddenEmail.value },
success: function(result) {
},
error: function() {
}
})
});
const findPwdAuth = document.getElementById("findPwdAuth"); // document 타입으로 선택자 선택
const findPwdAuthButton = document.getElementById("findPwdAuthButton");
const findPwdAuthId = $("#findPwdAuthId"); // jquery로 선택자 선택
findPwdAuthButton.addEventListener("click", function() { // 1. 인증 버튼 클릭했을 때
if (findPwdAuth.value.length == 8) { // 2. 입력된 인증번호가 6자리 맞는지 확인
$.ajax({
url: "checkNumber",
data: {
"cNumber": findPwdAuth.value,
"inputEmail": hiddenEmail.value
},
success: function(result) {
if (result == 1) { // 1 : 인증번호 O , 시간도 O
findPwdAuthId.text("인증되었습니다.").css("color", "green");
$("#newPassword").css("display", "block");
$("#newPasswordCheck").css("display", "block");
$("#newPasswordButton").css("display", "block");
} else if (result == 2) { // 2 : 인증번호 O , 시간이 X
alert("만료된 인증번호 입니다");
} else { // 그외는 인증번호 일치하지않을 때!
alert("인증번호가 일치하지 않습니다.");
}
},
error: function() {
console.log("이메일 인증 실패");
}
})
} else { // 인증번호가 8글자가 아닐경우
alert("인증번호를 정확하게 입력해주세요.");
findPwdAuth.focus();
}
});
// 새로운 비밀번호 변경창 나왔을 때
const newPassword = document.getElementById("newPassword");
const newPasswordButton = document.getElementById("newPasswordButton");
newPasswordButton.addEventListener("click", function() { // 새로운비밀번호 변경창 나왔을 때 그 변경버튼 클릭했을 때
// 영대소문자, 숫자, 특수기호 최소 하나씩 8글자 이상
const regExp3 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*~()_+])[a-zA-Z\d!@#$%^&*~()_+]{8,16}$/;
if (findPwdAuth.value == $("#newPassword").val() && $("#newPassword").val() == $("#newPasswordCheck").val()) {
alert("현재 비밀번호와 동일한 비밀번호로 변경할 수 없습니다.")
$("#newPassword").focus();
} else if (!regExp3.test($("#newPassword").val())) { // 위 정규표현식에 해당하지 않을경우
alert("영대소문자,숫자,특수기호 포함 8글자이상 입력하세요.");
$("#newPassword").focus();
} else if ($("#newPassword").val() == $("#newPasswordCheck").val()) { // 표현식에 대응하며, 입력부분과 재입력부분이 동일할 경우
$.ajax({
url: "changePassword.do",
data: { "password": $("#newPassword").val(),
"email": hiddenEmail.value},
success: function(result) {
if(result!=null){ // 비밀번호가 정상적으로 변경됬을 경우 (dao에서 update문)
alert("비밀번호가 성공적으로 변경되었습니다.");
location.href = url;
}
},
error: function() {
console.log("서블릿으로이동실패");
}
})
} else {
alert("두개의 비밀번호가 일치하지 않습니다.");
$("#newPassword").focus();
}
})
✅ 비밀번호를 찾는 서블릿
String inputEmail = request.getParameter("inputEmail"); // 입력받은 이메일
String subject = "[Semi-프로젝트] 비밀번호 찾기 이메일 인증번호"; // 제목
String fromEmail = "semiproject@semi.com"; // 보내는 사람으로 표시될 이메일 (이메일 따라서 안될수도 있음)
String fromUsername = "관리자"; // 보내는 사람 이름
String toEmail = inputEmail; // 받는사람, 콤마(,)로 여러개 나열 가능
// 구글 이메일을 이용한 메일 보내기 (SMTP)
// 1. 구글 계정 생성(기존 이메일 사용해도됨)
// 2. 계정 -> 보안 설정 진행
// 1) 2단계 인증 추가
// 2) 앱 비밀번호 생성(메일, 서버컴퓨터 OS) -> 저장해두기
final String smtpEmail = "bogdudhkd123@gmail.com"; // 이메일
final String password = "uregzrrzxkpfkcld"; // 발급 받은 비밀번호
Properties p = System.getProperties(); // 객체 p에 필수로 넣어야하는 작업들
p.setProperty("mail.transport.protocol", "smtp");
p.put("mail.smtp.host", "smtp.gmail.com");
p.put("mail.smtp.port", "587");
p.put("mail.smtp.auth", "true");
p.put("mail.smtp.debug", "true");
p.put("mail.smtp.starttls.enable", "true");
p.put("mail.smtp.ssl.protocols", "TLSv1.2");
p.put("mail.smtp.socketFactory.port", "587");
p.put("mail.smtp.socketFactory.class", "javax.net.ssl.SSLSocketFactory");
Session session = Session.getDefaultInstance(p);
MimeMessage msg = new MimeMessage(session); // MimeMessage 객체 생성
msg.setFrom(new InternetAddress(fromEmail, fromUsername)); // 송신자(보내는 사람) 지정
msg.addRecipient(RecipientType.TO, new InternetAddress(toEmail)); // 수신자(받는사람) 지정
msg.setSubject(subject); // 이메일 제목 지정
// 인증번호 8자리 생성
String cNumber = "";
Random rnd = new Random();
for (int i = 0; i < 8; i++) {
int sel1 = (int) (Math.random() * 3); // 0:숫자 / 1,2:영어
if (sel1 == 0) {
int num = (int) (Math.random() * 10); // 0~9
cNumber += num;
} else {
char ch = (char) (Math.random() * 26 + 65); // A~Z
int sel2 = (int) (Math.random() * 2); // 0:소문자 / 1:대문자
if (sel2 == 0) {
ch = (char) (ch + ('a' - 'A')); // 대문자로 변경
}
cNumber += ch;
}
}
String AuthenticationKey = cNumber.toString();
System.out.println(AuthenticationKey);
System.out.println("이메일 : "+inputEmail);
StringBuffer sb = new StringBuffer(); // 가변성 문자열 저장 객체
sb.append("<h3>[Semi-프로젝트] 비밀번호 찾기 인증 번호입니다.</h3>\n");
sb.append("<h3>인증 번호 : <span style='color:red'>" + cNumber + "</span></h3>\n");
msg.setText("인증 번호는 ["+ cNumber +"] 입니다");
Transport t = session.getTransport("smtp");
t.connect(smtpEmail, password);
t.sendMessage(msg, msg.getAllRecipients());
t.close();
int result2 = new MemberService().insertCertification(inputEmail, cNumber); // 인증번호 컬럼 추가
response.getWriter().print(result2);
// 오류 없이 실핼될 경우 success : function()의 매개변수로 들어어감
} catch (Exception e) {
e.printStackTrace();
response.setStatus(500);
response.getWriter().print(e.getMessage());
}