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.
1 answers
solution1
4 ACCPTED 2015-07-24 17:06:17
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.