Spring Security AngularJS Login

Question

I have a Spring Boot application and configured spring security to it, it uses a custom login page with a simple AngularJS form and i'm trying to authenticate through it but unsuccessfully. On my CurrentUserDetailsService loadUserByUsername(String param) the parameter paramcomes null everytime, can someone help me ? am i missing something?

This is my form :

<form role="form" action="" name="form" class="">
        <fieldset class="pure-group">
            <legend>Log In</legend>
            <div class="form-group">
                <label for="username">Username:</label> 
                <input type="text" class="form-control" id="username" name="username" ng-model="credentials.username"/>
            </div>
            <div class="form-group">
                <label for="password">Password:</label> 
                <input type="password"  class="form-control" id="password" name="password" ng-model="credentials.password"/>
            </div>
            <button ng-click="onLogin($event)" type="submit" class="btn btn-primary">Submit</button>
        </fieldset>
    </form>

This is my js:

$scope.onLogin = function($event){
     $event.preventDefault();
     $http({
         method: 'POST',
         url:'/login',
         data: $scope.credentials
     })  
}

This is my security configuration :

@Override
    protected void configure(HttpSecurity http) throws Exception {
        http
        .authorizeRequests()
        .antMatchers("/newuser","/create").permitAll()
        .antMatchers("/css/**").permitAll()
        .antMatchers("/js/**").permitAll()
        .antMatchers("/**").hasRole("USER").anyRequest().authenticated()
        .and()
        .formLogin()
        .loginProcessingUrl("/login")
        .usernameParameter("username")
        .passwordParameter("password")
        .defaultSuccessUrl("/index.html")
        .loginPage("/loginpage.html")
        .and()
        .httpBasic()
        .and()
        .logout()
        .logoutUrl("/logout")
        .logoutSuccessUrl("/loginpage.html")
        .permitAll()
        .and()
        .csrf().csrfTokenRepository(csrfTokenRepository())
        .and()
        .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);

    }

and this is the exception i'm getting everytime:

org.springframework.security.authentication.InternalAuthenticationServiceException: Cannot pass null or empty values to constructor

Also would like to mention that through my POST request username and password are sended

I tried with j_username and j_password but nothing.

score 1 · Accepted Answer · answered Mar 03 '16 at 13:42

Try building your post data like this instead:

$scope.onLogin = function($event){
    $event.preventDefault();
    var data = 'username=' + encodeURIComponent($scope.credentials.username) +
        '&password=' + encodeURIComponent($scope.credentials.password) +
        '&submit=Login';
    $http.post('/login', data, {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
}

That way it will be the expected Content-Type and if I'm not mistaken it matches the way the form would be posted normally. Sorry for not elaborating more.

Basically a one off of what @ajaegle refers to in the thread he's referencing — jEdgren, Mar 03 '16 at 13:43

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

Seems like you are posting the data as JSON instead of form_data (single params username and password). Please see this answer for details:

How do I POST urlencoded form data with $http in AngularJS?

edited May 23 '17 at 12:31

Community

1
1

answered Mar 03 '16 at 13:40

Andreas Jägle

11,632
3
31
31

Spring Security AngularJS Login

2 Answers2