Как оказалось, совсем неважно - модальное окно или отдельная страница для регистрации
На стороне 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;
}
}