Spring Boot Board Project_12 비밀번호 변경

1. js에서 비밀번호 변경 요소 얻어와서 유효성 검사 후 모든 값이 잘 입력됐을 때 submit 되게 해주기

myPage-changePw.html

  <main>

    <!-- 헤더 추가 -->
    <th:block th:replace="~{common/header}"></th:block>

    <section class="myPage-content">

      <!-- 사이드 메뉴(왼쪽) 추가 -->
      <th:block th:replace="~{myPage/sideMenu}"></th:block>

      <!-- 마이페이지 본문(오른쪽) -->
      <section class="myPage-main">

        <h1 class="myPage-title">비밀번호 변경</h1>
        <span class="myPage-subject">
          현재 비밀번호가 일치하는 경우 
          새 비밀번호로 변경할 수 있습니다.
        </span>


        <form action="changePw" method="POST" name="myPageFrm" id="changePw">

          <div class="myPage-row">
              <label>현재 비밀번호</label>
              <input type="password" name="currentPw" id="currentPw" maxlength="30" >              
          </div>

          <div class="myPage-row">
              <label>새 비밀번호</label>
              <input type="password" name="newPw" id="newPw" maxlength="30">              
          </div>

          <div class="myPage-row">
              <label>새 비밀번호 확인</label>
              <input type="password" name="newPwConfirm" id="newPwConfirm" maxlength="30">              
          </div>

          <button class="myPage-submit">변경하기</button>

      	</form>

      </section>

    </section>

  </main>

myPage.js

// 비밀번호 변경 form 태그
const changePw = document.querySelector("#changePw");

if(changePw != null) {
    // 제출 되었을 때
    changePw.addEventListener("submit", e => {

        const currentPw = document.querySelector("#currentPw");
        const newPw = document.querySelector("#newPw");
        const newPwConfirm = document.querySelector("#newPwConfirm");

        // 값을 모두 입력했는지

        let str; // undefined 상태
        
        if(currentPw.value.trim().length == 0) str = "현재 비밀번호를 입력해주세요";
        else if(newPw.value.trim().length == 0) str = "새 비밀번호를 입력해주세요";
        else if(newPwConfirm.value.trim().length == 0) str = "새 비밀번호 확인을 입력해주세요";
        
        if(str != undefined) { // str에 값이 대입됨 == if 중 하나 실행됨
            alert(str);
            e.preventDefault();
            return;
        } 
    
        // 새 비밀번호 정규식
        const regExp = /^[a-zA-Z0-9!@#_-]{6,20}$/;
    
        if(!regExp.test(newPw.value)) {
            alert("새 비밀번호가 유효하지 않습니다.");
            e.preventDefault();
            return;
        }

        // 새 비밀번호 == 새 비밀번호 확인
        if(newPw.value != newPwConfirm.value) {
            alert("새 비밀번호가 일치하지 않습니다.");
            e.preventDefault();
            return;
        }
    });
};

2. Controller 에서 값 받아서 Service 호출

상대경로로 changePw Controller 로 요청 보냄

현재 비밀번호, 새 비밀번호, 회원번호 서비스로 전달

MyPageController

	@PostMapping("changePw")
	public String changePw(
			@RequestParam Map<String, Object> paramMap,
			@SessionAttribute("loginMember") Member loginMember,
			RedirectAttributes ra
			) {
		
		// 로그인한 회원 번호 얻어오기
		int memberNo = loginMember.getMemberNo();
		
		int result = service.changePw(paramMap, memberNo);

3. service 에서 암호화된 비밀번호 조회

MyPageServiceImpl

	@Override
	public int changePw(Map<String, Object> paramMap, int memberNo) {
		
		// 현재 로그인한 회원의 암호화된 비밀번호를 DB에서 조회
		String originPw = mapper.selectPw(memberNo);

myPage-mapper.xml

	<!-- 회원의 비밀번호 조회 -->
	<select id="selectPw">
		SELECT MEMBER_PW
		FROM "MEMBER"
		WHERE MEMBER_NO = #{memberNo}
	</select>

4. sql 수행 후 반환값으로 평문 비밀번호, 암호화된 비밀번호 비교

MyPageServiceImpl 필드

	private final BCryptPasswordEncoder bcrypt;

MyPageServiceImpl changePw()

두 비밀번호가 다를 경우

Map 에 value 가 Object 라서 String 으로 다운캐스팅 해줘야함

		if(!bcrypt.matches((String)paramMap.get("currentPw"), originPw)) {
			return 0;
		}

5. 비교한 두 비밀번호가 같을 경우 mapper 호출 후 insert

MyPageServiceImpl changePw()

		// 새 비밀번호를 암호화해서 업데이트
		// 새 비밀번호 암호화 진행
		String encPw = bcrypt.encode((String)paramMap.get("newPw"));
		paramMap.put("encPw", encPw);
		paramMap.put("memberNo", memberNo);
		
		return mapper.changePw(paramMap);

myPage-mapper.xml

	<!-- 비밀번호 변경 -->
	<update id="changePw">
		UPDATE "MEMBER" SET
		MEMBER_PW = #{encPw}
		WHERE MEMBER_NO = #{memberNo}
	</update>

6. INSERT 후 돌아온 값 Controller 에서 분기 처리

MyPageController

		String path = null;
		String message = null;
		
		if(result > 0) {
			path = "/myPage/info";
			message = "비밀번호가 변경 되었습니다.";
		} else {
			path = "/myPage/changePw";
			message = "현재 비밀번호가 일치하지 않습니다.";
		}
		
		ra.addFlashAttribute("message", message);
		
		return "redirect:" + path;
	}