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.

Jan B. · Accepted Answer · 2016-09-29 09:23:18Z

3

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

answered Sep 29, 2016 at 9:23

Jan B.

6,5585 gold badges38 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pratik Over a year ago

Thanks Matt! It did work! My bad for the first one, I had debugger put in the server side code, which never let the call return anything.

Jan B. Over a year ago

You're welcome. Your issues sounded very familiar to me at once :)

Collectives™ on Stack Overflow

Spring Security with Angular2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related