39주차 - 회원가입

 

 

-  아이디를 입력했을 때 중복이 아닌 경우 css 변경

-  비밀번호 입력 칸에 입력 할 경우 msg 사라지게 하기

- 비밀번호 암호화 test

 

 

 

 

아이디를 입력했을 때 중복이 아닌 경우에는 msg 색이 파란색으로 띄우게 변경

 

id 중복 확인 코드로 예시로 들면

function checkId() { // id 중복 확인
    let form_data = new FormData();
    form_data.append("username", $("#username").val())
    $.ajax({
        type: "POST",
        url: `http://localhost:8080/user/signup/username`,
        data: form_data,
        contentType: false,
        processData: false,
        success: function (response) {
            if( response == "사용가능한 ID 입니다.") {
                document.getElementById("usernameMsg").style.color="cornflowerblue";
                $("#usernameMsg").text(response);
            } else {
                document.getElementById("usernameMsg").style.color="red";
                $("#usernameMsg").text(response);
            }

        }
    });
}

 

서버에서 받아오는 값중에 reponse가 "사용가능한 ID 입니다." 인 경우 파란색으로 변경

 

 

 

---

비밀번호 입력 칸에 입력 할 경우 해당 msg 사라지게 하기

 

$("#password").on('focus keyup', function () {
    if ( $("#password").val().length == 0) {
        $("#passwordCheckMsg").text("비밀번호를 입력해주세요")
    } else{
        $("#passwordCheckMsg").text("")
    }
})

 

 

 

---

비밀번호 암호화 test

 

* BCryptPasswordEncoder로 인코딩시 매번 결과 값이 다르다.

equals로 비교할 수 없는 BCryptPasswordEncoder은 비교 메서드 matches를 제공

출처 : BCryptPasswordEncoder 패스워드 암호화 관련 이슈

 

 

암호화는 BCryptPasswordEncoder로 구현된 encoder()를 이용

평문 패스워드와 암호화된 패스워드가 서로 같다라는 사실이 증명되어야 로그인을 구현할 수 있다.

→ 두 문자열을 비교해주는 메소드 mathes() 사용

* matches()는 내부에서 평문 패스워드와 암호화된 패스워드가 서로 대칭되는지에 대한 알고리즘을 구현

 

• 평문 패스워드와 암호화 패스워드가 서로 다른게 맞는지 →  assertNotEquals()
• BCryptPasswordEncoder의 matches()를 이용해서
  평문 패스워드와 암호화 패스워드를 비교했을 때, 같은 패스워드라는 결과를 반환받는지
  → assertTrue()

 

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

 

 

@Test
@DisplayName("password 암호화 test")
void passwordConfirm() {
    //given
    String password = "12345678";

    //when
    String encodedPassword = passwordEncoder.encode(password);

    //then
    assertAll( // 2가지 test
            () -> assertNotEquals(password, encodedPassword),
            () -> assertTrue(passwordEncoder.matches(password, encodedPassword))
    );
}