spring-security Spring Security登录页面,Angular无法正常工作

xj3cbfub  于 2022-11-11  发布在  Spring
关注(0)|答案(2)|浏览(203)

我试图做的Spring + Angular应用程序与登录页面使用Spring安全。
我在从angular(也是日志页面)向spring发送请求时遇到了问题。我在这两种技术上都是新手,不知道我做错了什么。
登录工程与 Postman (后请求“localhost:8080/auth”与形式-数据{用户名,密码}).我做了自定义登录页面与Angular ,并试图发送后,并获得请求(与相同的用户名/密码):

loginUser(username: string | undefined, password: string | undefined) {
    const headers = new HttpHeaders(username ? {
      authorization : 'Basic ' + btoa(username + ':' + password)
    } : {});
    console.log(username)
    console.log(password)
    this.http.post(this.uri + "/auth", {headers}).subscribe(response => {
        console.log(response);
    });

由console.log返回的用户名和密码是正确的。请求返回代码302,并且spring发送login?error带有“Invalid credentials”spring安全页面的页面。如果我将post更改为get,则请求返回404(且不返回登录错误)、 Postman 也返回-但在 Postman 授权工程,稍后我可以发送其他请求-在Angular 我不能-其他请求返回302和Spring安全登录页面。
我的 Spring 网页安全配置:

@Configuration
@AllArgsConstructor
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    private final AppUserService userService;
    private final BCryptPasswordEncoder bCryptPasswordEncoder;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().configurationSource(request -> new CorsConfiguration().applyPermitDefaultValues())
                .and()
                .csrf().disable() //to delete
                .authorizeRequests()
                .antMatchers("/v*/registration/**", "/login", "/auth")
                .permitAll()
                .anyRequest()
                .authenticated()
                .and()
                .formLogin()
                .loginProcessingUrl("/auth")
                .usernameParameter("username")
                .passwordParameter("password")
                .permitAll()
                .and().logout().permitAll().and()
                .httpBasic()
        ;
    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.authenticationProvider(daoAuthenticationProvider());
    }

    @Bean
    public DaoAuthenticationProvider daoAuthenticationProvider(){
        DaoAuthenticationProvider provider = new DaoAuthenticationProvider();
        provider.setPasswordEncoder(bCryptPasswordEncoder);
        provider.setUserDetailsService(userService);
        return provider;

    }
sg24os4d

sg24os4d1#

问题出在Angular 函数loginUser上。
第一次身份验证时,必须在正文请求上发送参数,而不是在标头请求上发送参数。请删除以下标头。

const headers = new HttpHeaders(username ? {
           authorization : 'Basic ' + btoa(username + ':' + password)
         } : {});

您必须在其他已验证请求的授权头上发送令牌
在登录用户,你可以发送如下

this.http.post(this.uri + "/auth", { username, password }).subscribe(response => {
        console.log(response);
    });
gjmwrych

gjmwrych2#

可能存在Angular 问题,请检查以下代码
请检查以下代码&(请求正文)

this.http.post(this.uri + "/auth", 
               { username, password} )
               .subscribe(response => {
        console.log(response);
    });

相关问题