Регистрация через модальное окно React + Spring

Рейтинг: 0Ответов: 1Опубликовано: 18.05.2023

Мы хотим сделать регистрацию и логин через модальное окно на React. Вроде сделали вёрстку, но встал вопрос о том, как связать авторизацию и модальное окно. Сколько гайдов не посмотрел - везде в SecurityConfig указывают перенаправление на страницу логина, откуда и ждут ответа о введённых данных. У модального окна же нет никакого уникального адреса в целом(адрес не меняется при вызове окна) и оно может вызываться с любой страницы. Как-то можно связать регистрацию с модальным окном?

Ответы

▲ 0Принят

Как оказалось, совсем неважно - модальное окно или отдельная страница для регистрации

На стороне React необходимо вызвать POST запрос:

import axios from "axios";
   const onRegistration = () =>{
        axios({
            method: "POST", 
            url: "/auth/register", 
        {
            login: login,
            password: password
        }}).then((resp) => {
            /*Если всё хорошо*/
        }).catch((error) => {
            /*Если не прошла регистрация*/
        });
    }

На беке же нам нужен контроллер и эндпоинт, куда будет идти запрос:

@CrossOrigin(origins = "адрес вашего фронта")
@RequestMapping("/auth")
@RestController
public class AuthController {
    @PostMapping("/register")
    public ResponseEntity<Ваш класс> register(@RequestBody RegistrationDTO registrationDTO){
        /*Обрабатываем регистрацию*/
    }
}

Также необходимо настроить SecurityConfig и решить вопросы с CORS.

SecurityConfig:

@Configuration
@EnableWebSecurity
public class WebSecurityConfig implements WebMvcConfigurer {

    private final UserAuthenticationEntryPoint userAuthenticationEntryPoint;
    private final UserAuthProvider userAuthProvider;

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http.exceptionHandling().authenticationEntryPoint(userAuthenticationEntryPoint)
                .and()
                    .addFilterBefore(new JwtAuthFilter(userAuthProvider), BasicAuthenticationFilter.class)
                    .csrf().disable()
                    .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS)
                .and()
                    .authorizeHttpRequests((req) -> req
                            .requestMatchers(HttpMethod.POST, "/auth/login", "/auth", "/auth/register").permitAll()
                            .anyRequest().authenticated()
                    );
        return http.build();
    }
}

CorsFilter:

@Configuration
@EnableWebMvc
public class WebConfig {

    @Bean
    public FilterRegistrationBean corsFilter(){
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.setAllowCredentials(true);
        corsConfiguration.addAllowedOrigin("адрес вашего фронта");
        corsConfiguration.setAllowedHeaders(Arrays.asList(
                HttpHeaders.AUTHORIZATION,
                HttpHeaders.CONTENT_TYPE,
                HttpHeaders.ACCEPT
        ));
        corsConfiguration.setAllowedMethods(Arrays.asList(
                HttpMethod.GET.name(),
                HttpMethod.POST.name(),
                HttpMethod.PUT.name(),
                HttpMethod.DELETE.name()
        ));
        corsConfiguration.setMaxAge(3600L);
        source.registerCorsConfiguration("/**", corsConfiguration);
        FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(-102); // нужно для того, чтоб всё это дело выполнялось в самом начале
        return bean;
    }
}