Angular Spring security

Odpowiedz Nowy wątek
2017-01-08 12:16

Rejestracja: 4 lata temu

Ostatnio: 3 lata temu

Lokalizacja: Gdańsk

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

Pozostało 580 znaków

2017-01-08 12:18

Rejestracja: 5 lat temu

Ostatnio: 3 miesiące temu

Zdefiniowałeś stronę logowania?
http://docs.spring.io/spring-[...]nfiguring-a-custom-login-page

Pozostało 580 znaków

2017-01-08 12:40

Rejestracja: 5 lat temu

Ostatnio: 3 lata temu

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.

Pozostało 580 znaków

2017-01-08 13:27

Rejestracja: 4 lata temu

Ostatnio: 3 lata temu

Lokalizacja: Gdańsk

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

Pozostało 580 znaków

2017-01-08 13:42

Rejestracja: 5 lat temu

Ostatnio: 3 lata temu

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-gui[...]lob/master/single/README.adoc

Właśnie z tego korzystałem i nie działało mi zgodnie z oczekiwaniami. Chyba po prostu coś namieszałem bo miałem też parę innych problemów i szukając rozwiązań namieszałem w kodzie wielokrotnie. Dopiero się uczę, więc niewiele z tego jeszcze rozumiem. Nie mniej jednak dzięki za pomoc! - PabloxxOne 2017-01-08 16:03

Pozostało 580 znaków

Złoty Kura
2017-01-10 14:58
Złoty Kura
0

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

Pozostało 580 znaków

Uczynny Kaczor
2017-01-10 15:01
Uczynny Kaczor
1

Jaką i dlaczego?

Pozostało 580 znaków

Odpowiedz

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