Spring Security authentication through custom login with AngularJS

Question

I am creating a custom login form for Spring Security in my app with an AngularJS front end. I am having a hard time figuring out how to handle the authentication. All the tutorials and examples I find are using JSP and I see this:

<form name='loginForm'
      action="<c:url value='j_spring_security_check' />" method='POST'>

I am wondering what the equivalent would be in Angular. My configuration is set up to route to my custom login page:

@Configuration
@EnableWebSecurity
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth)
            throws Exception {
        auth.inMemoryAuthentication().withUser("user").password("pass")
                .roles("USER");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http.authorizeRequests().anyRequest().authenticated().and().formLogin().loginPage("/login/login.html").permitAll();
    }
}

And then I thought I would have my login page call an Angular function submitCredentials(isValid) on submission of username/password:

<!doctype html>
<html ng-app="app">
    <head>
        <title>Person Login</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script src="app.js"></script>
    </head>

    <div class="container">
    <body>
        <h1>Person Login</h1>
        <br>
        <div ng-controller="LoginCtrl">
            <form class="form-horizontal" name="loginForm" novalidate>

                <div class="form-group">
                    <label class="col-sm-1 control-label">Username</label>
                    <div class="col-sm-3">
                        <input class="form-control" name="username" type="text" ng-model="user.username">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label">Password</label>
                    <div class="col-sm-3">
                        <input class="form-control" name="password" type="text" ng-model="user.password">
                    </div>
                </div>

                <br><br>

                <button class="btn btn-primary" ng-click="submitCredentials(loginForm.$valid)">
                    Submit
                </button>
            </form>
        </div>
    </body>
    </div>
</html>

And then do something in the controller:

angular.module('app').controller('LoginCtrl', function($scope, $location, $http, $routeParams) {

    $scope.submitCredentials(isValid) {

        if (isValid) {
            // do something to authenticate user
        }
    }
});

It is that part that I don't know what to do. Right now I am using the in memory Spring authentication as a simple start, so if I could achieve that through the custom login I will be happy. Later I want to do authentication through checking credentials in a database.

it's an old question, but I am stuck in the same scenario. I don't want to involve angular navigation and all. Is there a simple approach to do that? — Aakash
– Aakash, Commented Apr 27, 2017 at 14:30

Mati · Accepted Answer · 2015-07-24 17:06:17Z

You have two options:

not full Single page Applications

This approach allows you to do POST request by form and <input type="submit"> which results in refresh of a page. With this approach server will give you session id with cookie, and every next request will be authenticated (browser will automatically add session id to every request).

Full Single Page Application

In this approach you create custom AuthenticationFilter which will take credentials from user (for example from json or xml) and authenticate it. With this "login" request, you also should provide a token which will be a substitute to session id (cookie). You have to add this token with every next request, so server can resolve user (in header, in query parameter, in path parameter).

I would suggest to read this article https://spring.io/guides/tutorials/spring-security-and-angular-js/ . It should clear up many doubts.

Collectives™ on Stack Overflow

Spring Security authentication through custom login with AngularJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related