모임 웹 프로젝트 회원가입 아이디 중복검사 처리(7)

회원가입 중에 가장 중요한 로직 중 하나인 아이디 중복검사 처리 로직을 구현하도록 하겠습니다.

 

아이디 중복검사 처리 로직을 스프링부트와 javascript를 이용하여 구현해 보았습니다.

 

중복 확인 로직은 주로 **서버와 클라이언트 간의 비동기 통신(AJAX)**을 통해 이루어집니다. 사용자가 아이디를 입력하고, '중복 확인' 버튼을 눌렀을 때, 클라이언트(브라우저)는 서버에 AJAX 요청을 보냅니다. 서버는 해당 아이디가 데이터베이스에 존재하는지 확인한 후, 클라이언트에게 그 결과를 반환합니다.

 

중복확인 로직의 순서입니다.

• 사용자가 아이디를 입력하고 중복 확인 버튼을 클릭.
• 클라이언트 측에서 서버로 AJAX 요청을 보냄.
• 서버에서 데이터베이스 조회 후, 아이디의 중복 여부를 확인.
• 클라이언트로 결과를 전달.
• 클라이언트는 결과에 따라 '사용 가능' 또는 '이미 사용 중' 메시지를 표시.

위와 같은 과정을 통해 중복확인 로직이 처리가 이루어집니다.

먼저 클라이언트 측에서 서버로 ajax요청을 보내는 코드입니다.
이 코드는 javascript에 fetch함수를 이용하여 구현을 하였습니다.

let isUsernameValid = false;  // 전역 변수로 아이디 유효 여부 저장

function checkUsername() {
  const uid = document.getElementById('uid').value;
  if (uid === '') {
    alert('아이디를 입력해주세요.');
    return;
  }

  // AJAX 요청으로 서버에 아이디 중복 체크 요청
  fetch(`/check-username?uid=${uid}`, {
    method: 'GET',
  })
          .then(response => response.json())
          .then(data => {
            if (data.exists) {
              alert('이미 존재하는 아이디입니다. 다른 아이디를 선택해주세요.');
              isUsernameValid = false;  // 중복 확인 실패
            } else {
              alert('사용 가능한 아이디입니다.');
              isUsernameValid = true;   // 중복 확인 성공
            }
          })
          .catch(error => {
            console.error('Error:', error);
            alert('아이디 중복 확인 중 오류가 발생했습니다.');
            isUsernameValid = false;  // 오류 발생 시 유효하지 않음
          });
}

function validateForm() {
  // 아이디 중복 체크 여부 확인
  if (!isUsernameValid) {
    alert('아이디 중복 확인을 통과하지 않았습니다. 중복 확인을 해주세요.');
    return false;
  }

중복확인을 완료하지 않으면 유효성 검사에서 걸러내기 위해서 중복확인 여부를 전역변수로 처리한뒤 나중에 유효성검사 로직에 중복확인 결과를 반영하여 폼 제출 여부를 처리할 수 있게 하였습니다.

 

이제 클라이언트로가 보낸 요청을 받을 수 있는 컨트롤러를 구현해 보도록 하겠습니다.

@GetMapping("/check-username")
public ResponseEntity<Map<String, Boolean>> checkUsername(@RequestParam String uid) {
    boolean exists = userService.isUsernameTaken(uid);
    Map<String, Boolean> response = new HashMap<>();
    response.put("exists", exists);
    return ResponseEntity.ok(response);
}

 

중복확인 컨트롤러 입니다. 컨트롤러를 통해 uid를 파라미터 값으로 받아서 서비스 로직으로 클라이언트의 요청을 처리 할 수 있게 한다음 결과 값을 반환 한 뒤 클라이언트로 다시 보내 줍니다.

 

컨트롤러에서 요청 할 서비스 로직을 구현해보겠습니다.

// 아이디 중복 여부 확인
public boolean isUsernameTaken(String uid) {
    return userRepository.existsByUid(uid);
}

repository를 통해 데이터 베이스에 매핑하여 아이디에 중복여부를 확인하는 로직입니다.

 

public interface UserRepository extends JpaRepository<User, Long> {
    Optional<User> findByUid(String Uid);
    // 아이디 중복 여부 확인 메서드
    boolean existsByUid(String uid);
}

repository도 구성한 뒤 지금까지 작성한 로직을 테스트 해보겠습니다.

지금까지 작성한 로직을 테스트해보면

이런 오류가 발생하는 걸 확인 할 수 있습니다.
이 오류는 Spring Security의 기본 설정에 의해 발생하는 문제로, 특정 경로에 대해 인증 없이 접근하려고 시도할 때 발생합니다. /check-username 경로는 로그인 페이지로 리다이렉트되고, 서버는 클라이언트에게 302 상태 코드와 함께 로그인 페이지로의 이동을 요구하게 됩니다.

따라서 Spring Security 설정에서 특정 경로에 대해 인증을 요구하지 않도록 설정하면 문제를 해결할 수 있습니다. 이를 위해 permitAll() 메서드를 사용해/check-username 경로를 인증 없이 접근할 수 있도록 설정해야 합니다.

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
    return http
            .authorizeRequests()
            .requestMatchers("/login", "/signup", "/user","image/*","/check-username").permitAll() //"/check-username"추가해 중복확인처리
            .anyRequest().authenticated()
            .and()
            .formLogin()
            .loginPage("/login")
            .defaultSuccessUrl("/articles")
            .and()
            .logout()
            .logoutSuccessUrl("/login")
            .invalidateHttpSession(true)
            .and()
            .csrf().disable()
            .build();
}

이렇게 설정하면 인증문제로 인해 중복확인 요청이 거절되는 문제를 해결 할 수 있다.