[spring 팀프로젝트] - 웹사이트 제작 10. 아이디/비밀번호 찾기

JINI·2022년 12월 10일

[spring] 팀프로젝트 - 짐 보관 예약 웹사이트

목록 보기

19/35

로그인 페이지에서 아이디 찾기를 클릭하면 간단하게 이름과 메일을 입력하면 해당 정보를 찾아 아이디를 알려준다.
비밀번호 찾기 역시 아이디/이름/이메일 입력후 회원 정보가 맞으면 임시 비밀번호가 발급되도록 구현했다.

🧩1.아이디 찾기

✔️ 이름/메일로 아이디 찾기

✂️아이디가 존재할 경우

✂️아이디가 없거나 다르게 입력한 경우

🎨jsp

✔️아이디 찾기 페이지

<form id="findForm" action="${contextPath }/member/findIdCheck" method="post">
	<div class="form-group">
    	<input type="text" name="name" id="name" placeholder="이름">
    </div>
    <div class="form-group">
    	<input type="email" name="email" id="email" placeholder="이메일">
    </div>
    <button type="submit" id="id-find" onclick="findSubmit(); return false;">아이디 찾기</button>
</form>

입력칸에 입력 후 아이디 찾기를 클릭하면 이름과 이메일을 담고 유효성 검사한 다음 아이디 찾기 결과 페이지인 컨트롤러로 보낸다.

✔️아이디 찾기 결과 페이지

<div class="result-box">
	<c:choose>
		<c:when test="${empty findId}">
		<p class="inquiry">조회결과가 없습니다.</p>
		</c:when>
        <c:otherwise>
            <p>${findId.id}</p>
        </c:otherwise>
	</c:choose>
</div>

if문을 사용해 해당 아이디가 없는 경우 조회 결과가 없다고 뜨고 있다면 아이디를 보여준다.

입력하지 않고 아이디 찾기를하면 입력하라는 메시지를 띄운다.

📕Controller

@PostMapping("findIdCheck")
	public String searchId(HttpServletRequest request, Model model,memberDTO dto,
			@RequestParam String name, 
			@RequestParam String email) {
		try {
			dto.setName(name);
			dto.setEmail(email);
			memberDTO id = ms.findMemberId(dto);

			model.addAttribute("findId", id);

		} catch (Exception e) {
			model.addAttribute("msg", "오류가 발생되었습니다.");
			e.printStackTrace();
		}
		return "member/findIdResult";
	}

이름과 이메일을 RequestParam으로 받아와 회원 정보를 조회하고
dto에 저장한 값들을 model에 보낸다.

📕Service/serviceImpl

public memberDTO findMemberId(memberDTO dto);

public void pwdUpdate(memberDTO dto);

public memberDTO findMemberId(memberDTO dto) {
		return memberMapper.findMemberId(dto);
	}

📕mapper.java

public memberDTO findMemberId(memberDTO dto);

📕mapper.xml

<select id="findMemberId" resultMap="member">
		select * from box_member
		where buser_name=#{name} and buser_email=#{email}
</select>

이름과 메일 정보가 같은 회원을 조회하는 쿼리문을 작성한다.

🧩2.비밀번호 찾기

✔️ 아이디/이름/메일로 비밀번호 찾기

✔️ 임시 비밀번호 발급(암호화)

🎨jsp

✔️비밀번호 찾기 페이지

아이디 찾기 페이지와 동일하며 아이디, 이름, 이메일로 유효성 검사후 비밀번호를 찾는다.

✔️비밀번호 찾기 결과 페이지

<p class="title">회원님의 임시 비밀번호 입니다</p>
<div class="result-box">
<p>${newPwd}</p>

📕Controller

@PostMapping("findPwdResult")
	public String findPwdCheck(HttpServletRequest request, Model model,
			@RequestParam String id, @RequestParam String name,@RequestParam String email, 
			memberDTO dto) {
		try {
			dto.setId(id);
			dto.setName(name);
			dto.setEmail(email);
			int search = ms.pwdCheck(dto);

			if(search == 0) {
				model.addAttribute("msg", "기입된 정보가 잘못되었습니다. 다시 입력해주세요.");
			}

			String newPwd = RandomStringUtils.randomAlphanumeric(10);
			dto.setPwd(newPwd);
			ms.pwdUpdate(dto);
			model.addAttribute("newPwd", newPwd);

		} catch (Exception e) {
			e.printStackTrace();
			model.addAttribute("msg", "오류가 발생되었습니다.");
		}
		return "member/findPwdResult";
	}

받아온 아이디, 이름,이메일을 조회해서 int형 변수 search가 0이면 다시 비밀번호 찾기 페이지로 보내고 회원 정보가 있다면 내장 함수인 randomAlphanumeric를 이용해 랜덤으로 생성되는 새로운 패스워드를 만들고 암호화하여 비밀번호만 업데이트한다.
그리고 암호화되기 전 새로운 패스워드를 model에 넣어준다.

📕Service/serviceImpl

public int pwdCheck(memberDTO dto);

//새로운 비밀번호로 저장
public void pwdUpdate(memberDTO dto);

public int pwdCheck(memberDTO dto) {
		return memberMapper.pwdCheck(dto);
	}

//새로운 비밀번호로 저장
 public void pwdUpdate(memberDTO dto) {
		String newUpdatePwd = pwEncoder.encode(dto.getPwd());
		dto.setPwd(newUpdatePwd); 
		memberMapper.pwdUpdate(dto);
	}

📕mapper.java

public int pwdCheck(memberDTO dto);

//새로운 비밀번호로 저장
public int pwdUpdate(memberDTO dto);

📕mapper.xml

<select id="pwdCheck" resultType="Integer">
		select
		count(*) from box_member
		where buser_id = #{id} and buser_name =
		#{name}
		and
		buser_email =
		#{email}
</select>

//새로운 비밀번호로 저장하는 쿼리문
<update id="pwdUpdate">
		update box_member
		set
		buser_pwd = #{pwd}
		where
		buser_id =
		#{id} and buser_name = #{name} and buser_email = #{email}
</update>