0

I cant make custom login page work with angularjs and spring boot security . Default browser login form only get displayed.

I am able to authenticate and authorize the user but default login page gets displayed on first time. Also i get 302 status on logout.

Angular version : 1.4.8 , using ui-router.

Below is my main js .

    'use strict';

angular
  .module('renalyxNis', [
    'ui.router','ui.bootstrap' ,'chart.js','ngAnimate','ngResource','angular-timeline'])
  .config(function($stateProvider,$urlRouterProvider,$locationProvider, $httpProvider) {

      $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';




    $urlRouterProvider.otherwise('/login');

    $stateProvider

       .state('dashboard', {
        url:'/dashboard',
        controller : 'starterCtrl',
        templateUrl: 'pages/starter2.html'

    })
      .state('dashboard.home',{
        url:'/home',
        controller : 'appointmentCtrl',
        templateUrl:'pages/home.html'

      })
      .state('dashboard.session',{
        url:'/session',       
        controller : 'sessionCtrl',
        templateUrl:'pages/session.html'

      })
      .state('dashboard.shiftmanagement',{
        url:'/shiftmanagement',        
        controller : 'shiftManageCtrl',
        templateUrl:'pages/shiftmanagement.html'

      })
      .state('dashboard.dialysisconfig',{
        url:'/dialysisconfig',       
        controller : 'dialysisConfigCtrl',
        templateUrl:'pages/dialysisconfig.html'

      })
      .state('dashboard.staffconfig',{
        url:'/staffconfig',       
        controller : 'staffCtrl',
        templateUrl:'pages/staff.html'

      })

      .state('login',{
        templateUrl:'login.html',
        url:'/login'
    });

    $httpProvider.interceptors.push(function($q) {

        return {

            'responseError': function(rejection){

                var defer = $q.defer();

                if(rejection.status == 401){
                    console.dir(rejection);
                    console.log("rejected");
                    $state.go('login');
                }

                defer.reject(rejection);

                return defer.promise;

            }
        };
    });


  });

Login ctrl :

angular.module('renalyxNis')
.controller('LoginController',function($rootScope, $scope, $http, $location, $state) {

    $rootScope.authenticated = false;

  var authenticate = function(credentials, callback) {

        var headers = credentials ? {authorization : "Basic "
            + btoa(credentials.username + ":" + credentials.password)
        } : {};

        console.log("inside login");
        $http.get('user', {headers : headers}).success(function(data) {
            // $rootScope.authenticated = false;
            if (data.name) {
                $rootScope.authenticated = true;
                console.log("complete data");

                console.log(data);
                console.log('username :');
                $rootScope.username = (data.principal.username);
                $scope.username = (data.principal.username);
                console.log('auth :');
                $rootScope.roles = (data.principal.authorities); 
                console.log(data.principal.authorities);
                console.log('name');
                console.log(data.name);

                $scope.name = data.name;

            } else {
                console.log(data);
                $rootScope.authenticated = false;
            }
            callback && callback();
        }).error(function() {
            $rootScope.authenticated = false;
            callback && callback();
        });

    }

    //authenticate();
    $scope.credentials = {};
    $scope.login = function() {

        console.log("credentials");
        console.log($scope.credentials);
        authenticate($scope.credentials, function() {
            if ($rootScope.authenticated) {
                console.log("authenticated")
                // $location.path("/home");
                $state.go ('dashboard');

                $scope.error = false;
            } else {
                $state.go('login');
                //  $location.path("/login");
                $scope.error = true;
            }
        });
        console.log("in login");
    };

    $scope.logout = function() {
        $http.post('logout', {}).success(function() {
            $rootScope.authenticated = false;
            console.log("in logout");
            $state.go('login');
            //    $location.path("/login");
        }).error(function(data) {
            $rootScope.authenticated = false;
        });
    }

});

Websecurityconfig file :

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    private static PasswordEncoder encoder;

    @Autowired
    private UserDetailsService customUserDetailsService;

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        System.out.println("in configure1");
         http 
         .httpBasic().and()

         .authorizeRequests()
           .antMatchers( "/").permitAll()
           .anyRequest().authenticated().and()

           .logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).logoutSuccessUrl("/")
           .permitAll().and()
           .formLogin()
           .loginPage("/login")
           .permitAll().and()         
           .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class)
           .csrf().csrfTokenRepository(csrfTokenRepository());

    }

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(customUserDetailsService);
               // .passwordEncoder(passwordEncoder());
        System.out.println("in configure");

    }

    private CsrfTokenRepository csrfTokenRepository() {
          HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
          repository.setHeaderName("X-XSRF-TOKEN");
          return repository;
        }

    @Bean
    public PasswordEncoder passwordEncoder() {
        if(encoder == null) {
            encoder = new BCryptPasswordEncoder();
        }

        return encoder;
    }
}

CSRF header filter :

public class CsrfHeaderFilter extends OncePerRequestFilter {
      @Override
      protected void doFilterInternal(HttpServletRequest request,
          HttpServletResponse response, FilterChain filterChain)
          throws ServletException, IOException {
        CsrfToken csrf = (CsrfToken) request.getAttribute(CsrfToken.class
            .getName());
        if (csrf != null) {
          Cookie cookie = WebUtils.getCookie(request, "XSRF-TOKEN");
          String token = csrf.getToken();
          if (cookie==null || token!=null && !token.equals(cookie.getValue())) {
            cookie = new Cookie("XSRF-TOKEN", token);
            cookie.setPath("/");
            response.addCookie(cookie);
          }
        }
        filterChain.doFilter(request, response);
      }
    }

I referred from spring.io and dave syer login examples but to no avail.

1
  • Have you fixed this issue? I am also facing the same issue. Your comment below in @Jamone341 's answer to add /** fixes it but is it the correct way to do it? Jun 6, 2017 at 21:51

2 Answers 2

0
.state('login',{
    templateUrl:'login.html',
    url:'/login'

isn't specifying the LoginController so perhaps login.html doesn't get rendered properly?

1
  • 1
    Thanks , i tried but it didn't work . It works if i put "/**" in ant matchers Feb 17, 2016 at 11:05
0

When using with AngularJS be sure to use withHttpOnlyFalse(): .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse())

as stated in 4.1 documentation:

https://docs.spring.io/spring-security/site/docs/current/apidocs/org/springframework/security/web/csrf/CookieCsrfTokenRepository.html#withHttpOnlyFalse--

... still receiving an 302 redirect from the server to the invalidSessionUrl if you did set it using http.sessionManagement(). ... invalidSessionUrl("login url or so")

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.