Spring Security PW찾기

: DB에 있는 user_id와 user_name을 찾아 user_email을 반환 → 해당 user_email로 임시비밀번호 발송 → 임시비밀번호 암호화 → DB에 업로드

비밀번호 찾기 뷰(view) 페이지

forget.jsp


<!-- 비밀번호찾기 -->
        <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
            <h5 class="text-start">| 비밀번호 찾기</h5>
                <div class="d-flex justify-content-center">
                    <table class="table-group-divider container-fluid">
                        <tbody>
                            <tr>
                                <th scope="row">아이디</th>
                                <td>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="user_id" name="user_id" placeholder="아이디를 입력해주세요." autofocus required>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row">이름</th>
                                <td>
                                    <div class="col-sm-6">
                                        <input type="text" class="form-control" id="user_name_pw" name="user_name_pw" placeholder="이름을 입력해주세요." required>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <hr>
                <div>
                    <p>비밀번호 찾기를 누르시면 <span class="text-danger">아이디에 등록된 이메일</span>로 새   비밀번호 발급절차가 진행됩니다.</p>
                    <p>등록된 이메일 주소를 기억하지 못할 경우 관리자에게 연락 주십시오.</p>
                </div>
                <div class="d-grid d-sm-block text-end">
                    <button type="button" class="btn btn-primary" id="findPw" name ="findPw" data-bs-toggle="modal" data-bs-target="#exampleModal2">비밀번호찾기</button>
                </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel2" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel2">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body text-center">
        <p>재설정된 비밀번호가 <b class="fs-5">e-mail로 전송</b>되었습니다.</p>
        <p>로그인 후 비밀번호를 변경해주세요.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
        <a href="/ycc/login" type="button" class="btn btn-primary">로그인하기</a>
      </div>
    </div>
  </div>
</div>


1. **user_name과 user_id를 받아 user_email을 반환함**
- forget.jsp
```jsx
<script>
//패스워드 찾기(모달창에 정보 띄우기)
    $("#findPw").click(function() {
        var csrfHeaderName = "${_csrf.headerName}";
        var csrfTokenValue= "${_csrf.token}";
        let a = document.getElementById("user_id").value;
        let b = document.getElementById("user_name_pw").value;
        //아이디 찾기 이메일 데이터 넘기기  
        $.ajax({
          beforeSend: function(xhr){
          xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);},
          type: 'POST',
          url: '/ycc/mypage/findPw',
          headers : { "content-type" : "application/json" },
          data: JSON.stringify({user_id:a, user_name:b}), 
          dataType: 'text',
          success: function(user_email) {
              //alert(b)
              $.ajax({
                  beforeSend: function(xhr){
                  xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);},
                  type: 'post',
                  url: '/ycc/signin/pwEmail',
                  headers : { "content-type" : "application/json" },
                  data: JSON.stringify({user_email:user_email}), 
                  dataType: 'text',
                  success: function(user_email) {

                  },
                  error: function(){
                    alert ("정보를 다시 확인해주세요(1).")
                  }

                 })
          },
          error: function(){
            alert ("정보를 다시 확인해주세요(2).")
          }

         })
      })
</script>

MemberController.java

// 패스워드 찾기
@PostMapping("/mypage/findPw")
@ResponseBody
public String findPw(HttpServletResponse response, @RequestBody MemberDto memberDto) throws Exception {

return memberService.findPw(response, memberDto.getUser_id(), memberDto.getUser_name());
}

MemberServiceImpl.java

//패스워드 찾기
@Override
public String findPw(HttpServletResponse response, String user_id, String user_name) {

String user_email = null;
try {
    user_email = memberDao.findPw(user_id, user_name);
} catch (Exception e) {
    e.printStackTrace();
}

if (user_email == null) {
    return null;
} else {
    return user_email;
}
}

MemberDaoImpl.java

//패스워드 찾기
@Override
public String findPw(String user_id, String user_name) throws Exception {
Map map = new HashMap();
map.put("user_id", user_id);
map.put("user_name", user_name);
return session.selectOne(namespace + "findPw", map);
}

tb_user 테이블의 user_id와 user_name과 비교하여 user_email을 찾아줌

memberMapper.xml

<!-- 패스워드 찾기(id와 name 찾아 이메일 반환) -->
<select id="findPw" parameterType="MemberDto" resultType="String">
select user_email from tb_user 
where user_id = #{user_id} and user_name = #{user_name}
</select>

select 해 온 user_email을 통해 user_pw를 업로드 해 줄 예정 1) 임시 비밀번호 발급 → 임시 비밀번호 이메일 발송 → 임시 비밀번호 암호화 → DB 업로드

forget.jsp

<script>
//패스워드 찾기(모달창에 정보 띄우기)
$("#findPw").click(function() {
var csrfHeaderName = "${_csrf.headerName}";
var csrfTokenValue= "${_csrf.token}";
let a = document.getElementById("user_id").value;
let b = document.getElementById("user_name_pw").value;
//alert("모달창 진입") 
//아이디 찾기 이메일 데이터 넘기기  
$.ajax({
  beforeSend: function(xhr){
  xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);},
  type: 'POST',
  url: '/ycc/mypage/findPw',
  headers : { "content-type" : "application/json" },
  data: JSON.stringify({user_id:a, user_name:b}), 
  dataType: 'text',
  success: function(user_email) {
      $.ajax({
              beforeSend: function(xhr){
              xhr.setRequestHeader(csrfHeaderName, csrfTokenValue);},
          type: 'post',
          url: '/ycc/signin/pwEmail',
          headers : { "content-type" : "application/json" },
          data: JSON.stringify({user_email:user_email}), 
          dataType: 'text',
          success: function(user_email) {

          },
          error: function(){
            alert ("정보를 다시 확인해주세요(1).")
          }

         })
  },
  error: function(){
    alert ("정보를 다시 확인해주세요(2).")
  }

 })
})
</script>

MemberController.java

// 이메일로 임시 비밀번호 보내기
@PostMapping("/signin/pwEmail")
@ResponseBody
public String emailSendPw(@RequestBody MemberDto memberdto) throws Exception {
return memberService.pwSendEmail(memberdto.getUser_email());
}

임시 비밀번호 이메일 발송 함수

MemberServiceImpl.java

//패스워드 찾을때 이메일 발송 세팅
public String pwSendEmail(String user_email) {

    //1. 임시비밀번호 생성, 이메일 발송 세팅
    String temp_pw = new TempKey().getKey(15, false);

    String email_title = "[Young문화체육센터 비밀번호 입니다.]";
    String email_text = "<h1>Young문화체육센터 비밀번호 찾기</h1>" +
            "<p><b>비밀 번호 : "+ temp_pw +"</b></p>";

    //2. 이메일 발송
    try {
        this.sendEmail(user_email, email_title, email_text);
    } catch (Exception e) {
        e.printStackTrace();
    }

    //3. 임시 비밀번호를 암호화시켜 DB 업로드
    try {
        MemberDto dto = new MemberDto();
        String pwd = passwordEncoder.encode(temp_pw);
        dto.setUser_email(user_email);
        dto.setUser_pw(pwd);
        memberDao.uploadPw(dto);
    } catch (Exception e) {e.printStackTrace();}

    return user_email;

}

//이메일 발송 함수
public void sendEmail(String user_email, String email_title, String email_text) throws Exception {

    MailHandler sendMail = new MailHandler(mailSender);
    sendMail.setSubject(email_title);   //메일제목
    sendMail.setText(email_text);
    sendMail.setFrom("soojeontest01@gmail.com", "Young문화체육센터");
    sendMail.setTo(user_email);
    sendMail.send();
}

MemberDaoImpl.java

//임시 비밀번호 DB 업로드
public void uploadPw(MemberDto dto) throws Exception {
session.selectOne(namespace + "uploadPw", dto);
}

memberMapper.xml

<!-- 임시 비밀번호 업데이트 -->
<update id="uploadPw" parameterType="MemberDto">
UPDATE tb_user
SET user_pw = #{user_pw}
WHERE user_email = #{user_email} 
</update>

임시 비밀번호 발급, 비밀번호 암호화, DB 업로드 완료!

Berry-G / YoungCultureCenter

Spring Security PW찾기 #122