I have successfully integrated spring security with my AngularJS webpage utilizing Rest API. However, I am facing an issue where every time I attempt to log in using the rest api from my customized login page, it prompts me for the login credentials in a popup dialog like this:
https://i.stack.imgur.com/Eu5zj.png
Below is a snippet of my Spring security configuration file:
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable().exceptionHandling().and()
.anonymous().and()
.servletApi().and()
.headers().cacheControl().and()
.authorizeRequests()
//allow anonymous resource requests
.antMatchers("/").permitAll()
.antMatchers("/favicon.ico").permitAll()
//allow anonymous POSTs to login
.antMatchers(HttpMethod.POST, "/webresources/login").permitAll()
.anyRequest().hasRole("USER").and()
.addFilterBefore(new StatelessLoginFilter("/login", new TokenAuthenticationService("123abc"), new CustomJDBCDaoImpl() , authenticationManager()), UsernamePasswordAuthenticationFilter.class)
.addFilterBefore(new StatelessAuthenticationFilter(new TokenAuthenticationService("123abc")), UsernamePasswordAuthenticationFilter.class).httpBasic();
}
The controller function triggered by the Log In button click is as follows:
app.controller('SigninFormController', ['$scope', '$http', '$state', function($scope, $http, $state) {
$scope.user = {};
$scope.authError = null;
$scope.login = function() {
$scope.authError = null;
// Try to login
$http.post('../api/verifyUser'+$scope.user.email+'&'+$scope.user.password, {},{
headers : { "Authorization" : "BasicCustom" }
})
.then(function(response) {
console.log(response);
if ( !response.data.user ) {
$scope.authError = 'Email or Password not correct';
}else{
$state.go('home.go');
}
}, function(x) {
$scope.authError = 'Server Error';
});
};
}])
Could anyone shed some light on why I am encountering this popup instead of being redirected to the home page upon logging in?