반응형
순서
0. 비밀번호 찾기 폼 만들기(jsp, css)
1. MemberController.java에 비밀번호 찾기 폼으로 이동하기 위한 코드 작성
2. MemberMapper.xml에 비밀번호 찾기 sql 작성
3. MemberMapper.java, MemberService.java, MemberServiceImpl.java에 코드 추가
4. MemberController.java에 비밀번호 찾기 버튼 클릭 시 실행될 로직 작성
5. 아이디, 이메일 유효성 검사 추가
6. 테스트
0. 비밀번호 찾기 폼 만들기(jsp, css)
src/main/webapp/WEB-INF/views/member 아래 비밀번호 찾기에 사용될 폼인 find_pwd_form.jsp를 생성합니다.
find_pwd_form.jsp
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비밀번호 찾기</title>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${path}/resources/css/login/find.css" rel="stylesheet"/>
</head>
<body>
<header>
<jsp:include page="../common/header.jsp"/>
</header>
<main>
<div class="container">
<form id="findPwd_form" method="post">
<div class="title">
<a href="find_pwd_form">비밀번호 찾기</a>
</div>
<div class="input-box underline">
<input type="text" name="id" placeholder="아이디를 입력하세요." class="id_input" required>
<div class="underline"></div>
</div>
<div class="input-box underline">
<input type="text" name="email" placeholder="이메일을 입력하세요." class="mail_input" required>
<div class="underline"></div>
</div>
<div class="input-box button">
<input type="button" class="findPwd_button" value="비밀번호 찾기">
</div>
</form>
</div>
</main>
</body>
</html>find.css
더보기
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&family=IBM+Plex+Sans+KR:wght@200;300;400&family=Noto+Serif+KR:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gowun Dodum', sans-serif;
}
main{
height: 500px;
}
.container {
background: #fff;
width: 500px;
padding: 25px 30px;
border-radius: 5px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.15);
}
.container form .title {
font-size: 30px;
font-weight: 600;
margin: 20px 0 10px 0;
position: relative;
}
.container form .title:before {
content: '';
position: absolute;
height: 4px;
width: 33px;
left: 0px;
bottom: 3px;
border-radius: 5px;
}
.container form .input-box {
width: 100%;
height: 45px;
margin-top: 25px;
position: relative;
}
.container form .input-box input {
width: 100%;
height: 100%;
outline: none;
font-size: 16px;
border: none;
}
.container form .underline::before {
content: '';
position: absolute;
height: 2px;
width: 100%;
background: #ccc;
left: 0;
bottom: 0;
}
.container form .underline::after {
content: '';
position: absolute;
height: 2px;
width: 100%;
left: 0;
bottom: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 0.3s ease;
background: linear-gradient(to left, #99004d 0%, #ff0080 100%);
}
.container form .input-box input:focus ~ .underline::after, .container form .input-box input:valid
~ .underline::after {
transform: scaleX(1);
transform-origin: left;
}
.container form .button {
margin: 40px 0 20px 0;
}
.container .input-box input[type="button"] {
background: linear-gradient(to right, #99004d 0%, #ff0080 100%);
font-size: 17px;
color: #fff;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.container .input-box input[type="submit"]:hover {
letter-spacing: 1px;
background: linear-gradient(to left, #99004d 0%, #ff0080 100%);
}
.container .option {
font-size: 14px;
text-align: center;
}
a {
text-decoration: none;
text-color: #black;
}
.sign_up a:hover{
text-decoration: underline;
}
/* 유효성 검사 문구 */
.final_mail_ck{
display: none;
}
.final_id_ck{
display: none;
}
1. MemberController.java에 비밀번호 찾기 폼으로 이동하기 위한 코드 작성
폼 생성 이후 MemberController.java에 비밀번호 찾기 버튼 클릭 시 비밀번호 찾기 폼으로 이동시키기 위한 코드를 추가합니다.
// 비밀번호 찾기 페이지 이동
@RequestMapping(value="/find_pwd_form", method = RequestMethod.GET)
public void findPwdGET() {
logger.info("비밀번호 찾기 페이지 진입");
}
이후 기존 로그인 창에서 비밀번호 찾기 버튼을 클릭했을 때 비밀번호 찾기 폼으로 이동하도록 클릭 이벤트를 추가합니다.
<div class="sign_up">
<a href="find_pwd_form">비밀번호 찾기</a> |
<a href="find_id_form">아이디 찾기</a> |
<a href="join">회원가입</a>
</div>
2. MemberMapper.xml에 비밀번호 찾기 sql 작성
MemberMapper.xml에 비밀번호를 찾기 위한 쿼리문을 작성합니다.
저는 회원가입 시 사용자가 등록했던 아이디와 이메일을 통해 비밀번호를 찾고, 임시 비밀번호 생성해서 사용자의 이메일에 전송했습니다.
이후 기존의 비밀번호는 임시 비밀번호로 바뀌도록 했습니다.
<!-- 비밀번호 찾기 -->
<select id="pwCheck" resultType="String">
select pwd from member where id = #{id}
</select>
<!-- 아이디 찾기 -->
<select id="idCheck" resultType="_int">
select count(*) from member where id = #{id}
</select>
<!-- 비밀번호 변경 -->
<update id="findUpdatePwd">
update member
set pwd=#{pwd}
where id=#{id}
</update>3. MemberMapper.java, MemberService.java, MemberServiceImpl.java에 코드 추가
3-1. MemberMapper.java
MemberMapper.xml과의 연동을 위해 MemberMapper.java에 아래의 내용을 추가합니다.
/* 아이디 찾기 */
public int idCheck(String id);
/* 비밀번호 찾기 */
public String pwCheck(String id);
/* 비밀번호 찾기에서 비밀번호 변경 */
public int findUpdatePwd(MemberVO member);3-2. MemberService.java
MemberService.java 인터페이스에 아래의 내용을 추가합니다.
/* 아이디 찾기 */
public int idCheck(String id) throws Exception;
/* 비밀번호 찾기 */
public void find_pwd(HttpServletResponse response, MemberVO member) throws Exception;
/* 임시 비밀번호 보내기 */
public void send_mail(MemberVO member) throws Exception;3-3. MemberServiceImpl.java
MemberServiceImpl.java에 임시 비밀번호 이메일 발송을 위한 send_mail()와 비밀번호 찾기에 사용될 find_pwd() 작성해줍니다.
3-3-1. 이메일 발송을 위한 send_mail()
코드를 작성하기 앞서 pom.xml에 이메일 API를 위한 코드를 추가해줍니다.
<!-- 메일 API -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-email</artifactId>
<version>1.2</version>
</dependency>
// 이메일 발송
@Override
public void send_mail(MemberVO member) throws Exception {
// Mail Server 설정
String charSet = "utf-8";
String hostSMTP = "smtp.naver.com";
String hostSMTPid = "본인 이메일 주소";
String hostSMTPpwd = "본인 이메일 비밀번호";
// 보내는 사람 EMail, 제목, 내용
String fromEmail = "보내는 사람의 이메일 주소";
String fromName = "SWANSHOP";
String subject = "";
String msg = "";
// 회원가입 메일 내용
subject = "SWANSHOP 임시 비밀번호 입니다.";
msg += "<div align='center' style='border:1px solid black; font-family:verdana'>";
msg += "<h3 style='color: blue;'>";
msg += member.getId() + "님의 임시 비밀번호 입니다. 비밀번호를 변경하여 사용하세요.</h3>";
msg += "<p>임시 비밀번호 : ";
msg += member.getPwd() + "</p></div>";
// 받는 사람 E-Mail 주소
String mail = member.getEmail();
try {
HtmlEmail email = new HtmlEmail();
email.setDebug(true);
email.setCharset(charSet);
email.setSSL(true);
email.setHostName(hostSMTP);
email.setSmtpPort(587);
email.setAuthentication(hostSMTPid, hostSMTPpwd);
email.setTLS(true);
email.addTo(mail, charSet);
email.setFrom(fromEmail, fromName, charSet);
email.setSubject(subject);
email.setHtmlMsg(msg);
email.send();
} catch (Exception e) {
System.out.println("메일 발송 실패 : " + e);
}
}
3-3-2. 비밀번호 찾기를 위한 find_pwd()
저는 회원가입부터 로그인까지 BCryptPasswordEncoder로 암호화가 진행되게 구현했기 때문에 단순히 메일로 발송한 임시 비밀번호를 이전 비밀번호로 교체해서 넣어주면 에러가 발생합니다.
따라서 바뀐 비밀번호 암호화까지 진행해주셔야 합니다.
먼저 MemberServiceImpl.java 클래스의 상단에 BCryptPasswordEncoder에 대한 의존성을 주입해줍니다.
@Autowired(required=false)
private BCryptPasswordEncoder bcrypt;
/* 비밀번호 찾기 */
@Override
public void find_pwd(HttpServletResponse response, MemberVO member) throws Exception {
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
// 아이디가 없으면
if (membermapper.idCheck(member.getId()) == 0) {
out.println("<script>");
out.println("alert('가입된 아이디가 없습니다.');");
out.println("history.go(-1);");
out.println("</script>");
out.close();
}
// 가입에 사용한 이메일이 아니면
else if (!member.getEmail().equals(membermapper.login(member.getId()).getEmail())) {
out.println("<script>");
out.println("alert('잘못된 이메일입니다.');");
out.println("history.go(-1);");
out.println("</script>");
out.close();
} else {
// 임시 비밀번호 생성
String pwd = "";
for (int i = 0; i < 12; i++) {
pwd += (char) ((Math.random() * 26) + 97);
}
member.setPwd(pwd); // 임시 비밀번호 담기
// 비밀번호 변경 메일 발송
send_mail(member);
// 순서 주의하기!!!!!!!!
String encPwd = bcrypt.encode(member.getPwd());
member.setPwd(encPwd);
System.out.println(encPwd);
// 비밀번호 변경
membermapper.findUpdatePwd(member);
out.println("<script>");
out.println("alert('이메일로 임시 비밀번호를 발송하였습니다.');");
out.println("history.go(-1);");
out.println("</script>");
out.close();
}
}
이 코드에서 제일 중요한 부분은 아래와 같습니다.
4. MemberController.java에 비밀번호 찾기 버튼 클릭 시 실행될 로직 작성
다음으로 MemberController.java 클래스에 아래의 내용을 추가합니다.
/* 비밀번호 찾기 */
@RequestMapping(value = "/find_pwd", method = RequestMethod.POST)
public void find_pwd(@ModelAttribute MemberVO member, HttpServletResponse response) throws Exception{
memberService.find_pwd(response, member);
logger.info("비밀번호 찾기 성공");
}
5. 아이디, 이메일 유효성 검사 추가
비밀번호 찾기를 위한 거의 모든 준비가 끝났습니다.
마지막으로 find_pwd_form.jsp에 아이디와 이메일 유효성 검사를 추가해줍니다.
더보기
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="path" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비밀번호 찾기</title>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="${path}/resources/css/login/find.css" rel="stylesheet"/>
</head>
<body>
<header>
<jsp:include page="../common/header.jsp"/>
</header>
<main>
<div class="container">
<form id="findPwd_form" method="post">
<div class="title">
<a href="find_pwd_form">비밀번호 찾기</a>
</div>
<div class="input-box underline">
<input type="text" name="id" placeholder="아이디를 입력하세요." class="id_input" required>
<div class="underline"></div>
<span class="final_id_ck" style="color: red;">아이디를 입력해주세요.</span>
</div>
<div class="input-box underline">
<input type="text" name="email" placeholder="이메일을 입력하세요." class="mail_input" required>
<div class="underline"></div>
<span class="final_mail_ck" style="color: red;">이메일을 입력해주세요.</span>
</div>
<div class="input-box button">
<input type="button" class="findPwd_button" value="비밀번호 찾기">
</div>
</form>
</div>
</main>
<script>
/* 유효성 검사 */
var idCheck = false; // 아이디
var mailCheck = false; // 이메일
$(document).ready(function(){
/* 아이디 찾기 버튼 */
$(".findPwd_button").click(function(){
/* 입력값 변수 */
var id = $('.id_input').val(); // 아이디 입력란
var mail = $('.mail_input').val(); // 이메일 입력란
/* 아이디 유효성 검사 */
if(id == ""){
$(".final_id_ck").css('display', 'block');
idCheck = false;
} else {
$('.final_id_ck').css('display', 'none');
idCheck = true;
}
/* 이메일 유효성 검사 */
if(mail == ""){
$('.final_mail_ck').css('display', 'block');
mailCheck = false;
} else {
$('.final_mail_ck').css('display', 'none');
mailCheck = true;
}
/* 최종 유효성 검사 */
if(idCheck&&mailCheck){
$('#findPwd_form').attr("action", "../member/find_pwd");
$('#findPwd_form').submit();
}
});
});
</script>
</body>
</html>
6. 테스트
DB에 저장된 아이디와 이메일을 입력했을 시
DB에 저장되지 않은 이메일을 입력했을 시
DB에 저장되지 않은 아이디를 입력했을 시
반응형
'😎 STS3 Spring 쇼핑몰' 카테고리의 다른 글
| STS3 쇼핑몰 프로젝트[14] 마이페이지 비밀번호 변경, 회원 탈퇴 (0) | 2022.08.02 |
|---|---|
| STS3 쇼핑몰 프로젝트[13] 마이페이지 내 정보 보기, 내 정보 수정 (0) | 2022.08.02 |
| STS3 쇼핑몰 프로젝트[11] 아이디 찾기 (0) | 2022.08.02 |
| STS3 쇼핑몰 프로젝트[10] 로그아웃 (0) | 2022.08.02 |
| STS3 쇼핑몰 프로젝트[9] 공용 에러 페이지 등록 및 비밀번호 암호화(2) (0) | 2022.08.01 |
