Saturday, 10 June 2017

Compressing web api response using GZip

In this post we are going to see how to create a compressed web api response to user,  because of compressing the result content-length will be less and it is more faster in get response. First let we create a new Web Api project.

    public class Student
    {
        public int Id { get; set; }

        public string Name { get; set; }

        public string Department { get; set; }

        public int Marks { get; set; }

    }

   public IEnumerable<Student> Get()
   {
            List<Student> studs = new List<Student>();
            studs.Add(new Student() { Id = 1, Name = "rajesh",
Department ="CSE", Marks=83});
            studs.Add(new Student() { Id = 2, Name = "suresh",
Department = "ECE", Marks=92  });
            studs.Add(new Student() { Id = 2, Name = "ramesh",
Department = "CSE", Marks = 76 });
            studs.Add(new Student() { Id = 2, Name = "ramu",
Department = "ECE", Marks = 94 });
            return studs;

    }

From the above code we can see the student list is returning, now we test this in post man rest client.









from the above , you can see the result is content-length is 219, now we will enable the GZip compression. For this we have to create actionFilterAttribute there we have to set the content-encoding as gzip. we have to add a package DotnetZip from nuget package manager


public class GZipCompression
    {
        public static byte[] GzipByte(byte[] input)
        {
            if (input == null)
                return null;
            using (var result= new MemoryStream())
            {
                using(var compress = new Ionic.Zlib.GZipStream(result,
Ionic.Zlib.CompressionMode.Compress))
                {
                    compress.Write(input, 0, input.Length);
                }
                return result.ToArray();
            }
        }
    }



public class ZipCompressionAttribute:ActionFilterAttribute
    {
        public override void OnActionExecuted(HttpActionExecutedContext                                                actionExecutedContext)
        {
            var content = actionExecutedContext.Response.Content;
            var bytes = content == null ? null : content.ReadAsByteArrayAsync().Result;
            var compressedContent = bytes == null ? new byte[0] :                                                                            GZipCompression.GzipByte(bytes);

            actionExecutedContext.Response.Content = new ByteArrayContent(compressedContent);
            actionExecutedContext.Response.Content.Headers.Remove("Content-Type");
            actionExecutedContext.Response.Content.Headers.Add("Content-encoding", "gzip");
            actionExecutedContext.Response.Content.Headers.Add("Content-Type",                                                                             "application/json");
            base.OnActionExecuted(actionExecutedContext);
        }

    }


Finally we have to add this action filter above the api method

[ZipCompression]
public IEnumerable<Student> Get()
{
            List<Student> studs = new List<Student>();
            studs.Add(new Student() { Id = 1, Name = "rajesh",
Department ="CSE", Marks=83});
            studs.Add(new Student() { Id = 2, Name = "suresh",
Department = "ECE", Marks=92  });
            studs.Add(new Student() { Id = 2, Name = "ramesh",
Department = "CSE", Marks = 76 });
            studs.Add(new Student() { Id = 2, Name = "ramu",
Department = "ECE", Marks = 94 });
            return studs;

}


Now we see the response in post man client, content-length will be reduced.











From this post you can learn how to create a compressing web api response using Gzip.

Sunday, 30 April 2017

Add authentication token in every http request call in angular js applications

In this post we are going to see how to pass the authentication token in every http request call in angular js application

authService:
*************
 mvcapp.service('authService', ['$localStorage', '$rootScope',function ($localStorage,$rootScope) {

    this.getAuthCode = function () {
        return $localStorage.authuser;
    }

    this.setAuthCode = function (authdata) {
        $localStorage.authuser = authdata;
    }

    this.removeAuthCode = function () {
        delete $localStorage.authuser;       
        var loggeduser = { Status: '', Username: '', Authcode: '' };
        $rootScope.$broadcast('loguser', loggeduser);
    }

    this.isLoggedIn = function () {
        return $localStorage.authuser != null && $localStorage.authuser.Authcode != null;
    }


}]);




Factory:
*********
mvcapp.factory('httpRequest', ['$q', 'authService', function ($q, authService) {

    var _interceptors = {
        request: function (config) {
            if (angular.isObject(config)) {
                config.delay = new Date().getTime();
                var loggedin = authService.getAuthCode();

                if (loggedin!=undefined && loggedin.Authcode != null)
                    config.headers["Authorization"] = "Bearer " + loggedin.Authcode;

            }
            return config;
        },
        response: function (response) {
            if (angular.isObject(response.config)) {
                response.config.delay = new Date().getTime() - response.config.delay;
            }
            return response;
        },
        requestError: function (config) {
            if (angular.isObject(config)) {
                config.delay = new Date().getTime();
            }
            return $q.reject(config);
        },
        responseError: function (response) {
            if (angular.isObject(response.config)) {
                response.config.delay = new Date().getTime() - response.config.delay;
            }
            return $q.reject(response);
        }
    };

    return _interceptors;

}]);



mvcapp.config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('httpRequest');
}]);



From this post you can learn how to pass the authentication token in every http request call.

How to write a login authentication using stateprovider and authentication for each state in angular js application

In this post we are going to see how to create the login authentication in angular js application in state provider.

First we have to create the states, Then we have to create the variable name authenticate to the states which ever need the authentication

We are creating a hook for $stateChangeStart event , so when ever we change state this will hooked, from there we are checking whether authenticate is required for this state, if it is required then we are invoking the authService for checking the authentication, if failed then we change the state or transition the state to login state.

var mvcapp = angular.module('mvcapp', ['ui.router', 'ngCookies', 'ngStorage',]);


configure states:

******************

mvcapp.config(['$stateProvider', '$urlRouterProvider', '$localStorageProvider',            
               '$locationProvider',
function ($stateProvider, $urlRouterProvider, $localStorageProvider, $locationProvider) {


    $stateProvider.state('home',
        {
            name: 'home',
            url: '/home',
            templateUrl: 'app/templates/home.html',
            controller: 'homeController'
        })
        .state('about',
        {
            name: 'about',
            url: '/about',
            templateUrl: 'app/templates/about.html',
            controller: 'aboutController'
        })
        .state('login',
        {
            name: 'login',
            url: '/login',
            templateUrl: 'app/templates/login.html',
            controller: 'loginController',
            resolve: { signIn: AlreadySignin }
        })
        .state('register',
        {
            name: 'register',
            url: '/register',
            templateUrl: 'app/templates/register.html',
            controller: 'registerController',
            resolve: { signIn: AlreadySignin }
        })
        .state('profile',
        {
            name: 'profile',
            url: '/profile',
            templateUrl: 'app/templates/profile.html',
            controller: 'profileController',
            authenticate: true
        })
        .state('history',
        {
            name: 'history',
            url: '/history',
            templateUrl: 'app/templates/history.html',
            controller: 'historyController',
            authenticate: true
        })       
        .state("default",
        {
            name: 'default',
            url: '/',
            templateUrl: 'app/templates/home.html',
            controller: 'homeController'
        });
        
    $urlRouterProvider.otherwise('/'); 
    $localStorageProvider.setKeyPrefix('mvcapp');
    $locationProvider.html5Mode(false);

}]);



handling exception in global:

********************************
mvcapp.config(['$provide',function ($provide) {
    $provide.decorator('$exceptionHandler', ['$delegate', '$log'
     function ($delegate, $log) {
        return function (exception, cause) {
            $delegate(exception, cause);
            $log.info(exception.message + " (because of " + cause + " )");
        };
    }])
}]);



check for login, if logged in redirect to home:
***************************************************
AlreadySignin.$inject = ['$rootScope','$state', '$location', 'authService'];

function AlreadySignin($rootScope, $state,$location, authService) {
    if (authService.isLoggedIn()) {      
        return $location.path("/home");      
    }

}



Then we have to write logic in statechangestart event in run based on authenticate variable, now we will see what is the authservice, and what logic it resides


mvcapp.run(['$rootScope', '$location', '$http', 'authService', '$state', '$timeout',
  function ($rootScope, $location, $http, authService, $state, $timeout) {

    if (authService.isLoggedIn())
    {
        $http.defaults.headers.common['Authorization'] = 'Bearer ' +
authService.getAuthCode().Authcode;
    }


    function safeApply(scope, fn) {
        (scope.$$phase || scope.$root.$$phase) ? fn() : scope.$apply(fn);
    }


    $rootScope.$on('$stateChangeStart', function (event, toState, toParams,
fromState, fromParams) {

        if (toState.authenticate && !authService.isLoggedIn()) {
            // User isn’t authenticated
            $state.transitionTo("login");           
            $rootScope.redirect = toState.name;
            event.preventDefault();
        }

        if (toState.authenticate && authService.isLoggedIn()) {
            var role = authService.getAuthCode().Role;
           
        }

        safeApply($rootScope, function () {
            $timeout(function () {
                $rootScope.$broadcast('updatelogin');
            })          
        });

       

    });


}]);





authService:
*************


mvcapp.service('authService', ['$localStorage', '$rootScope',

function ($localStorage,$rootScope) {

    this.getAuthCode = function () {
        return $localStorage.authuser;
    }

    this.setAuthCode = function (authdata) {
        $localStorage.authuser = authdata;
    }

    this.removeAuthCode = function () {
        delete $localStorage.authuser;       
        var loggeduser = { Status: '', Username: '', Authcode: '' };
        $rootScope.$broadcast('loguser', loggeduser);
    }

    this.isLoggedIn = function () {
        return $localStorage.authuser != null && $localStorage.authuser.Authcode != null;
    }



}]);


Output:
*************





















From this post you can learn how to add the authentication for each state in the angular js applications