Spring Security with Angular2

Question

I'm trying to authenticate my user from an Angular2 form using Spring Security, but its not working. I've looked all over the web, but seem to find no right answer to it, could someone point out where I am going wrong -

Here's a snippet from my spring-security.xml -

    <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"/>            

Here's my angular2 form -

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

And here's the component code -

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

And finally the service which calls the spring security -

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


}

Could someone point out where i am going wrong? the http call, does not make it to the AuthenticationManager defined in my spring security configuration.

Answer 1

In Angular2, HTTP calls are triggered as soon as you subscribe to them. Adjust the code like this:

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