Angular Spring security

0

Witam!
Mam mały problem z logowaniem się w mojej aplikacji. Front w angularze a back w springu.
Stronę logowania napisałem sam i wyłączyłem żądania springa o hasło, jednakże podczas
odpalania strony i tak wyskakuje okno z prośbą o podanie hasła. Zalogowanie przez nie
uniemożliwia wylogowanie się na stronie. Ma ktoś jakiś pomysł na to? :)

 import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.security.SecurityProperties;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.annotation.Order;
import org.springframework.http.HttpMethod;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.csrf.CsrfFilter;
import org.springframework.security.web.csrf.CsrfTokenRepository;
import org.springframework.security.web.csrf.HttpSessionCsrfTokenRepository;

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {
	
	@Autowired
	public void configureAuth(AuthenticationManagerBuilder auth) throws Exception {
		auth.inMemoryAuthentication()
		.withUser("user").password("123").roles("USER")
		.and()
		.withUser("admin").password("321").roles("ADMIN");
	}

	
	protected void configure(HttpSecurity http) throws Exception {
	      http
	      .httpBasic().and()
	      .authorizeRequests()
	      .antMatchers("/home", "/login.html","/login", "/","/cars.html").permitAll()
	      .antMatchers("/customers.html").hasRole("ADMIN")
	        .antMatchers("/module1.js","/bootstrap.css","/style.css","/main.html","angular.js","album.js").permitAll()
	        .antMatchers(HttpMethod.GET,"/car/getCars").permitAll()
	        .anyRequest().authenticated()
	        .and()
	        .csrf().csrfTokenRepository(csrfTokenRepository())
	        .and()
	        .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
	    }
	
	private CsrfTokenRepository csrfTokenRepository() {
		  HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
		  repository.setHeaderName("X-XSRF-TOKEN");
		  return repository;
		}
}

 var myApp2 = angular.module("Module1", ['ngRoute','ngMap']);


myApp2.config(function($routeProvider, $locationProvider, $httpProvider){
	
	
	$routeProvider
	.when("/home",{
		templateUrl: "main.html",
		controller: "homeController"
	})
	.when("/cars",{
		templateUrl: "cars.html",
		controller: "carsController"
	})
	.when("/customers",{
		templateUrl: "customers.html",
		controller: "customerController"
	})
	.when("/customers/:id",{
		templateUrl: "customerDetails.html",
		controller: "customerDetailsController"
	})
	.when("/cars/:id",{
		templateUrl: "carDetails.html",
		controller: "carDetailsController"
	})
	.when("/contact",{
		templateUrl: "contact.html",
		controller: "contactController"
	})
	.when("/login",{
		templateUrl: "login.html",
		controller: "loginController"
	})
	.otherwise({
		redirectTo: "/home"
	})
	.when("/test",{
		templateUrl: "test.html",
		controller: "testController"
	})
	$locationProvider.html5Mode(true);
	$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
});

myApp2.controller('loginController', function($window, $rootScope, $scope, $http, $location) {
	
	
	var self = this
	
	var authenticate = function(credentials, callback) {
		
		
		var headers = credentials ? {authorization : "Basic "
			+ btoa(credentials.username + ":" + credentials.password)
		} : {};
		
		$http.get('user', {headers : headers}).then(function(response) {
			$rootScope.logged = response.data.name;
			$rootScope.authenticatedAdmin = false;
			if (response.data.name) {
				$rootScope.authenticated = true;
				if(response.data.name == 'admin'){
					$rootScope.authenticatedAdmin = true;
				}
				else{}
			} else {
				$rootScope.authenticated = false;
			}
			callback && callback();
		}, function() {
			$rootScope.authenticated = false;
			callback && callback();
		});
		
	}
	
	authenticate();
	$scope.credentials = {};
	$scope.login = function() {
		authenticate($scope.credentials, function() {
			if ($rootScope.authenticated) {
				$location.path("/");
				$scope.error = false;
				$window.location.reload();
			} else {
				$location.path("/login");
				$scope.error = true;
				$window.location.reload();
			}
		});
	};
	
	$scope.logout = function() {
		$http.post('logout', {}).finally(function() {
			$rootScope.authenticated = false;
			$rootScope.authenticatedAdmin = false;
			$location.path("/");
			$window.location.reload();
			
		});
	}
});

myApp2.controller('contactController', function(NgMap, $scope) {
	NgMap.getMap().then(function(map) {
		console.log(map.getCenter());
		console.log('markers', map.markers);
		console.log('shapes', map.shapes);
	});
	$scope.text
});

myApp2.controller("testController", function($scope){
	
});

myApp2.controller("homeController", function($scope){
	$scope.date = Date.now();
	
});

myApp2.controller("carsController", function($scope, $http){
	
	$scope.sortColumn = "brand";
	$scope.reverseSort = false;
	
	
	
	$scope.sortData = function (column){
		$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
		$scope.sortColumn = column;
	}
	
	$scope.getSortClass = function (column){
		
		if($scope.sortColumn == column){
			return $scope.reverseSort ? 'arrow-down' : 'arrow-up'
		}
		return '';
	}
	
	
	$http({
		method: 'GET',
		url:'http://localhost:8080/car/getCars'})
		.then(function(response) {
			$scope.cars = response.data;
		});
	
	$scope.getAllCars = function getCars(){
		$http.get('http://localhost:8080/car/getCars')
		.then(function(response) {
			$scope.cars = response.data;
		});
	}
	
	$scope.deleteCar = function deleteCar(id){
		var url  = "http://localhost:8080/car/deleteCar/"+id;
		$http.delete(url).then(function(response){
			$scope.getCars();
		})
	}
});

myApp2.controller("carDetailsController", function($scope, $http, $route){
	
	$scope.images = [
	                 {image : 'images/fordBronco.jpg', thumbnail: 'images/resized/fordBronco_th.jpg', description : 'image1'},
	                 {image : 'images/fordBronco2.jpg', thumbnail: 'images/resized/fordBronco2_th.jpg', description : 'image2'},
	                 {image : 'images/fordbronco3.jpg', thumbnail: 'images/resized/fordbronco3_th.jpg', description : 'image3'},
	                 {image : 'images/fordBronco4.jpg', thumbnail: 'images/resized/fordBronco4_th.jpg', description : 'image4'},
	                 {image : 'images/fordBronco5.jpg', thumbnail: 'images/resized/fordBronco5_th.jpg', description : 'image5'},
	                 {image : 'images/fordBronco6.jpg', thumbnail: 'images/resized/fordBronco6_th.jpg', description : 'image6'},
	                 {image : 'images/fordBronco7.jpg', thumbnail: 'images/resized/fordBronco7_th.jpg', description : 'image7'}
	                 ];
	
	$scope.currentImage = $scope.images[0];
	
	$scope.setCurrentImage = function (image){
		$scope.currentImage = image;
	};
	
	$http({
		method: 'GET',
		url:'http://localhost:8080/car/getById/'+$route.current.params.id,
	})
	.then(function(response) {
		$scope.car = response.data;
	});
	
	
});

myApp2.controller("customerDetailsController", function($scope, $http, $route){
	
	
	$http({
		method: 'GET',
		url:'http://localhost:8080/customer/getById/'+$route.current.params.id,
	})
	.then(function(response) {
		$scope.customer = response.data;
	});
	
	
});

myApp2.controller("customerController", function($scope,$http){
	
	$http({
		method: 'GET',
		url:'http://localhost:8080/customer/getAllCustomers'})
		.then(function(response) {
			$scope.customers = response.data;
		});
	
	$scope.getAllCustomers = function getAllCustomers(){
		$http.get('http://localhost:8080/customer/getAllCustomers')
		.then(function(response) {
			$scope.customers = response.data;
		});
	}
	
	$scope.deleteCustomer = function deleteCustomer(id){
		var url  = "http://localhost:8080/customer/deleteCustomer/"+id;
		$http.delete(url).then(function(response){
			$scope.getAllCustomers();
		})
	}
	
});
myApp2.controller('dateController', ['$scope', function ($scope) {
	$scope.date = Date.now();
}
]);



myApp2.controller('SlideController', ['$scope', '$location',function($scope, $location){ 
	$scope.goNext = function (hash) { 
		$location.path(hash);
	}}]);

myApp2.directive('ngReallyClick', [function() {
	return {
		restrict: 'A',
		link: function(scope, element, attrs) {
			element.bind('click', function() {
				var message = attrs.ngReallyMessage;
				if (message && confirm(message)) {
					scope.$apply(attrs.ngReallyClick);
				}
			});
		}
	}
0

Z tego kodu który zamieściłeś, mogę zgadywać że brakuje "/index.html" na .permitAll(). Gdyby to nie pomogło, podejrzyj w przeglądarce jakie requesty są wysyłane oraz jakie mają headery. W Chrome to jest pod F12, zakładka "Network".

Łatwiej by było pomóc gdybyś udostępnił cały projekt np. na GitHub i dał tutaj link.

0

Dzięki za szybką reakcję! Pomogła odpowiedź Shakaza. Byłem przekonany ,że mogę używać albo formLogin albo Basic, dopisałem drugi i działa. Ważna była też ich kolejność, taka jak w przykładzie z linka.
Działająca konfiguracja niżej, może się komuś przyda. Pozdrawiam

 protected void configure(HttpSecurity http) throws Exception {
	      http
	      .authorizeRequests()
	      .antMatchers("/home", "/login.html","/login", "/","/cars.html").permitAll()
	      .antMatchers("/customers.html").hasRole("ADMIN")
	        .antMatchers("/module1.js","/bootstrap.css","/style.css","/main.html","angular.js","album.js").permitAll()
	        .antMatchers(HttpMethod.GET,"/car/getCars").permitAll()
	        .anyRequest().authenticated()
	        .and()
	        .formLogin()
            .loginPage("/login.html")
            .and()
            .httpBasic().and()
	        .csrf().csrfTokenRepository(csrfTokenRepository())
	        .and()
	        .addFilterAfter(new CsrfHeaderFilter(), CsrfFilter.class);
	    }
0

Nie wiem z jakich materiałów aktualnie korzystasz, ale polecam w twoim przypadku zrobienie według tego co jest tutaj: https://github.com/spring-guides/tut-spring-security-and-angular-js/blob/master/single/README.adoc

0

Zostaw Angulara i przerzuć się na inna technologie ...

1

Jaką i dlaczego?

1 użytkowników online, w tym zalogowanych: 0, gości: 1