비밀번호 찾기 구현

최주영·2023년 7월 2일
0

세미프로젝트

목록 보기
8/11
post-thumbnail

✅ 비밀번호 찾기 완료 화면 jsp

  • 비밀번호 찾는화면에서 사용자가 해당 텍스트에 값을 입력
  • 서블릿에서 입력한 input들의 name을 parameter를 통해 값을 갖고온다
  • 디비에 저장되어있는 회원정보중, 아이디, 비밀번호, 이메일이 일치하는 회원를 리턴받음

<%@ 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();
	}
})

✅ 비밀번호를 찾는 서블릿

  • 바로 위의 ajax의 url에 해당되는 서블릿 -> findPwdSendEmail
		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());
		}

profile
우측 상단 햇님모양 클릭하셔서 무조건 야간모드로 봐주세요!!

0개의 댓글