SPRING/IceWater Community

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

간펴니 2021. 9. 24. 22:24
728x90

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

 

비밀번호도 세션값의 계정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

내가 생각하고 있던 로그인 방법은 1. controller에서 HttpSession 인터페이스를 이용해서 직접 세션값을 구현 2.인터셉터를 이용해서 세션값을 확인하는 방법으로 구현. 3.spring 시큐리티

kimfk567.tistory.com

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

 

비밀번호가 다르면 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사이트와 비슷해질듯..)

728x90
저작자표시 (새창열림)