Spring Angular身份验证失败

时间:2019-10-09 12:45:28

标签: angular spring spring-security

我的基本身份验证类是:

@Configuration
@EnableWebSecurity
public class BasicAuthConfiguration
    extends WebSecurityConfigurerAdapter {


@Override
protected void configure(HttpSecurity http)
        throws Exception {
    http
            .httpBasic()
            .and()
            .authorizeRequests()
            .antMatchers("/login").permitAll()
            .anyRequest().authenticated()
            .and().cors().and().csrf()
            .csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());

}

@Bean
public CorsConfigurationSource corsConfigurationSource() {
    final CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(ImmutableList.of("*"));
    configuration.setAllowedMethods(ImmutableList.of("HEAD",
            "GET", "POST", "PUT", "DELETE", "PATCH"));
    // setAllowCredentials(true) is important, otherwise:
    // The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
    configuration.setAllowCredentials(true);
    // setAllowedHeaders is important! Without it, OPTIONS preflight request
    // will fail with 403 Invalid CORS request
    configuration.setAllowedHeaders(ImmutableList.of("Authorization", "Cache-Control", "Content-Type", "X-XSS-Protection", "X-Content-Type-Options"));
    final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}
}

我的测试休息控制器是:

@Api(value="BMT test", description="BMT test system")
@RestController
@RequestMapping("/bmt/api/v1")
public class TestRestController {

@CrossOrigin(origins="*", maxAge=3600)
@GetMapping("/test/get")
public String getTest() {
    return "test";
}

@CrossOrigin(origins="*", maxAge=3600)
@PostMapping ("/test/post")
public String getTest2(String param) {
    return "test";
}

}

在角度站点上,我有:

   public logUser(userLogin: string, password: string): any {
    const token = this.createBasicAuthToken('user', 'user')
    const httpOptions = {
        headers: new HttpHeaders({
            'Authorization': token
        })
    };
    return this.http.post(`http://localhost:8080/bmt/api/v1/test/post`,{},
        httpOptions).subscribe(
        data => console.log('success', data),
        error => console.log('oops', error)
    );


}

public createBasicAuthToken(userLogin: String, password: String): string {
    return 'Basic ' + window.btoa(userLogin + ':' + password);
}

但是IDK为什么我可以通过邮递员去连接以获取方法,但是可以从同一控制器获取方法。但是,如果我尝试通过角度进行连接,则无论如何都无法实现。我不知道。

我需要spring boot / angular 5,6,7(我可以轻松更新)身份验证系统,但是无论如何,我都会失败。有什么建议吗?

1 个答案:

答案 0 :(得分:0)

您正在将用户名和密码传递给logUser方法,而无需进行任何操作。

如果要在请求中使用基本身份验证,则必须在请求标头中设置Authorization。但是首先,您必须创建基本的身份验证令牌表单用户和密码。

  

用户名和密码用一个冒号(:)组合。这意味着用户名本身不能包含冒号。   结果字符串被编码为八位字节序列。默认情况下,用于此编码的字符集是未指定的,只要它与US-ASCII兼容即可,但是服务器可以通过发送charset参数来建议使用UTF-8。[7]   结果字符串使用Base64的变体进行编码。   然后,将授权方法和空格(例如“ Basic”)添加到编码字符串中。 see on wikipedia

类似token = 'Basic ' + window.btoa(userLogin+':'+password)

尝试一下:

public logUser(userLogin: string, password: string): any {
  const token = 'Basic ' + window.btoa(userLogin+':'+password)`
  const httpOptions = {
    headers: new HttpHeaders({
      'Authorization': token
    })
  };
return this.http.post(`http://localhost:8080/bmt/api/v1/test/post`,
    {}, httpOptions).subscribe(
    data => console.log('success', data),
    error => console.log('oops', error)
);

并要求在您的请求中传递httpOptions