it-roy-ru.com

angular 2 вход с пружинной защитой

я пытаюсь интегрировать Spring Security с настраиваемым логином angular 2, который является определенной конечной точкой моего приложения, защищенным Spring Security, при попытке доступа к нему будет перенаправлен на/login, который обрабатывается в angular 2. В настоящее время я не имею ни малейшего понятия о том, как выполнить вход в систему и предоставить доступ к бэкэнд-API после регистрации.

я настраиваю безопасность весны следующим образом:

@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) 
}

насколько я знаю, весенние настройки безопасности для имен переменных username и password представляют собой "username" и "password", которые, я уверен, передаются в теле запроса, поэтому при передаче некоторых недопустимых пользовательских данных, таких как {"username":"admin", "password" : "pass"}I, следует перенаправить в/login? ошибка или что-то, и после успешной аутентификации я должен быть перенаправлен на/welcome и оставаться аутентифицированным

У меня есть пользователь и пароль, определенный в моей БД, и мой пользовательский userDetailsService проверяет любые ответы, комментарии или вопросы приветствуются

5
Fernando Castilla Ospina

Как только вы работаете с API, вы должны использовать HTTP Basic или токен аутентификации, а не Form-1. При использовании любого из них необходимо использовать HTTPS.

Для аутентификации в HTTP Basic, используя Angular 2, сервис входа в систему может выглядеть следующим образом:

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, и вам не придется каждый раз отправлять учетные данные для доступа к частным ресурсам.

Ваш метод входа на сервер может выглядеть так:

@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

код не проверен, хотя :(

7
WildDev

Ваша весенняя конфигурация безопасности должна выглядеть так

 http!!
     .cors().and()
     .csrf().disable()
    .authorizeRequests()
     .requestMatchers(object: RequestMatcher {
       override fun matches(request: HttpServletRequest?): Boolean {
         return CorsUtils.isCorsRequest(request)
       }
     }).permitAll()
    .antMatchers("/api/**").authenticated()
    .anyRequest().permitAll()
    .and()
    .formLogin().permitAll()
0
Ninja420