오늘은 서비스에 비밀번호 검증과 회원정보와 비밀번호수정 클라이언트 코드를 작성하였다.
우선 전에 작성해둔 서비스 코드이다.
public ProfileResponseDto changePassword(String userId, ProfileRequestDto updateProfile) {
User user = userRepository.findByUserId(userId)
.orElseThrow(() -> new IllegalArgumentException("회원정보가 존재하지 않습니다."));
String currentPassword = updateProfile.getCurrentPassword();
if (!passwordEncoder.matches(currentPassword, user.getPassword())) {
throw new IllegalArgumentException("현재 비밀번호가 일치하지 않습니다.");
}
String newPassword = passwordEncoder.encode(updateProfile.getNewPassword());;
user.setPassword(newPassword);
user = userRepository.save(user);
return new ProfileResponseDto(user);
}
월래는 if문에 검증 코드가 있었지만 날라가서 다시 작성한 코드이다 passwordencoder.matches()를 사용하면 스프링시큐리티로 암호화된 패스워드와 클라이언트에서 현재 비밀번호와 검증하여 맞으면 넘어가고 아니면 예외처리로 로그를 반환해준다. 이것을 이용하여 현재 패스워드와 일치시 비밀번호를 바꿀수 있게 전환하는 역할을 한다.
그리고 회원정보조회,수정 클라이언트 코드이다.
<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>프로필 수정</title>
<style>
table {
margin: auto;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
</style>
</head>
<body>
<div class="p-3 bg-body-secondary">
<p class="display-6 text-center m-3">
마이페이지 정보수정
</p>
</div>
<div class="text-center container">
<form id="profileForm" name="infobox" style="margin-top: 15%; margin-right: 5%;">
<table>
<tr>
<th class="p-3">닉네임</th>
<td>
<input type="text" id="userName" class="inputbox form-control text-center"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</td>
</tr>
<tr>
<th class="p-3">비밀번호</th>
<td>
<button type="button" id="passwordChange" class="btn btn-primary btn m-2">변경</button>
</td>
</tr>
<tr>
<th class="p-3">자기소개</th>
<td>
<textarea type="text" id="intro" class="inputbox form-control-lg text-center"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</textarea>
</td>
</tr>
</table>
</form>
<button type="button" id="changebtnsuccess" class="btn btn-primary btn"
style="display: none; margin-left: 2em; margin-top: 10px;">완료</button>
<button type="button" id="changebtn" class="btn btn-primary btn"
style="margin-left: 2em; margin-top: 10px;">수정</button>
<button type="button" id="cancel" class="btn btn-secondary btn"
style="margin-left: 10px; margin-top: 10px;">취소</button>
</div>
</body>
<script>
$('#cancel').click(function () {
window.location.href = "/";
})
$('#passwordChange').click(function () {
window.location.href = "/user/profile-page/pwchange";
});
$('.inputbox').prop("disabled", true);
$('#password').prop("disabled", true);
$('#changebtn').click(function () {
$('#changebtn').hide();
$('#changebtnsuccess').show();
$('.inputbox').prop("disabled", false);
});
$.ajax({
url: "/profile",
type: "GET",
contentType: "application/json",
success: function (response) {
let userName = response['profileResponseDto']['userName'];
let intro = response['profileResponseDto']['intro'];
let userId = response['profileResponseDto']['user_id']; // 실제 사용자 ID값 가져오기
let textarea_str = $('#intro').val();
textarea_str = intro;
$('#userName').attr('value', userName);
$('#intro').html(textarea_str);
// 수정 버튼 클릭 시 AJAX 요청에서 실제 사용자 ID값 사용
$('#changebtnsuccess').click(function () {
let userName = $('#userName').val();
let intro = $('#intro').val();
let usernm = document.getElementById("userName");
let intro2 = document.getElementById("intro");
let RegExp = /^[a-zA-Z0-9ㄱ-ㅎ|ㅏ-ㅣ|가-힣]{3,20}$/;
if (usernm.value == "") {
alert("닉네임이 공백입니다. 문자 입력해주세요.");
usernm.focus();
return false;
} else if (!RegExp.test(usernm.value)) {
alert("닉네임을 3글자 이상 20글자 이하혹은 공백문자가 없게 입력해주세요.");
usernm.focus();
return false;
}
if (intro.length <= 10 || intro.length > 1000 ) {
alert("자기소개를 10글자 이상 1000글자 미만으로 입력해주세요.")
intro2.focus();
return false;
}
$.ajax({
url: "/profile/update/" + userId, // 실제 사용자 ID값 사용
type: "PUT",
data: JSON.stringify({
"userName": userName,
"intro": intro,
}),
contentType: "application/json",
success: function (json) {
// console.log(json);
alert("정보수정이 완료되었습니다.")
$('#changebtnsuccess').hide();
$('#changebtn').show();
$('.inputbox').prop("disabled", true);
},
error: function () {
alert("수정에 실패하였습니다.")
}
});
});
}
});
</script>
</html>
사용스킬은 부트스트랩5와 제이쿼리를 사용하여 작성한 간단한 조회,수정코드이다. 또한 유효성검사를 통해 조건문을 통해 작성한 내용들을 검증해 통과시 데이터를 서버로 반환하여 수정해준다.
비밀번호 수정 클라이언트 코드이다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"
integrity="sha384-fbbOQedDUMZZ5KreZpsbe1LCZPVmfTnH7ois6mU1QK+m14rQ1l2bGBq41eYeM/fS"
crossorigin="anonymous"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>비밀번호 수정</title>
<style>
table {
margin: auto;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="p-3 bg-body-secondary">
<p class="display-6 text-center">
마이페이지 비밀번호 수정
</p>
</div>
<div class="text-center container">
<form id="passwordForm" name="infobox" style="margin-top: 15%; margin-right: 2%;">
<table>
<tr>
<th class="p-3">현재 비밀번호</th>
<td>
<input type="password" id="memberPw1" class="inputbox form-control text-center"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</td>
</tr>
<tr>
<th class="p-3">새로운 비밀번호</th>
<td>
<input type="password" id="memberPw2" class="inputbox form-control text-center"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</td>
</tr>
<tr>
<th class="p-3">새로운 비밀번호 확인</th>
<td>
<input type="password" id="memberPw3" class="inputbox form-control text-center"
aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</td>
</tr>
</table>
<button type="button" id="pwUpdate" class="btn btn-primary btn"
style="margin-left: 2rem; margin-top: 10px;">변경</button>
<button type="button" id="cancel" class="btn btn-secondary btn"
style="margin-left: 10px; margin-top: 10px;">취소</button>
</form>
</div>
</body>
<script>
$('#cancel').click(function () {
window.location.href = "/user/profile-page";
});
$.ajax({
url: "/profile",
type: "GET",
contentType: "application/json",
success: function (response) {
let password = response['profileResponseDto']['password'];
let userId = response['profileResponseDto']['user_id']; // 실제 사용자 ID값 가져오기
// console.log(userId)
$('#pwUpdate').click(function () {
let currentPassword = $('#memberPw1').val();
let newPassword = $('#memberPw2').val();
let newPassword2 = $('#memberPw3').val();
for (let i = 1; i < 3; i++) {
var pw = $("#memberPw" + i).val()
var num = pw.search(/[0-9]/g);
var eng = pw.search(/[a-z]/ig);
var spe = pw.search(/[`~!@@#$%^&*|₩₩₩'₩";:₩/?]/gi);
if (pw.length < 8 || pw.length > 20) {
alert("8자리 ~ 20자리 이내로 입력해주세요.");
return false;
} else if (pw.search(/\s/) != -1) {
alert("비밀번호는 공백 없이 입력해주세요.");
return false;
} else if (num < 0 || eng < 0 || spe < 0) {
alert("영문,숫자, 특수문자를 혼합하여 입력해주세요.");
return false;
} else {
console.log("통과");
}
}
if ($('#memberPw1').val() == '') {
alert("현재 비밀번호를 입력해주세요.");
$("#memberPw1").focus();
return false
}
if ($('#memberPw2').val() == '') {
alert("새로운 비밀번호를 입력해주세요.");
$("#memberPw1").focus();
return false
}
if ($('#memberPw3').val() == '') {
alert("새로운 비밀번호 확인을 입력해주세요.");
$("#memberPw1").focus();
return false
}
if ($("#memberPw2").val() != $("#memberPw3").val()) {
alert("변경비밀번호가 일치하지 않습니다.");
$("#memberPw3").focus();
return false
}
$.ajax({
url: "/profile/password/" + userId, // 실제 사용자 ID값 사용
type: "PUT",
contentType: "application/json",
data: JSON.stringify({
"currentPassword": currentPassword,
"newPassword": newPassword
}),
success: function (json) {
// console.log(json);
alert("비밀번호수정이 완료되었습니다.");
window.location.href = "/user/profile-page";
},
error: function () {
alert("현재비밀번호가 일치하지않습니다.");
}
});
});
}
});
</script>
</html>마찬가지로 클라이언트에도 유효성검사를 추가해 이중으로 검증하는 단계를 가진다.
모두 서버를 통신할때는 ajax를 통해 서버와 통신을 한다.
'Spring' 카테고리의 다른 글
| Thymeleaf 내용 정리 (0) | 2023.07.12 |
|---|---|
| JUnit, Mockito 내용정리 (0) | 2023.07.11 |
| SMTP 구현을 통해 회원가입 이메일 인증 기능 구현 (0) | 2023.07.05 |
| Spring Security,JWT,REST 내용정리 (0) | 2023.06.26 |
| JWT 내용정리 (0) | 2023.06.19 |
