[spring] 클론코딩09 User - 비밀번호 변경

Controller

---

UsersController

//pw-change 요청
@GetMapping("/pw-change")
public ModelAndView pwChange() {
	return new ModelAndView ("user/pw-change");
}

비밀번호 변경 페이지 요청

해당 페이지로 이동

현재 비밀번호, 새비밀번호 그리고 새비밀번호 확인 총 세가지 정보를 받은 후 현재 비밀번호가 일치하고 새비밀번호와 새비밀번호 확인이 서로 일치할시에만 비밀번호 변경을 하도록 한다.

 

//비밀번호 확인 처리 요청
@PostMapping("/checkPw")
public String checkPw(@RequestBody String pw, HttpSession session) throws Exception {
	
	logger.info("비밀번호 확인 요청 발생");
	
	String result = null;
	BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
	
	UsersVO dbUser = (UsersVO)session.getAttribute("login");
	logger.info("DB 회원의 비밀번호 : " + dbUser.getPw());
	logger.info("폼에서 받아온 비밀번호 : " + pw);
	
	if(encoder.matches(pw, dbUser.getPw())) {
		result = "pwConfirmOK";
	} else {
		result = "pwConfirmNO";
	}
	
	return result;
	
}

앞서 회원가입에서는 비동기식으로 비밀번호를 확인했는데 여기서는 동기방식으로 확인하도록 하였다. BCryptPassWordEncoder의 matches를 이용해서 일치 여부를 확인한다.

 

//비밀번호 변경 요청
@PostMapping("/pw-change")
public String pwChange(@RequestBody UsersVO user, HttpSession session) throws Exception {
	
	logger.info("비밀번호 변경 요청 발생!!!");
	
	//비밀번호 변경
	usersService.modifyPw(user);
	
	//비밀번호 변경 성공시 로그인 세션 객체 다시 담음
	LoginVO modifyUser = new LoginVO();
	modifyUser.setEmail(user.getEmail());
	
	UsersVO mUser = usersService.login(modifyUser);
	logger.info("회원정보 불러오기 : " + mUser);
	session.setAttribute("login", mUser);
	
	return "changeSuccess";
}

 

 

 

 

Service

---

UsersService

//비밀번호 변경
@Override
public void modifyPw(UsersVO user) throws Exception {
	
	//회원 비밀번호를 인코딩하기 위해 객체 선언
	BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
	System.out.println("암호화 전 비밀번호 : " + user.getPw());

	//회원 비밀번호를 암호화하여 user객체에 다시 저장
	String securePw = encoder.encode(user.getPw());
	user.setPw(securePw);
	
	System.out.println("암호화 후 비밀번호 : " + user.getPw());
	
	usersDAO.modifyPw(user);
	
}

비밀번호 암호화처리를 service단에서 처리해준다.

 

 

 

View

---

pw-change.jsp

$.ajax({
	type: "POST",
	url: "/myapp/user/checkPw",
	headers: {
		"Content-Type": "application/json",
        "X-HTTP-Method-Override": "POST"
	},
	data: pw,
	datatype: "json",
	success: function(result) {			
		console.log(result);
					
		if(result === "pwConfirmOK") {
			$('#pwMsg').html('');
			chk1 = true;
		} else {
			$('#pwMsg').html('');
			chk1 = false;
		}
									
	},
	error : function(error) {
    	console.log("error : " + error);
	}
});

현재 비밀번호가 맞는지 요청하기

 

 

//새로운 비번
$('#newPw').on('keyup', function() {
	//비밀번호 공백 확인
	if($("#newPw").val() === ""){
		$('#newPwMsg').html('<b>비밀번호는 필수 정보입니다.</b>');
		chk2 = false;
	}		         
	//비밀번호 유효성검사
	else if(!getPwCheck.test($("#newPw").val()) || $("#newPw").val().length < 8){
		$('#newPwMsg').html('<b>특수문자 포함 8자 이상 입력하세요</b>');
		chk2 = false;
	} else {
		$('#newPwMsg').html('');
		chk2 = true;
	}
			
}); //end of new password
			
			
//비밀번호 확인
$('#newPwCheck').on('keyup', function() {
	
	if($("#newPwCheck").val() === "") {
		$('#newPwMsg').html('<b">비밀번호 확인은 필수 정보입니다.</b>');
		chk3 = false;
	} else if( $("#newPw").val() != $("#newPwCheck").val() ) {
		$('#newPwMsg').html('<b>비밀번호가 일치하지 않습니다.</b>');
		chk3 = false;
	} else {
		$('#newPwMsg').html('');
		chk3 = true;
}
	
			});//end of passwordCheck

새로운 비밀번호와 비밀번호 확인이 서로 일치하는지 확인

 

 

//비밀번호 변경 요청처리하기
$('.emailChkBtn').click(function(e) {
	
	if(chk1 == false) {
		alert('현재 비밀번호가 틀렸습니다.');	

	} else if(chk2 == false){
		alert('2번 틀림');
	} else if(chk3 == false){
		alert('3번 틀림');
			
	} else if(chk1 && chk2 && chk3) {
			
		const userNo = $('#userNo').val();
		const pw = $("#newPw").val();
		const email = $("#email").val();
		const id = $("#id").val();
		const name = $('#name').val();
		const user = {
			userNo: userNo,
			id: id,
            pw: pw,
            email: email,
            name: name
		};
		console.log(user);
					
		$.ajax({
			type: "POST",
			url: "/myapp/user/pw-change",
            headers: {
               "Content-Type": "application/json",
                "X-HTTP-Method-Override": "POST"
            },
            dataType: "text",
            data: JSON.stringify(user),
            success: function(result) {
            	
           	console.log("result: " + result);
            	if(result === "changeSuccess") {
            		alert('비밀번호가 변경되었습니다.');
            		location.href ="/myapp/user/pw-change";
            	} else {
           		alert('현재 비밀번호가 틀렸습니다.');
	           	}
            }
		});
					
	} else {
		alert('입력정보를 다시 확인하세요.');	
	}
});

비밀번호 변경 요청 처리