AngularJS and MVC Forms Authentication

lockangular

It had been a couple of month since I embark in the journey of mixing AngularJS with MVC. Before then, I have utilized AngularJS to render certain view containers here and there. However, for the first time I was after a fully functional AngularJS app, yet with MVC server side. I wanted to use the fully functional Form Authentication MVC template, and make an AngularJS application ready to go with form authentication in no time.

This task introduced two main challenges. First, we have to make the client side fully aware of the authentication and have Angular preserve state – so even as the page refreshes Angular shall response as authenticated. This is inherit function in a MVC Razor app but not necessarily in an Angular application. Secondly, client side authentication – No-Oauth - is not the most secure, we could end up with a cross site request forgery attack. So what I needed was an Anti-Forgery Token, MVC Form Authentication AngularJS app.

Thankfully, I was still able to bootsrap my application in no time thanks to two resources that provided proper guidance for what I was looking for. Credit where is due

Sean Kenny – Forms Authentication in .NET Land

Olav Nybo – Anti-Forgery Token MVC, Angular JS

Both example are Web API. However, I emulated Sean Kenny authentication principle in an MVC example app. In order to contribute to those that may be looking for a similar example

Example

The server code is pretty simple – a sign In method a sign out method and a method that will be perform only when a user is authenticated.

Authentication

Info: You could download this example application by clicking on the below "Download Source Code" button

Server Side Code

[HttpPost]

public ActionResult SignIn(UserDataModel user)

{

   HttpResponseMessage msg = new HttpResponseMessage();

    if (this.ModelState.IsValid)

    {

        var authenticated = true;

        // the user authenticated in the above method

        if (authenticated)

        {

            var response = new HttpStatusCodeResult(HttpStatusCode.Created);

            FormsAuthentication.SetAuthCookie(user.UserName, true);

            return response;

        }

        else

        {

            return new HttpStatusCodeResult(HttpStatusCode.Forbidden);

        }

    }

    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

[HttpPost]

public ActionResult SignOut(UserDataModel user)

{

    if (this.ModelState.IsValid)

    {

        var response = new HttpStatusCodeResult(HttpStatusCode.Created);

        FormsAuthentication.SignOut();

        return response;

    }

    return new HttpStatusCodeResult(HttpStatusCode.BadRequest);

}

  

  

[HttpPost]

[Authorize]

public ActionResult PerformAction(UserDataModel user)

{

    var response = "action performed for " + user.UserName;

    /// or no need to pass the user

    var username = Thread.CurrentPrincipal.Identity.Name;

    /// pefrom action with Identity of the user from Thread..

  

    return Json(response, JsonRequestBehavior.AllowGet); ;

    

}

Client Side

var app = angular.module("myapp", ["ngAnimate"]);

    //service

    app.factory('DataPost', function ($http, $q) {

  

        return {

  

            get: function (url, json) {

                var mydeffered = $q.defer();

                $http.post(url, json)

                .success(mydeffered.resolve).error(mydeffered.reject);

                return mydeffered.promise;

            }

        }

    });

    // controller

    app.controller("SignInCtrl", function ($scope, DataPost, $rootScope) {

  

        /// Privates

        var _signIn = function (user) {

            DataPost.get("/vm/SignIn", user).then(function (data) {

                console.log(data);

                user.authenticated = true;

                $rootScope.user = user;

                $scope.CurrentUser = user.UserName;

  

            }, function (e) {

                console.log("error " + e + "");

                user.authenticated = false;

                $rootScope.user = {};

            });

        }

        var _signOut = function (user) {

            DataPost.get("/vm/SignOut", user).then(function (data) {

                $rootScope.user = {};

                user.authenticated = false;

  

            });

        }

        var _doSomething = function (user) {

            DataPost.get("/vm/PerformAction", user).then(function (data) {

                console.log(data);

                $scope.responseError = false;

                $scope.response = data;

            }, function (e) {

                console.log("Unauthorized access");

                $scope.responseError = true;

            });

  

        }

  

        // $scope

        $scope.signIn = function () {

            console.log($scope.user);

            _signIn($scope.user);

        }

        $scope.signOut = function () {

            _signOut($scope.user);

            $scope.performclicked = false;

        }

        $scope.Perform = function () {

            _doSomething($scope.user);

            $scope.performclicked = true;

        }

        $scope.init = function () {

            // for display only

            $scope.performclicked = false;

            $scope.response = "";

            $scope.responseError = false;

        }

        $scope.init();

    });

HTML or View

<body ng-app="myapp" class="container">

    <div ng-init="user={authenticated:@Model.Authenticated,UserName:'@Model.UserName'}">

        <div class="row" ng-controller="SignInCtrl">

            <div class="col-sm-3 nav" >

                

                <form name="signForm" role="form" ng-show="!user.authenticated">

                    <h1>Login</h1>

                    <div class="form-group">

                        <label for="username">Username:</label>

                        <input type="text" id="username" ng-model="user.UserName" class="form-control" required />

                    </div>

                    <div class="form-group">

                        <label for="password">Password</label>

                        <input type="password" id="password" ng-model="user.Password" class="form-control" required/>

                     </div>

                    <div class="form-group">

                        <input type="submit" class="btn btn-success" ng-click="signIn()" ng-disabled="signForm.$invalid" />

                    </div>

                </form>

                <div class="row">

                    <button type="submit" class="btn btn-danger" ng-click="signOut()" ng-show="user.authenticated" >Sign Out</button>

                </div>

            </div>

            <div class="col-sm-9 main">

                <h1 ng-show="user.authenticated">Welcome {{user.UserName}}</h1>

                <h3>User Tasks</h3>

                  <div class="bs-callout bs-callout-warning">

                    

                    <p>The <code>Perform</code> action will remain visible only for the puropse to atest that the <code>$http</code>ajax call will fail when not authenticated. Otherwise, when authenticated the post method will execute at the server</p>

                  </div>

                  <div class="alert alert-danger" role="alert" ng-show="!user.authenticated">

                      <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>

                      <span class="sr-only">Error:</span>

                      Perform call Will Fail!

                    </div>  

                  <div class="alert alert-success" role="alert" ng-show="user.authenticated">

                      <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>

                      <span class="sr-only">Error:</span>

                      Perform call Will Execute!

                    </div>  

                <div class="col-sm-12 text-center">

                    <button type="submit" class="btn btn-info" ng-click="Perform()"  >Perform</button>

                </div>

                <div class="col-sm-12 text-center response animate-show-hide" ng-show="performclicked" >

                    <span ng-show="responseError"  >Unauthorized Access! </span>

                    <span ng-show="!responseError" >responded: {{response}}</span>

                </div> 

            </div>

        </div>

        

    </div>

</body>

Dev News