[Spring]비밀번호 인코딩(BCryptPasswordEncoder 적용)-비밀번호 수정

비밀번호를 BCryptPasswordEncoder 클래스를 사용하여 암호화 시킨 후 비밀번호 변경 하는 부분입니다.

앞서, 비밀번호 인코딩 후 로그인 부분에서 코드 수정이 있었습니다.

 

https://progaming-note.tistory.com/32

▲기존 비밀번호 인코딩 후 로그인하는 부분 입니다.

 

▼수정 후 부분입니다

Controller

@PostMapping("/login")
public String login(MemberVO member, RedirectAttributes rttr, HttpServletRequest request){
	HttpSession session = request.getSession();
    
    //currMember 변수에 service의 값을 넣어줍니다
    MemberVO currMember = service.login(member);
    
    //이후 currMember 변수를 통해 아이디가 있는지 없는지 체크합니다
    if(currMember != null){
    	//내가 입력한 비밀번호를 가져오고
    	String rawPw = member.getPw();
        //DB에 저장된 비밀번호를 가져온다
        String encodedPw = currMember.getPw();
        
        //비밀번호가 일치한다면 currMember를 세션에 저장 후 메인페이지로 리턴
        if(pwEncoder.matches(rawPw, encodedPw)){
        	session.setAttribute("member",currMember);
            return "redirect:/"
            }
		}
        
        //비밀번호가 일치하지 않는다면 로그인 페이지로 리턴
        rttr.addFlashAttribute("result",0);
        return "redirect:/member/login";
     }

기존 메서드 소스에는 내가 입력한 코드와 db에저장된 코드의 값을 확인 후 세션을 생성하는 if 조건문에서

Pw의 값을 빈 문자열로 바꾼 후 세션을 받아 왔습니다.

이렇게 하니 비밀번호 수정하였을때 이전 비밀번호에 값이 없는 에러문구가 떨어져서 빈 문자열로 바꾸는 부분을 지워주었습니다.

---Service,DAO 부분은 전 과 동일합니다.

 

▼비밀번호 수정 메서드

Controller

@PostMapping("/updatePw")
@ResponseBody
public String updatePw(MemberVO member, String oldPw, String newPw, HttpServletRequest request){
	//세션 객체에서 member 속성에 저장된 값을 가져와 MemberVO 타입의 변수 member에 할당
	HttpSession session = request.getSession();
    member = (MemberVO) session.getAttribute("member");
    
    //기존 비밀번호를 입력하였을 때 제대로 입력하지 않는다면 
    //return 값으로 "이전 비밀번호가 일치하지 않습니다." 주었습니.
    String encodedOldPw = member.getPw();
    if(!pwEncoder.matches(oldPw,encodedOldPw)){
    	return "이전 비밀번호가 일치하지 않습니다.";
        
        
     String encodedNewPw = pwEncoder.encode(newPw);
     member.setPw(encodedNewPw);
     try{
     	service.updatePw(member);
      }catch (Exception e){
      	e.printStackTrace();
        return "비밀번호 변경에 실패 하였습니다.";
      }
      
      session.invalidate();
      return "success";
     }

-비밀번호 변경 메서드에선 이전 비밀번호, 새로운 비밀번호에 대한 매개변수를 만들어 주었으며,

matches를 통해 내가 입력한 값과 가지고있는 값이 동일 한지 판단 후 불일치 시 '이전 비밀번호가 일치하지 않습니다.'

라고 return 시켰습니다.

 

-새로운 비밀번호에 대해서는 try-catch 문을 통해 실패 시 예외처리를 하였습니다

 

이후 변경이 완료가 되면 세션이 끊기면서 login 화면으로 return 하게 하였습니다.

로그인 화면으로 리턴하는 부분은 js를 통해 구현 하였습니다.

 

-@ResponseBody를 선언하여 ajax로 처리하려고 한 이유는

기존의 비밀번호 값을 ajax로 처리 안하고 if문을 통해 비교를 하려고 하니 인코딩 된 비밀번호를 집어넣어야지만 작동이 되어,

ajax를 통해 서버랑 통신하여 각 기존 비밀번호에 대한 매개변수를 통해 값 비교를 하였습니다.

 

Service&DAO

//Service
	@Override
	public void updatePw(MemberVO member)throws Exception {
		dao.updatePw(member);
	}
    
 //DAO
 
 	@Override
	public void updatePw(MemberVO member) {
		session.update("mapper.Member.updatePw",member);
	}

Mapper.xml

<update id="updatePw" parameterType="MemberVO">
<![CDATA[
	update hr_user
	set pw = #{pw}
	where id = #{id}
]]>
</update>

 

JSP

<form  name="frm" method="post" action="${path}/member/updatePw">
<h1>변경하실 비밀번호를 입력해주세요!</h1>

	<label>이전 비밀번호</label>
	<input type="password" name="oldPw" class="oldPw"/>
	
	<label>새로운 비밀번호</label>
	<input type="password" name="newPw" class="newPw"/>
	
    <button type="button" onclick="updatePw()">변경</button>
</form>

기존 db컬럼에 있는 pw를 가져오지 않고 controller에서 선언한 oldpw,newpw를 가지고 input 을 생성하였습니다.

 

JS

function updatePw() {
    var oldPw = $('.oldPw').val();
    var newPw = $('.newPw').val();

    if (oldPw == '') {
        alert('기존 비밀번호를 입력해주세요');
        return false;
    }
    if (newPw == '') {
        alert('변경할 비밀번호를 입력해주세요');
        return false;
    }

    // 비밀번호 변경 요청을 보내는 ajax 호출
    $.ajax({
        type: "POST",
        url: "${path}/member/updatePw",
        data: { oldPw: oldPw, 
        		newPw: newPw },
        success: function (data) {
            if (data === 'success') {
                // 비밀번호 변경이 성공적으로 이루어졌을 때 처리할 코드 작성
                alert('비밀번호가 성공적으로 변경되었습니다.');
                window.location.href = '${path}/member/login';
            } else {
                // 비밀번호 변경이 실패했을 때 처리할 코드 작성
                alert('비밀번호 변경에 실패하였습니다.');
            }
        },
        error: function (xhr, status, error) {
            // 비밀번호 변경이 실패했을 때 처리할 코드 작성
        	console.log(xhr.responseText);
        }
    });
}

-먼저 기존 비밀번호와 새로운 비밀번호에 입력값에 대한 변수 선언

-만약 값을 입력 하지 않고 변경 버튼을 누를시 경고창을 띄우게 하였습니다.

 

-ajax를 통해 controller 의 return 값인 success를 가지고 data === 'success'  라고 한다면

변경되었다는 경고창과 함께 로그인창으로 넘어가게 하였으며,

만약 기존 비밀번호를 제대로 입력하지 않았다면 변경에 실패하였다고 띄웠습니다.

성공 및 실패에 대한 경고창

성공적으로 변경이 되었다면 DB값에서 확인 하면 변경된 것이 확인이 됩니다. 이후 변경된 비밀번호로 로그인하시면됩니다.

DB의 비밀번호 값 변경