Wednesday, May 27, 2015

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]);
}());


No comments:

Post a Comment