How to make brower to set Oauth2 Bearer access token in a header?

114 views Asked by At

I need help. My Spring Oauth2 security configuration works only for RestAPIs, but not for browser resources loading events.

I have two type of resources on server: open and secure. Everything in open folder does not require authentication, every in secure folder requires it.

----open (home.html, HomeController.js, ...) ----secure(secure.html, secure.js, ...)

in home.html and its controller I have login password form and I call my httpService that authenticates and saves token in a cookie:

(function(angular) {
    var HomeController = function($scope, $rootScope, AppConstants, SharingService, httpService, $httpParamSerializer, $http, $state, DependencyLoaderService) {

        $scope.data = {username:'', password:''};

        $scope.doAdminLogin = function() {

            httpService.login($scope.data, function(response){
                if (response.data && response.data.error)
                    alert(response.data.error_description);
            });
        }

        $scope.securedPage = function() {
            $state.go('secured');
        }

        $scope.securedApi = function() {

            var url = '/api/superadmin/getAdminProfileList';
            httpService.get(url, null, false, function(response){
                $scope.securedApiResponse = JSON.stringify(response);
            }, function(response){
                $scope.securedApiResponse = JSON.stringify(response);
            });
        }

    };
    HomeController.$inject = [ '$scope', '$rootScope', 'AppConstants', 'SharingService', 'httpService', '$httpParamSerializer', '$http', '$state', 'DependencyLoaderService'];
    angular.module('todoapp.controllers').controller('HomeController', HomeController);
}(angular));

httpService

/**=========================================================
 * Module: Service .js Class for handling all http reqeusts.
 =========================================================*/

(function(angular) {
    angular
        .module('todoapp')
        .service('httpService', ['$http','$state', '$httpParamSerializer', 'AppConstants', '$cookies', function($http, $state, $httpParamSerializer, AppConstants, $cookies) {      



            /**
             * credentials (JSON object) : contains username and password
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.login = function(credentials, errorCallback) {
                credentials.grant_type = AppConstants.OAUTH2_GRANT_TYPE;

                var request =  $http({
                    method : 'POST',
                    url    :  AppConstants.BASE_URL + AppConstants.URL_OAUTH_TOKEN,
                    headers: {
                        "Authorization": AppConstants.OAUTH2_AUTHORIZATION,
                        "Content-type": "application/x-www-form-urlencoded"
                    },
                    data: $httpParamSerializer(credentials)
                });

                return( request.then(function(data){
                    $http.defaults.headers.common.Authorization = 'Bearer ' + data.data.access_token;
                    var cookieExpiresIn = new Date();
                    cookieExpiresIn.setSeconds(cookieExpiresIn.getSeconds() + data.data.expires_in);
                    $cookies.put('access_token', data.data.access_token, {expires : cookieExpiresIn });

                    console.log('sucessfully authenticated');
                }, errorCallback) );
            }

            /**
             * url (string) : the url of the rest-api call.
             * data (json) : json-payload of the data sent to the post function
             * isCache (boolean) : boolean value to specifiy whether to cache the resoure on the browser.
             * successCallback (callback function) : callback function to handle rest-api call success status.
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.post=function(url, data, isCache, successCallback, errorCallback) {
                var request =  $http({
                    method: 'POST',
                    url: url,
                    data: data,
                    cache: isCache
                });

                return( request.then(successCallback, errorCallback) );
            }

            /**
             * url (string) : the url of the rest-api call.
             * params (json) : json-payload of the params sent to the post function
             * isCache (boolean) : boolean value to specifiy whether to cache the resoure on the browser.
             * successCallback (callback function) : callback function to handle rest-api call success status.
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.get = function(url, params, isCache, successCallback, errorCallback) {
                var request = $http({
                    url : url,
                    method: 'GET',
                    params: params,
                    cache: isCache
                });
                return ( request.then(successCallback, errorCallback) );
            }

            /**
             * url (string) : the url of the rest-api call.
             * params (json) : json-payload of the params sent to the post function
             * isCache (boolean) : boolean value to specifiy whether to cache the resoure on the browser.
             * successCallback (callback function) : callback function to handle rest-api call success status.
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.put = function(url, params, isCache, successCallback, errorCallback) {
                $http({
                    url : url,
                    method: 'PUT',
                    params: params,
                    cache: isCache
                }).success(successCallback).
                   error(errorCallback);
            }

            /**
             * url (string) : the url of the rest-api call.
             * params (json) : json-payload of the params sent to the post function
             * isCache (boolean) : boolean value to specifiy whether to cache the resoure on the browser.
             * successCallback (callback function) : callback function to handle rest-api call success status.
             * errorCallback (callback function) : callback function to handle rest-api call failed status.
             */
            this.del = function(url, params, isCache, successCallback, errorCallback) {
                var request = $http({
                    url : url,
                    method: 'DELETE',
                    params: params,
                    cache: isCache
                });

                return ( request.then(successCallback, errorCallback) );
            }

            function handleError(response) {
                console.log(response);
                if ( ! angular.isObject( response.data ) || ! response.data.message) {
                    $.smallBox({
                        title : 'An unknown error occurred. <p>URL: <a href='+response.config.url+' target=_blank style="color:white;margin-left:10px;">' + response.config.url + '</a><p>',
                        content : '',
                        color : '#A65858',
                        iconSmall : 'fa fa-times',
                        timeout : 5000
                    });
                    return( $q.reject( 'An unknown error occurred.' ) );
                }

                return( $q.reject( response.data.message ) );
            }
            function handleSuccess(response) {
                return( response.data );
            }
        }])
}(angular));

So httpService can intercept and add from cookie a header ('Authorization: Bearer token') to get, post, etc API calls only. How to I make browser to do same thing on all navigation or other resource loading events like CSS, JS, HTML files load?

Or how can I change default Spring Oauth2 configuration to not require this header, but take token from cookie?

0

There are 0 answers