2016-09-29 29 views
2

Spring Securityを使用してAngular2フォームからユーザーを認証しようとしていますが、機能していません。私は、Web上ですべてを見て、私は間違っているつもりですどこの誰かが指摘することができ、それへの正しい答えを見つけていないように見えるしました -Spring Security with Angular2

<security:form-login login-page="/" 
         authentication-failure-url="/security/login" 
         default-target-url="/"/> 

    <security:access-denied-handler error-page="/security/denied"/> 
    <security:logout invalidate-session="true" 
        logout-success-url="/security/logout/success" 
        logout-url="/security/logout"/>    
-

ここでは私の春-のsecurity.xmlからの抜粋です

は、ここに私のangular2フォームです -

<form (ngSubmit)="onLogin(f.value)" class="form-horizontal" role="form" #f="ngForm"> 
        <div class="form-group"> 
         <label class="col-sm-3 control-label" for="j_username">Username:</label> 
         <div class="col-sm-8"> 
          <input type="text" class="form-control" placeholder="Username" name="j_username" [(ngModel)]="user.userName" 
            maxlength="50" id="j_username" required > 
         </div> 
        </div> 
        <div class="form-group"> 
         <label class="col-sm-3 control-label" for="j_password">Password:</label> 
         <div class="col-sm-8"> 
          <input type="password" class="form-control" placeholder="Password" name="j_password" [(ngModel)]="user.password" 
            maxlength="50" id="j_password" required> 
         </div> 
        </div> 
        <div class="form-group"> 
         <div class="col-sm-offset-8 col-sm-10"> 
          <input type="submit" class="btn btn-default" value="Login"> 
         </div> 
        </div> 
       </form> 

そしてここでコンポーネントのコードです -

onLogin(f) { 
    this.userService.makeHttpCall(f); 
} 

とフィン春のセキュリティを呼び出すサービス -

makeHttpCall(f): void { 
    let userName = f['j_username']; 
    let password = f['j_password']; 
    let data = 'j_username='+userName+'&j_password='+password; 
    console.log(data); 
    let headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'}); 
    let options = new RequestOptions({headers: headers} 
       ); 
    this.http.post('/j_spring_security_check', data, options) 
     .map(this.extractData) 
     .catch(this.handleError); 


} 

誰かが間違っていると指摘できますか? httpコールは、私の春のセキュリティ設定で定義されたAuthenticationManagerにはなりません。

答えて

3

Angular2では、HTTPコールは、登録するとすぐにトリガーされます。このようにコードを調整します。

this.http.post('/j_spring_security_check', data, options) 
    .map(this.extractData) 
    .catch(this.handleError). 
    .subscribe(data => { 
     // do something here with the response 
    }) 
+0

ありがとうMatt!それはうまくいった!私の最初の1つの私の悪い、私はデバッガは、サーバー側のコードには、決して呼び出しを返すことはできませんでした。 – Pratik

+0

ようこそ。あなたの問題は一度に私にとって非常によく知られていた:) – Matt