Spring AngularJS login integration with Spring Security Spring Security 3 and Spring Security 4
Spring AngularJS login integration with Spring Security Spring Security 3 and Spring Security 4
This post shows how to use angularjs for login to spring mvc with spring security set to custom <form-login>
Spring security 3
Below is the login.jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head ng-app="login-module">
<script src="angular.min.js"></script>
<script src="login.js"></script>
</head>
<body ng-controller="MainController">
<form>
<input type="text" name="username" ng-model="myusername" />
<input type="password" name="password" ng-model="mypassword" />
<button ng-click="login(<c:url value="/" />, myusername, mypassowrd)" />
</form>
</body>
</html>
The login.js looks like the following:
(function(){
var MainController = function($scope, $http, $log){
var encode4form = function(data){
var result="";
var first = true;
for(var key in data)
{
if(first){
first=false;
}
else{
result+="&"
}
result+=(key + "=" + data[key]);
}
$log.info(result);
return result;
};
$scope.login = function(myspringappname, myusername, mypassword){
$http(
{
url: "/"+myspringappname+"/j_spring_security_check",
method:"POST",
data: encode4form({
j_username: myusername,
j_password: mypassword
}),
headers:
{
"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8",
}
}
).success(function(response){
$log.info(response);
});
};
var onError = function(reason){
$log.error(reason);
alert(reason);
};
};
var module=angular.module("login-module", []);
module.controller("MainController", ["$scope", "$http", "$log", MainController]);
}());
Spring Security 4
Below is the login.jsp:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head ng-app="login-module">
<script src="angular.min.js"></script>
<script src="login.js"></script>
</head>
<body ng-controller="MainController">
<form>
<input type="text" name="username" ng-model="myusername" />
<input type="password" name="password" ng-model="mypassword" />
<button ng-click="login(<c:url value="/" />, myusername, mypassowrd, ${_csrf.token})" />
</form>
</body>
</html>
The login.js looks like the following:
(function(){
var MainController = function($scope, $http, $log){
var encode4form = function(data){
var result="";
var first = true;
for(var key in data)
{
if(first){
first=false;
}
else{
result+="&"
}
result+=(key + "=" + data[key]);
}
$log.info(result);
return result;
};
$scope.login = function(myspringappname, myusername, mypassword, mycsrf){
$http(
{
url: "/"+myspringappname+"/login",
method:"POST",
data: encode4form({
username: myusername,
password: mypassword,
_csrf: mycsrf
}),
headers:
{
"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8",
}
}
).success(function(response){
$log.info(response);
});
};
var onError = function(reason){
$log.error(reason);
alert(reason);
};
};
var module=angular.module("login-module", []);
module.controller("MainController", ["$scope", "$http", "$log", MainController]);
}());
download file now
Comments
Post a Comment