[스프링] 회원정보수정 - 비밀번호 (ajax)

저번 글에서 회원 정보 수정 아이디와 이메일을 구현했다.

 

비밀번호도 세션값의 계정ID를 통해 ajax로 유효성검사를 한다.

 

회원가입시 비밀번호는 암호화되서 DB에 저장되기 때문에, 암호화 된 비밀번호를 새로 입력한 아이디와 비교한다.

그 후 입력한 비밀번호를 암호화해서 DB에 넣어주도록 구현했다.

 

이번 글에선 ajax를 좀 더 간단하게 작성해 사용해봤다.

---

 

Mapper.xml

<select id="pwCheck" resultType="String">
select MEMBER_PW from mp_member where member_id = #{memberId}
</select>

<update id="pwUpdate">
update MP_MEMBER set MEMBER_PW = #{memberPw} where MEMBER_ID = #{memberId}
</update>

유효성검사와 비밀번호변경 둘다 세션의 ID값을 사용한다.

---

DAO,DAOImpl

	public String pwCheck(String memberId)throws Exception;
	
	public void pwUpdate(String memberId, String hashedPw)throws Exception;

	@Override
	public String pwCheck(String memberId)throws Exception{
		return sqlsession.selectOne("memberMapper.pwCheck", memberId);
	}
	
	@Override
	public void pwUpdate(String memberId, String hashedPw) throws Exception{
		Map<String,Object> map = new HashMap<String, Object>();
		map.put("memberId", memberId);
		map.put("memberPw", hashedPw);
		sqlsession.update("memberMapper.pwUpdate", map);
		
	}

---

Service, ServiceImpl

 

public String pwCheck(String memberId)throws Exception;
	
	public void pwUpdate(String memberId, String hashedPw)throws Exception;

	
	@Override
	public String pwCheck(String memberId)throws Exception{
		return memberDAO.pwCheck(memberId);
	}
	
	@Override
	public void pwUpdate(String memberId, String hashedPw)throws Exception{
		memberDAO.pwUpdate(memberId, hashedPw);
	}

---

Controller

	
	@RequestMapping(value="/pwUpdateView", method=RequestMethod.GET)
	public String pwUpdateView() throws Exception{
		return "/member/pwUpdateView";
	}

	@RequestMapping(value="/pwCheck" , method=RequestMethod.POST)
	@ResponseBody
	public int pwCheck(MemberVO memberVO) throws Exception{
		String memberPw = memberService.pwCheck(memberVO.getMemberId());
		if( memberVO == null || !BCrypt.checkpw(memberVO.getMemberPw(), memberPw)) {
			return 0;
		}
		return 1;
	}
	
	@RequestMapping(value="/pwUpdate" , method=RequestMethod.POST)
	public String pwUpdate(String memberId,String memberPw1,RedirectAttributes rttr,HttpSession session)throws Exception{
		String hashedPw = BCrypt.hashpw(memberPw1, BCrypt.gensalt());
		memberService.pwUpdate(memberId, hashedPw);
		session.invalidate();
		rttr.addFlashAttribute("msg", "정보 수정이 완료되었습니다. 다시 로그인해주세요.");
		
		return "redirect:/member/loginView";
	}
}

위에서부터 비밀번호 변경뷰, 현재비밀번호 유효성검사, 비밀번호변경 컨트롤러이다.

 

비밀번호 유효성 검사는

세션에 있는 로그인 한 계정(세션을 부여받은)의 ID 값을 이용해서 DB에 저장된 비밀번호를 가져오고 (memberPw),

입력한 비밀번호와 대조한다.(memberVO.getMemberPw())

 

암호화에 대한 부분은

[스프링]회원가입(ajax 유효성 검사,비밀번호 암호화) - 로그인1 :: 간편 웹프로그래밍 (tistory.com)

[스프링]회원가입(ajax 유효성 검사,비밀번호 암호화) - 로그인1

이전에 작성한 글에 있으니 설명은 생략하겠다.

 

비밀번호가 다르면 0을 리턴한다.

 

비밀번호가 맞으면 /pwUpdate를 호출해서 입력받은 비밀번호를 암호화시키고 (memberPw1) update로직을 수행,

 

세션값을 초기화시키고 로그인페이지로  메시지와 함께 리다이렉트 시킨다.

---

pwUpdateView.jsp

<script type="text/javascript">
		$(document).ready(function(){
		
			$("#pwUpdate").on("click", function(){
				if($("#memberPw").val==""){
					alert("현재 비밀번호를 입력해주세요");
					$("#memberPw").focus();
					return false
				}
				if($("#memberPw1").val==""){
					alert("변경비밀번호을를 입력해주세요");
					$("#memberPw1").focus();
					return false
				}
				if($("#memberPw2").val==""){
					alert("변경비밀번호를 입력해주세요");
					$("#memberPw2").focus();
					return false
				}
				if ($("#memberPw").val() != $("#memberPw2").val()) {
					alert("변경비밀번호가 일치하지 않습니다.");
					$("#memberPw2").focus();
					 
				
				$.ajax({
					url : "/member/pwCheck",
					type : "POST",
					dataType : "json",
					data : $("#pwUpdateForm").serializeArray(),
					success: function(data){
						
						if(data==0){
							alert("패스워드가 틀렸습니다.");
							return;
						}else{
							if(confirm("변경하시겠습니까?")){
								$("#pwUpdateForm").submit();
							}
							
						}
					}
				})
				
			});
			
				
			
		})
	</script>

  <form action="/member/pwUpdate" method="post" id="pwUpdateForm" name="pwUpdateForm">
                       <input type="hidden" id="memberId" name="memberId" value="${login.memberId}">
    <div class="col-sm-8 col-sm-offset-2">
        <div class="panel panel-default panel-margin-10">
            <div class="panel-body panel-body-content text-center">
                <p class="lead">변경하실 비밀번호를 입력해 주세요.</p>
                <div class="form-group">
                    <input type="password" name="memberPw" id="memberPw" class="form-control form-control-inline text-center" placeholder="현재 비밀번호" />
                </div>
                <div class="form-group">
                    <input type="password" name="memberPw1" class="form-control form-control-inline text-center" placeholder="새 비밀번호" />
                </div>
                <div class="form-group">
                    <input type="password" name="memberPw2" class="form-control form-control-inline text-center" placeholder="새 비밀번호 확인" />
                </div>
                <button type="button" id="pwUpdate" name="pwUpdate" class="btn btn-primary">비밀번호 변경</button> <a href="/member/infoView" class="btn btn-default">취소</a>
            </div>
        </div>
    </div>
    </form>

input hidden으로 세션의 ID값을 넣어줬다.

 

이전에 사용하던  버튼을 눌러서 특정속성에 Y또는 N값으로 유효성을 판단하고, 

컨트롤러에서 주는 String값을 JSON으로 변환시켜서 뷰에서 받는 방법은 너무 복잡하고 코드가 길어 사용하기

힘들기 때문에 좀 더 간단하게 구현했다.

 

프론트에서 글자로 구분가능한 부분을 검사해주고,

 

아까 작성한 유효성 검사 로직에서 0이 나오면 팝업창을 출력한 후 리턴하고,

 

맞으면 confirm을 호출,

 

확인을 누르면 작성한 form태그를 제출한다.

 

---

결과

 

01234

슬라이드쇼 5장

1. 비밀번호 변경 클릭
2. 비밀번호 변경 뷰
3. 현재비밀번호가 틀렸을때
4. 정상입력
5. 정상처리 후 로그인페이지로 이동

 

---

이제 회원프로필사진과 추천기능을 구현하고, 며칠간은 디자인을 최대한 깔끔하게 꾸며볼 예정이다.

(아마 OKKY사이트와 비슷해질듯..)