아이디,비밀번호 중복검사
들어가며
이번에는 전에 구현했던 회원가입 페이지에서 아이디 및 비밀번호를 중복검사(중복체크)를 하는 구현해 보겠습니다. AJAX 통신을 위한 API 두 개를 간단하게 구현할 예정입니다.
수정사항
아 래와 같이 아이디 중복검사 버튼을 따로 만들지 않으며 바로 아이디 입력 시 실시간으로 아이디를 체크할 수 있게 수정.
join.html 아이디 수정
<div class="form-group">
<label for="loginId" id="loginIdTxt"> 아이디</label>
<input type="text" id="loginId" name="loginId" class="form-control"placeholder="아이디" onInput="checkDuplicateId()"
th:class="${#fields.hasErrors('loginId')} ? 'form-control field-error' : 'form-group'"
th:value="*{loginId}">
<div class="invalid-feedback" id="loginIdError">
<small th:class="text-danger" th:errors="*{loginId}"></small>
</div>
</div>- onInput : 이벤트로, 입력요소의 값이 변경될때 발생하는 이벤트이다.
API
AJAX 통신을 하기 위해서 아이디 중복검사, 비밀번호 중복검사를 구현을 해보겠습니다. 아이디 중복검사와 비밀번호 일치 검증을 하기 위해서 MemberRepository, MmeberService 부분에 기능을 추가하여 MemberController에 API를 사용해 보겠습니
MemberRepository
아이디 중복검사를 하기 위해서는 실제 객체에서 loginId 값을 가져오는 기능을 추가해야 합니다.
public List<Member> findById(String loginId){
String jpql = "select m from Member m where m.loginId=:loginId";
List<Member> findId = em.createQuery(jpql, Member.class).setParameter("loginId", loginId).getResultList();
return findId;
}- findById 메서드를 추가하여 loginId 입력 시 멤버 객체에서 파마 리터 loginId 값을 입력하면 값을 가져올 수 있도록 쿼리 비문을 작성해서 추가해 줍니다.
MemberService
서비스 부분에서는 아이디 중복검사와 비밀번호 일치 테스트 기능을 작성해 보도록 하겠습니다.
아이디 중복검사 기능은 MemberRepository에서 loginId 값을 가져와 아이디 중복 시 1을 반환하며 중복하지 않을 시 0을 반환하도록 하겠습니다.
validateMemberId
public int validateMemberId(String id) {
List<Member> findId = memberRepository.findById(id);
if(findId !=null && !findId.isEmpty()){
return 1; //아이디 중복시 1;
}
return 0; //아이디 중복x 0;
}비밀번호 일치 검사는 아이디 중복검사와 비슷하게 비밀번호가 같다면 0을 일치하지 않으면 1을 반환하도록 하겠습니다.
passwordMath
public int passwordMatch(String password1, String password2) {
if(password1.equals(password2)){
return 0; // 비밀번호가 같다면 0
}
return 1; // 일치하지 않으면 1
}MemberController
validateMemberId와 passwordMath 기능을 사용하여 간단하게 AJAX 통신을 위한 API를 구현해 보겠습니다.
그리고 아이디가 중복되거나 비밀번호가 일치하지 않을 때 회원가입이 되지 않도록 해보겠습니다.
※ 아이디 중복검사 API
checkDuplicateId
@PostMapping("/checkDuplicateId")
@ResponseBody
public int checkDuplicateId(@RequestParam("loginId") String loginId){
int id = memberService.validateMemberId(loginId);
return id;
}
※ 비밀번호 일치검사 API
checkMatchPassword
@PostMapping("/checkMatchPassword")
@ResponseBody
public int checkMatchPassword(@RequestParam("password1") String password1, @RequestParam("password2")String password2){
int password = memberService.passwordMatch(password1, password2);
return password;
}
간단한 API를 구현했다. 하지만 이 상태로 만하게 되면 아이디가 중복이 되어도 회원가입을 누르게 되면 회원가입이 될 수 있다. 그래서 joinPost 기능 부분에 2개의 로직을 추가적으로 넣어줘야 한다.
joinPost 추가작성
if(memberService.validateMemberId(memberDto.getLoginId())==1){
bindingResult.rejectValue("loginId","duplicate.loginId","아이디가 중복되었습니다.");
}
if(memberService.passwordMatch(memberDto.getPassword1(), memberDto.getPassword2())==1){
bindingResult.rejectValue("password2","duplicate.password","비밀번호가 일치하지 않습니다.");
}두 개의 코드를 bindingResult.hasErrors() 위에다가 넣어주면 회원가입 버튼을 누르게 되면 중복되지 않거나 일치할 경우에만 회원가입이 될 것이다.
HTML
이제는 AJAX를 사용하기위해서 JavaScript를 이용해서 html 부분을 수정할예정입니다. 아래코드를 <head>부분에 넣어줍니다.
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>아이디 중복검사를 위한 스크립트 작성
checkDuplicateId 스크립트
<script>
function checkDuplicateId() {
var loginid = $('#loginId').val();
if (loginid.trim() !== "") {
$.ajax({
url: "/checkDuplicateId",
type: "POST",
data: {"loginId": loginid},
success: function (data) {
if (data == 0) {
console.log("아이디 사용가능")
$('#loginIdError').html("<span> 아이디 사용 가능</span>").css({
"color": "#0a53be",
"font-weight": "bold",
"font-size": "13px"
});
} else {
console.log("아이디 중복")
$('#loginIdError').html("<span> 아이디 중복</span>").css({
"color": "#FA3E3E",
"font-weight": "bold",
"font-size": "13px"
});
;
}
}
});
} else {
$('#loginIdError').html(""); // 빈 아이디 입력 시 메시지 삭제
}
}
비밀번호 일치검사를 하기위해서는 password2부분에 onInput=" checkMatchPassword()" 를 추가
checkMatchPassword
function checkMatchPassword() {
var password1 = $('#password1').val();
var password2 = $('#password2').val();
$.ajax({
url: "/checkMatchPassword",
type: "POST",
data: {
"password1": password1,
"password2": password2
},
success: function (data) {
if (data == 0) {
$('#passwordError').html("<span> 비밀번호 일치</span>").css({
"color": "#0a53be",
"font-weight": "bold",
"font-size": "13px"
});
} else {
$('#passwordError').html("<span> 비밀번호 불일치</span>").css({
"color": "#FA3E3E",
"font-weight": "bold",
"font-size": "13px"
});
}
}
})
}
초기데이터
앞서 구현한 기능이 동작이 잘 되는지 확인해 보기 위해 @Test를 실행해 볼 수도 있지만 아직 초보이기 때문에 직접 눈으로 확인해 보겠습니다. 아이디 중복검사를 하려면 DB에 아이디가 들어가 있어야 합니다. create 기능을 사용 중이기 때문에 매번 첫 번째 아이디를 생성 후에 두 번째 아이디 때부터 중복검사를 사용할 수 있습니다. 그런 번거로움 해결하기 위해 간단한 초기 데이터를 넣도록 하겠습니다.
TestData
@Slf4j
@RequiredArgsConstructor
public class TestData {
private final MemberRepository memberRepository;
@EventListener(ApplicationReadyEvent.class)
@Transactional
public void initData(){
Member member = Member.builder()
.loginId("test")
.username("testname")
.password1("1234")
.password2("1234")
.build();
memberRepository.save(member);
}
}web하위에다가 간단한 정보만 들어있는 회원데이터를 저장할수있는 TestData.class를 만들어 줍니다.
profiles:
active: local그후에 application.yml에 코드를 추가
BookApplication
@Bean
@Profile("local")
public TestData initData(MemberRepository memberRepository){
return new TestData(memberRepository);
}설정후 실행해보면
초기데이터가 들어가있는것을 확인해볼수있다.
실행
실행이 정상적으로 작동된다 그후에 DB의 값을 보면
정상적으로 아이디가 중복되자않았으며 비밀번호는 서로 일치하게 저장이되는걸 확인해볼수있습니다!
다음으로
다음에는 자바에서 제공되는 메일을 사용하요 메일을통해 인증번호를 보내는 기능을 개발해보도록 하겠습니다.
틀린부분이있거나 궁금하신거는 댓글로 달아주시면 감사합니당 :)
'ToyProject쇼핑몰' 카테고리의 다른 글
| [스프링 부트] JPA 쇼핑몰 # 6.회원가입 주소 (0) | 2023.10.27 |
|---|---|
| [스프링 부트] JPA 쇼핑몰 # 5.메일 인증 (0) | 2023.10.27 |
| [스프링 부트] JPA 쇼핑몰 프로젝트 # 3.회원가입 (4) | 2023.10.22 |
| [스프링 부트] JPA 쇼핑몰 프로젝트 # 2.메인페이지 구성 (0) | 2023.10.20 |
| [스프링 부트] JPA 쇼핑몰 프로젝트 #1.프로젝트 준비 (0) | 2023.10.20 |
