Token Based Authentication Using ASP.NET Web API in AngularJS

Introduction

In my previous article, we saw an overview of Token-based authentication using ASP.net web API and OWIN. In this post, I will explain how to use Token based authentication in AngularJS.

In this post, I will build sample Single Page Application (SPA) using AngularJS and this application will do the following:

Allow user to login using "Admin" and "Jignesh" user ID
Token keep alive 30 minutes
Authenticated user will access certain views.

Prerequisites

Before reading this article, you must have some basic knowledge about AngularJS and Token-based authentication using OWIN.

The following are the steps to create AngularJS Token Authentication using ASP.NET Web API 2 and OWIN

Step 1

Include 3rd party libraries

To get started, we required to include the following libraries:

AngularJS

We can download the latest AngularJS version using the NuGet package manager.

PM> Install-Package angularjs

Preceding command includes all available AngularJS libraries including minified version. So delete script files that are not required.

UI Bootstrap

We can download the latest Bootstrap version using the NuGet package manager.

PM> Install-Package bootstrap -Version 3.3.5

Step 2

Organize Project Structure

We can use any IDE to build the web application because this web app totally decouples with backend API and it develops using HTML, AngularJS, and CSS. Here I am using Visual Studio 2013. I have created a project using the empty project template.

In this project structure, I have created a folder named "Modules", this contains all AngularJS application files and resources files and the "Asset" folder contains the asset of this project i.e. AngularJS libraries file, CSS files, etc.

Step 3

Boot Strapping Angular Application

Boot Strapping Angular Application means creating angular applications and modules (modules are nothing but a collection of services, directives, filters which are used by the application). Each module has a configuration block and applied to the application during this process. To do this, I have added a file called "app.js" in the root folder. This file also contains the route and interceptor.

Interceptor is a regular service and it allows us to capture every XHR request and we can also manipulate it before sending it to a server endpoint (web API). It also captures all response and response errors.

var serviceBase = 'http://localhost:49707/';
var app = angular.module('AngularApp', ['ngRoute', 'LocalStorageModule']);
app.config(function ($routeProvider) {
$routeProvider.when("/home", {
controller: "homeController",
templateUrl: "/Modules/views/home.html"
});
$routeProvider.when("/login", {
controller: "loginController",
templateUrl: "/Modules/views/login.html"
});
$routeProvider.when("/next", {
controller: "nextController",
templateUrl: "/Modules/views/Next.html"
});
$routeProvider.when("/myInfo", {
templateUrl: "/Modules/views/Info.html"
});
$routeProvider.otherwise({ redirectTo: "/home" });
})
.config(['$httpProvider', function ($httpProvider) {
$httpProvider.interceptors.push(function ($q, $rootScope, $window, $location) {
return {
request: function (config) {
return config;
},
requestError: function (rejection) {
return $q.reject(rejection);
},
response: function (response) {
if (response.status == "401") {
$location.path('/login');
}
//the same response/modified/or a new one need to be returned.
return response;
},
responseError: function (rejection) {
if (rejection.status == "401") {
$location.path('/login');
}
return $q.reject(rejection);
}
};
});
}]);

Here, I have defined four views with their corresponding controllers

Home: It is home page. It can be also access by the anonymous users.
Login: It shows the login form. It can be also access by the anonymous users.
next: It shows after user has been logged-in.
myInfo: It shows my details.

Step 4

Add Index.html (Shell Page)

Single page application contains the Shell page which is a container for the application. It will contain the navigation menus which contains all the available links for the application. It also contains a reference of all the 3rd party JavaScript and CSS files which are required by the application.

<!DOCTYPE html>
<html data-ng-app="AngularApp">
<head>
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible" />
<title>AngularJS - OWIN Authentication</title>
<link href="Asset/Content/bootstrap.min.css" rel="stylesheet" />
<link href="Asset/Content/ProjectStyle.css" rel="stylesheet" />
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" data-ng-controller="indexController">
<div class="container">
<div class="collapse navbar-collapse" data-collapse="!navbarExpanded">
<ul class="nav navbar-nav navbar-right">
<li data-ng-hide="!authentication.IsAuthenticated"><a href="#">Welcome, {{authentication.userName}}</a></li>
<li data-ng-hide="!authentication.IsAuthenticated"><a href="#/myInfo">My Info</a></li>
<li data-ng-hide="!authentication.IsAuthenticated"><a href="" data-ng-click="logOut()">Logout</a></li>
<li data-ng-hide="authentication.IsAuthenticated"> <a href="#/login">Login</a></li>
</ul>
</div>
</div>
</div>
<div class="jumbotron">
<div class="container">
<div class="page-header text-center">
<h3>AngularJS Owin Authentication</h3>
</div>
</div>
</div>
<div class="container">
<div data-ng-view="">
</div>
</div>
<hr />
<div id="footer">
<div class="container">
<div class="row">
AngularJS - OAuth Bearer Token Implementation Example
</div>
</div>
</div>
<script src="Asset/Scripts/angular.js"></script>
<script src="Asset/Scripts/angular-route.js"></script>
<script src="Asset/Scripts/angular-local-storage.min.js"></script>
<script src="Modules/app.js"></script>
<script src="Modules/Services/loginService.js"></script>
<script src="Modules/Services/AuthenticationService.js"></script>
<script src="Modules/Services/AuthData.js"></script>
<script src="Modules/Controllers/indexController.js"></script>
<script src="Modules/Controllers/homeController.js"></script>
<script src="Modules/Controllers/loginController.js"></script>
<script src="Modules/Controllers/nextController.js"></script>
</body>
</html>

Indexcontroller.js

Now we need to add an index controller under the "Controller" folder which will respond to change the layout of for index page i.e. when a user is not logged in, it displays only the "login" menu, else displays welcome text and logout menu.

(function () {
'use strict';
app.controller('indexController', ['$scope', '$location', 'authData','LoginService', function ($scope, $location, authData, loginService) {
$scope.logOut = function () {
loginService.logOut();
$location.path('/home');
}
$scope.authentication = authData.authenticationData;
}]);
})();

Step 5:

Add AngularJS Authentication Data (Factory)

This AngularJS service will be responsible for storing the authentication values. It contains the object called "authentication", which will store two values (IsAuthenticated and username). This object will be used to change the layout of the Index page (mainly menu option).

'use strict';
app.factory('authData', [ function () {
var authDataFactory = {};
var _authentication = {
IsAuthenticated: false,
userName: ""
};
authDataFactory.authenticationData = _authentication;
return authDataFactory;
}]);

Step 6:

Add AuthenticationService

This AngularJS service will be responsible for get and set token data into client windows session, remove a token from the client windows session, and set HTTP header. We have to configure the HTTP request header for the endpoint: content type as “application/x-www-form-urlencoded” and sent the data as a string, not JSON object, and also need to set Bearer token.

(function () {
'use strict';
app.service('AuthenticationService', ['$http', '$q', '$window',
function ($http, $q, $window) {
var tokenInfo;
this.setTokenInfo = function (data) {
tokenInfo = data;
$window.sessionStorage["TokenInfo"] = JSON.stringify(tokenInfo);
}
this.getTokenInfo = function () {
return tokenInfo;
}
this.removeToken = function () {
tokenInfo = null;
$window.sessionStorage["TokenInfo"] = null;
}
this.init = function () {
if ($window.sessionStorage["TokenInfo"]) {
tokenInfo = JSON.parse($window.sessionStorage["TokenInfo"]);
}
}
this.setHeader = function (http) {
delete http.defaults.headers.common['X-Requested-With'];
if ((tokenInfo != undefined) && (tokenInfo.accessToken != undefined) && (tokenInfo.accessToken != null) && (tokenInfo.accessToken != "")) {
http.defaults.headers.common['Authorization'] = 'Bearer ' + tokenInfo.accessToken;
http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';
}
}
this.validateRequest = function () {
var url = serviceBase + 'api/home';
var deferred = $q.defer();
$http.get(url).then(function () {
deferred.resolve(null);
}, function (error) {
deferred.reject(error);
});
return deferred.promise;
}
this.init();
}
]);
})();

Step 7

Add Login service, controller and its view

LoginService.js

Login service is added under the folder “Services”. It contains the method for login and logout. The function "login" is responsible to send an HTTP request to the endpoint with user credential and the endpoint will validate the user credential and generate a token. This method also set an authorized token to the browser window session. The function "logout" is responsible to clear browser window session and redirect to the home page.

function () {
'use strict';
app.service('LoginService', ['$http', '$q', 'AuthenticationService', 'authData',
function ($http, $q, authenticationService, authData) {
var userInfo;
var loginServiceURL = serviceBase + 'token';
var deviceInfo = [];
var deferred;
this.login = function (userName, password) {
deferred = $q.defer();
var data = "grant_type=password&username=" + userName + "&password=" + password;
$http.post(loginServiceURL, data, {
headers:
{ 'Content-Type': 'application/x-www-form-urlencoded' }
}).success(function (response) {
var o = response;
userInfo = {
accessToken: response.access_token,
userName: response.userName
};
authenticationService.setTokenInfo(userInfo);
authData.authenticationData.IsAuthenticated = true;
authData.authenticationData.userName = response.userName;
deferred.resolve(null);
})
.error(function (err, status) {
authData.authenticationData.IsAuthenticated = false;
authData.authenticationData.userName = "";
deferred.resolve(err);
});
return deferred.promise;
}
this.logOut = function () {
authenticationService.removeToken();
authData.authenticationData.IsAuthenticated = false;
authData.authenticationData.userName = "";
}
}
]);
})();

loginController.js

Now I have added logincontroller.js under the folder "Controllers". Generally, the controller is simple and will contain client-side business logic. It is a bridge between service and HTML view.

(function () {
'use strict';
app.controller('loginController', ['$scope', 'LoginService', '$location', function ($scope, loginService, $location) {
$scope.loginData = {
userName: "",
password: ""
};
$scope.login = function () {
loginService.login($scope.loginData.userName, $scope.loginData.password).then(function (response) {
if (response != null && response.error != undefined) {
$scope.message = response.error_description;
}
else {
$location.path('/next');
}
});
}
}]);
})();

Logincontroller responsible to redirect authenticated users only to the "next" view else system will redirect to login page. To do this we need to write some code in controller side and catch the "401" response code at interceptor. I have defined interceptor in app.js file. AuthenticationService has method called "validateRequest", it help us to validate whether user is logged-in or not by sending request to server and server will sent "401" status code if it is unauthorized. Here I have added one example code in "nextController".

nextController.js

(function ()
{
'use strict';
app.controller('nextController', ['$scope', 'AuthenticationService', function ($scope, authenticationService) {
authenticationService.validateRequest();
}]);
})();

Login.html

View for the log-in is very simple. A new file named “login.html” created under the view folder.

<form role="form">
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-4">
<h2 class="form-login-heading col-md-12">Login</h2>
<div class="col-md-12 PaddingTop">
<input type="text" class="form-control" placeholder="Username" data-ng-model="loginData.userName" required autofocus>
</div>
<div class="col-md-12 PaddingTop">
<input type="password" class="form-control" placeholder="Password" data-ng-model="loginData.password" required>
</div>
<div class="col-md-12 PaddingTop">
<button class="btn btn-md btn-info btn-block" type="submit" data-ng-click="login()">Login</button>
</div>
<div data-ng-hide="message == ''">
{{message}}
</div>
</div>
<div class="col-md-2">
</div>
</div>
</form>

Step 8

Add the Home controller and its view

Lastly, I have added a home controller and its view. It has a very simple view and an empty controller which is used to display the text "Home page".

HomeController.js

(function () {
'use strict';
app.controller('homeController', ['$scope', function ($scope) {
}]);
})();

Summary

Now we have a SPA that authenticates users by using a token-based approach. Here redirection for anonymous users to the login page is done by client-side code. So it is very important to secure all server-side (web API) methods. This is not done in this article.

Note

I have tried to include all the important HTML and script code within this article. The attached code contains the whole project, please take it as reference.

27 Comments

Join the conversation! Your thoughts help the community grow.

Moises Olmo8y ago
Would you can tell me how can i implement CRUD operations with this
- Jignesh Trivedi8y ago
  Same as the View functionality, you can implement insert / update/delete functionality. All the api method must decorated with Authorize attribute and valid token must pass to each request header. I hope this will make sense. Please let me know if you required any further help.
Tridip Bhattacharjee8y ago
Please tell me what the below line will be doing.......config(['$httpProvider', function ($httpProvider) { $httpProvider.interceptors.push(function ($q, $rootScope, $window, $location) { return { request: function (config) { return config; }, requestError: function (rejection) { return $q.reject(rejection); }, response: function (response) { if (response.status == "401") { $location.path('/login'); } //the same response/modified/or a new one need to be returned. return response; }, responseError: function (rejection) { if (rejection.status == "401") { $location.path('/login'); } return $q.reject(rejection); } }; });
Tridip Bhattacharjee8y ago
Nice article but like title of article there is no web api code in this post.
Rupesh prasad10y ago
Can you tell me how do i get this token based auth work with ASP.NET web forms. I mean if user is not logged in then redirect to login page and all, most importantly how do i check if user is logged in or not?? For federation authentication we simple check page.isuerAuthenticated which gets set by IuserPrincipal. For this how is it gonna work?
kalu singh rao10y ago
Nice...
Debasis Saha10y ago
Nice sharing..
Claude Joasil10y ago
The headers were never set for the request. in this.validateRequest Make sure you add this.setHeader($http); before $http.get(url).then(function () {.... So between line 37 and 38 in authenticationService.js
jasmin patel10y ago
another problem is after login try to refresh page welcome message ,my info,logout link hide
- Claude Joasil10y ago
  To fix that, you need to save isAuthenticated and Username in the storageSession the same way you do for TokenInfo and use the values in AuthData: 'use strict';app.factory('authData', ['$window', function ($window) { var authDataFactory = {}; var _authentication = { IsAuthenticated: (typeof $window.sessionStorage["IsAuthenticated"] !== "undefined" && $window.sessionStorage["IsAuthenticated"]), userName: typeof $window.sessionStorage["userName"] !== "undefined" ? $window.sessionStorage["userName"] : "" }; authDataFactory.authenticationData = _authentication; return authDataFactory; }]);
jasmin patel10y ago
can u solve that problem and upload sample project again?
- Claude Joasil10y ago
  The headers were never set for the request. in this.validateRequest Make sure you add this.setHeader($http); before $http.get(url).then(function () {.... So between line 37 and 38 in authenticationService.js
jasmin patel10y ago
Nice example but after login page redirect to next page and then validate request function called this.validateRequest = function () { debugger; var url = serviceBase + 'api/home'; var deferred = $q.defer(); $http.get(url).then(function () { deferred.resolve(null); }, function (error) { deferred.reject(error); }); return deferred.promise; } and got this error when get request to api/home --> GET http://localhost:49707/api/home 401 (Unauthorized)
- Claude Joasil10y ago
  The headers were never set for the request. in this.validateRequest Make sure you add this.setHeader($http); before $http.get(url).then(function () {.... So between line 37 and 38 in authenticationService.js
Sabyasachi Mishra10y ago
Good one
Marco Tugnoli11y ago
Nice work, but ... 1) after logged, "next" page is not available 2) on logging if I debug this error occour : "GET http://localhost:49707/api/home 401 (Unauthorized)", but i'm authorized !! 3) after logout have to go to login page 4) will be nice if showing a "wait icon" on loading
- Jignesh Trivedi10y ago
  Thank Macro for your comment. I will look into issue list-down over her.
Ajeet Mishra11y ago
nice
Saineshwar Bageri11y ago
Nice one
Sibeesh Venu11y ago
Nice Share :)
Pankaj Kumar Choudhary11y ago
Great Article Sir..........
Santhakumar Munuswamy11y ago
Good work
Ankit Bansal11y ago
nice...thanks for sharing
Harshad Pansuriya11y ago
Nice Share
Shridhar Sharma11y ago
nice share :)
Rajeesh Menoth11y ago
Nice One...
Nilesh Jadav11y ago
Great work sir !!