3.1.2 버전 Spring Security h2 오류

h2:
    console:
      enabled: false # 스프링부트 3.1.2 버전 이슈로 시큐리티 사용 시 콘솔 사용이 어려움
      path: /h2

securityConfig

경로 인증 및 인가 / 로그인 세팅

@Bean
  public SecurityFilterChain securityFilterChain(HttpSecurity httpSecurity) throws Exception {

        // csrf 보안 해제 (실무에서는 보안 적용)
        httpSecurity.csrf(config -> config.disable());
       
        // 요청 주소 인증 및 인가 세팅
        httpSecurity.authorizeHttpRequests(
            config -> config
            .requestMatchers("/css/**", "/js/**", "/img/**")
            // 위에 해당하는 주소의 요청은 인증 및 인가 없이 허용
            .permitAll()
            .requestMatchers("/auth/**", "/api/*/auth/**")
            .permitAll()
            .requestMatchers("/admin/**", "api/*/auth/**")
            // .hasRole("ADMIN")
            // 사용 시에는 무조건 ROLE_ 붙여서 사용해야 함
            // 위의 주소는 ADMIN 권한 필요
            .hasAuthority("ROLE_ADMIN")
            .anyRequest()
            // 위의 주소는 로그인(인증) 필요
            .authenticated()

        )
        
        httpSecurity.formLogin(
            config -> config
            // 실제 로그인 컨트롤러 메소드 경로
            .loginPage("/auth/login")
            // 가상의 주소를 넣는다
            .loginProcessingUrl("/api/v1/auth/login")
            .usernameParameter("id")
            .passwordParameter("password")
            .permitAll()
        );
        return httpSecurity.getOrBuild();
    }
    
}

기타 파일 추가

/config/security/ 에 auth폴더 추가 후 파일 추가 (내용은 다음 게시물)
1. CustomUserDetails
2. CustomUserDetailsService
3. CustomAuthenticationSuccessHandler
4. CustomAuthenticationFailureHandler

페이지 간 통신

1. 주소치고 페이지 이동

• get만 가능
• 브라우저 창에 주소 입력
• location.href / replace / reload

2. fetch 비동기 통신

• 자바스크립트에서 페이지 이동 없이 데이터를 서버와 주고 받을 때 사용
• get / post / put / delete 등 메소드 사용 가능

3. form 통신

• form 태그에서 정한 주소 페이지로 이동
• get / post 메소드 사용 가능
• 시큐리티 form 로그인 (페이지 이동 방식으로 할 경우)

4. fetch로 form 전송

• 비동기 통신을 하고 싶은데 form을 무조건 보내야 하는 경우 사용
• 파일(이미지, 사진, 동영상, 엑셀)을 서버로 전송 할 때
• 시큐리티 form 로그인 (비동기 통신 방식으로 할 경우)

login.html - js

fetch 이용하여 form 가져와 통신하기

// html에서 form 태그 가져오기
      const loginForm = document.querySelector("#loginform");
      // form 태그에서 name기준으로 값 가져오기
      const formData = new FormData(loginForm);
      // formData를 비동기 통신 데이터로 바꾸기
      const loginParams = new URLSearchParams(formData);

      
      fetch("/api/v1/auth/login", {
        method: "POST",
        headers: {
          // form 일반 데이터 전송 : application/x-www-form-urlencoded
          // form 파일 데이터 포함해서 전송 : multipart/form-data
          "Content-type" : "application/x-www-form-urlencoded"
        },
        body : loginParams
      })
      .then(response => response.json())
      .then((result) => {
          alert(result.message);
          if (result.code === 0) {
            location.replace("/");
          }
        })
        .catch((error) => {
          console.log(error);
        });

securityConfig 추가

Handler 추가

@RequiredArgsConstructor
public class SecurityConfig {

    private final CustomAuthenticationSuccessHandler customAuthenticationSuccessHandler;
    private final CustomAuthenticationFailureHandler customAuthenticationFailureHandler;
    
    httpSecurity.formLogin(
            config -> config
            // 실제 로그인 컨트롤러 메소드 경로
            .loginPage("/auth/login")
            // 가상의 주소를 넣는다
            .loginProcessingUrl("/api/v1/auth/login")
            .usernameParameter("id")
            .passwordParameter("password")
            .successHandler(customAuthenticationSuccessHandler)
            .failureHandler(customAuthenticationFailureHandler)
            .permitAll()
        );