web-dev-qa-db-ja.com

angular 2スプリングセキュリティでログイン

springセキュリティをカスタムangular 2ログインと統合しようとしています。これは、アプリの特定のエンドポイントがSpringセキュリティで保護されているため、アクセスしようとすると、=で処理される/ 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) 
}

私の知る限り、ユーザー名とパスワードの変数名のSpring Securityのデフォルトは「username」と「password」です。これらはリクエスト本文で渡されると確信しているため、{"username":"admin", "password" : "pass"}Iなどの無効なユーザーデータを渡す場合はリダイレクトする必要があります。/login？errorか何かに、そして正常に認証されたら、私は/ welcomeにリダイレクトされ、認証されたままになります。

データベースにユーザーとパスが定義されており、カスタムuserDetailsS​​erviceがそれに対して回答、コメント、質問をチェックします。

restangularspring-mvcspring-securityrestful-authentication
5
Fernando Castilla Ospina

APIを使用する場合は、フォーム認証ではなく、HTTP基本認証またはトークン認証のいずれかを使用する必要があります。それらのいずれかを使用する場合は、HTTPSを使用する必要があります。

Angular 2）を使用してHTTP基本方法で認証するには、ログインサービスは次のようになります。

_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
     });
}
_

次に、この_(click)="loginNow()_のようなコンポーネントテンプレート内でloginNow()メソッドを使用できます。

サーバーが認証を受け入れると、Spring Security機能により、JSESSIONIDがブラウザに自動的に保存され、プライベートリソースにアクセスするために毎回資格情報の詳細を送信する必要がなくなります。

ログインサーバーの方法は次のようになります。

_@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

同様の問題が発生しましたが、前述のようにsuccesslogoutハンドラーをオーバーライドする必要がありました ここ 。

0
Karthikeyan