268일차(모험 177일차) - 회원가입 실시간 중복 체크하기 2

로그인 예외처리하다가 중간에 에러나서 먼저 회원가입 코드 다 작성 후에 로그인 해야겠다.

참고 : Spring Boot 게시판 Security 로그인 실패시 메시지 출력하기

 

로그인 시 비밀번호 체크하는 코드도 확인해봤다. 이후에 참고하면 될 것 같다.

참고 : [ Spring Security ] 비밀번호 암호화 PasswordEncoder

 

로그인 시 비밀번호 확인하는 코드를 먼저 테스트 코드로 작성해도 될 것 같다.

참고 : 스프링 시큐리티 이용하여 패스워드 암호화 적용하기

 

 

 

이제 본문으로 돌아와서 이 전에 아이디와 닉네임 중복을 체크했다.

이번에는 비밀번호가 일치하는지 체크해봤다.

 

 

*에러 

Unknown column 'user0_.password_confirm' in 'field list'

mysql에서 해당 컬럼으로 등록하기 → password_confirm

 

 

html

<input name="email" type="text" placeholder="이메일*" class="username" id="email"/>

<input name="password" type="password" placeholder="비밀번호*" class="username" id="password"/>
<div class="warningMsg" id="passwordCheckMsg">비밀번호를 입력해주세요</div>

<input name="passwordConfirm" type="password" placeholder="비밀번호 확인*" class="username" id="passwordConfirm"/>
<div class="warningMsg" id="passwordConfirmCheckMsg">비밀번호를 입력해주세요</div>

 

 

js

input에 입력하면 움직임 감지

$("#passwordConfirm").on('focus keyup', function () {
    checkPasswordConfirm()
})

function checkPasswordConfirm() {
    let form_data = new FormData();
    let password = $("#password").val()
    let passwordConfirm = $("#passwordConfirm").val()
    form_data.append("password", password)
    form_data.append("passwordConfirm", passwordConfirm)

    $.ajax({
        type: "POST",
        url: `http://localhost:8080/user/signup/password`,
        data: form_data,
        contentType: false,
        processData: false,
        success: function (response) {
            $("#passwordConfirmCheckMsg").text(response);
        }
    });
}

 

---

기존에는 password 체크하는 칼럼이 없었기 때문에 하나 추가했다.

 

User

public User(String username, String nickname, String password, String passwordConfirm, String email) {
    this.username = username;
    this.nickname = nickname;
    this.password = password;
    this.passwordConfirm = passwordConfirm;
    this.email = email;
}

// 생략
@Column(nullable = true)
private String passwordConfirm;

 

 

Dto

public class SignupRequestDto {
    private String username;
    private String nickname;
    private String password;
    private String passwordConfirm;
    private String email;
}

 

 

Controller

// password 중복 확인
@PostMapping("/user/signup/password")
public String checkPassword(@ModelAttribute SignupRequestDto requestDto) {
    System.out.println("requestDto password = " + requestDto);
    return userService.checkPasswordConfirm(requestDto);
}

 

 

Service

    public String checkPasswordConfirm(SignupRequestDto requestDto) {
        String password = requestDto.getPassword();
        String passwordConfirm = requestDto.getPasswordConfirm();

        System.out.println("password = " + password);
        System.out.println("passwordConfirm = " + passwordConfirm);
        if (passwordConfirm == null ||  passwordConfirm.isEmpty()) {
            return "비밀번호를 입력해주세요";
        } else {
            if (!password.equals(passwordConfirm)) {
                return "비밀번호가 다릅니다.";
            } else {
                return "비밀번호가 일치합니다.";
            }
        }
    }

 

 

backend : [add] 비밀번호 확인 체크 [#63] #65

front : [add] 비밀번호 확인 체크 [#70] #72

---

Test 코드 추가

requestDto1.setPasswordConfirm("test");

[add] 비밀번호 확인 칼럼 test코드에 추가 [#63]