rest - 使用 spring security 的 Angular 2 登录

Question

我正在尝试将 spring security 与自定义 angular 2 登录集成，这是我的应用程序的特定端点受 spring security 保护，尝试访问它将重定向到在 angular 2 中处理的/login。就目前情况而言我不知道如何执行登录并在登录后授予对后端 API 的访问权限。

我正在配置 spring security 如下:

@Override
protected void configure(final HttpSecurity http) throws Exception {
    http
        .csrf().disable()
        .cors().and()
        .authorizeRequests()
        .antMatchers("/api/someEndpoint/**")
        .hasRole(ADMIN_ROLE).and().formLogin()
        .loginPage("/login").and().logout();
}


@Override
protected void configure(final AuthenticationManagerBuilder auth) throws Exception {
    auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder);
}

因为我有默认登录，所以一切正常，但我发现自己无法创建有效的 Angular 2 登录集成。我在 Angular 2 中尝试了以下代码无济于事:

login(loginDetails:Object) {
    console.log(loginDetails)
    const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions({ headers: headers });
const body = JSON.stringify(loginDetails);
    console.log(headers);
    console.log(body);
return this.http.post(this.loginUrl, body, options) 
}

据我所知，用户名和密码变量名的 spring security 默认值是“用户名”和“密码”，我确信它们是在请求正文中传递的，因此在传递一些无效的用户数据时，如 {"username":"admin", "password": "pass"我应该被重定向到/login?error 什么的，当成功通过身份验证时，我应该被重定向到/welcome 并保持身份验证

我在我的数据库中定义了用户和密码，我的自定义 userDetailsS​​ervice 检查它 欢迎任何回答、评论或问题

Answer 1

使用 API 后，您必须使用 HTTP 基本身份验证。还需要使用 HTTPS 来防止中间人攻击。

要使用 Angular 实现 HTTP Basic，登录服务将如下所示:

login (loginDetails: any): Observable<LoginResponse> { // custom class, may be empty for now

    let headers = new Headers({ 
      'Authorization': 'Basic ' + btoa(loginDetails.login + ':' + loginDetails.pass),
      'X-Requested-With': 'XMLHttpRequest' // to suppress 401 browser popup
    });

    let options = new RequestOptions({ 
      headers: headers 
    });

    return this.http.post(this.loginUrl, {}, options)
      .catch(e => this.handleError(e)); // handle 401 error - bad credentials
}

...然后在调用者组件中订阅:

loginNow() {
   this
     .loginService
     .login(this.loginDetails)
     .subscribe(next => {
        this.router.navigateByUrl("/"); // login succeed
     }, error => {
        this.error = "Bad credentials"; // or extract smth from <error> object
     });
}

然后您可以在组件模板内使用 loginNow() 方法，例如 (click)="loginNow()。

一旦服务器接受授权，JSESSIONID 将自动存储在您的浏览器中，因为 Spring Security 功能，您不会在每次访问私有(private)资源时都被迫发送凭据.

您的登录服务器方法可能如下所示:

@PreAuthorize("hasRole('USER')")
@PostMapping("/login")
public ResponseEntity login() {
    return new ResponseEntity<>(HttpStatus.OK);
}

...当授权失败时，它会以 401 UNAUTHORIZED 拒绝，否则将以 200 SUCCESS 接受。

如何以正确的方式设置服务器有许多 Spring Security 演示项目:https://github.com/spring-guides/tut-spring-security-and-angular-js