AngularJS Token Authentication using ASP.NET Web API 2, Owin, and Identity

This is the second part of AngularJS Token Authentication using  ASP.NET Web API 2 and Owin middleware, you can find the first part using the link below:


You can check the demo application on (http://ngAuthenticationWeb.azurewebsites.net), play with the back-end API for learning purposes (http://ngauthenticationapi.azurewebsites.net), and check the source code on Github.

AngularJS Authentication

In this post we’ll build sample SPA using AngularJS, this application will allow the users to do the following:

  • Register in our system by providing username and password.
  • Secure certain views from viewing by authenticated users (Anonymous users).
  • Allow registered users to log-in and keep them logged in for 24 hours 30 minutes because we are using refresh tokens or until they log-out from the system, this should be done using tokens.

If you are new to AngularJS, you can check my other tutorial which provides step by step instructions on how to build SPA using AngularJS, it is important to understand the fundamentals aspects of AngularJS before start working with it, in this tutorial I’ll assume that reader have basic understanding of how AngularJS works.

Step 1: Download Third Party Libraries

To get started we need to download all libraries needed in our application:

  • AngularJS: We’ll serve AngularJS from from CDN, the version is 1.2.16
  • Loading Bar: We’ll use the loading bar as UI indication for every XHR request the application will made, to get this plugin we need to download it from here.
  • UI Bootstrap theme: to style our application, we need to download a free bootstrap ready made theme from http://bootswatch.com/ I’ve used a theme named “Yeti”.

Step 2: Organize Project Structure

You can use your favorite IDE to build the web application, the app is completely decoupled from the back-end API, there is no dependency on any server side technology here, in my case I’m using Visual Studio 2013 so add new project named “AngularJSAuthentication.Web” to the solution we created in the previous post, the template for this project is “Empty” without any core dependencies checked.

After you add the project you can organize your project structure as the image below, I prefer to contain all the AngularJS application and resources files we’ll create in folder named “app”.

AngularJS Project Structure

Step 3: Add the Shell Page (index.html)

Now we’ll add the “Single Page” which is a container for our application, it will contain the navigation menu and AngularJS directive for rendering different application views “pages”. After you add the “index.html” page to project root we need to reference the 3rd party JavaScript and CSS files needed as the below:

Step 4: “Booting up” our Application and Configure Routes

We’ll add file named “app.js” in the root of folder “app”, this file is responsible to create modules in applications, in our case we’ll have a single module called “AngularAuthApp”, we can consider the module as a collection of services, directives, filters which is used in the application. Each module has configuration block where it gets applied to the application during the bootstrap process.

As well we need to define and map the views with the controllers so open “app.js” file and paste the code below:

So far we’ve defined and mapped 4 views to their corresponding controllers as the below:

Orders View

Step 5: Add AngularJS Authentication Service (Factory)

This AngularJS service will be responsible for signing up new users, log-in/log-out registered users, and store the generated token in client local storage so this token can be sent with each request to access secure resources on the back-end API, the code for AuthService will be as the below:

Now by looking on the method “_saveRegistration” you will notice that we are issuing HTTP Post to the end point “http://ngauthenticationapi.azurewebsites.net/api/account/register” defined in the previous post, this method returns a promise which will be resolved in the controller.

The function “_login” is responsible to send HTTP Post request to the endpoint “http://ngauthenticationapi.azurewebsites.net/token”, this endpoint will validate the credentials passed and if they are valid it will return an “access_token”. We have to store this token into persistence medium on the client so for any subsequent requests for secured resources we’ve to read this token value and send it in the “Authorization” header with the HTTP request.

Notice that we have configured the POST request for this endpoint to use “application/x-www-form-urlencoded” as its Content-Type and sent the data as string not JSON object.

The best way to store this token is to use AngularJS module named “angular-local-storage” which gives access to the browsers local storage with cookie fallback if you are using old browser, so I will depend on this module to store the token and the logged in username in key named “authorizationData”. We will use this key in different places in our app to read the token value from it.

As well we’ll add object named “authentication” which will store two values (isAuth, and username). This object will be used to change the layout for our index page.

Step 6: Add the Signup Controller and its View

The view for the signup is simple so open file named “signup.html” and add it under folders “views” open the file and paste the HTML below:

Now we need to add controller named “signupController.js” under folder “controllers”, this controller is simple and will contain the business logic needed to register new users and call the “saveRegistration” method we’ve created in “authService” service, so open the file and paste the code below:

Step 6: Add the log-in Controller and its View

The view for the log-in is simple so open file named “login.html” and add it under folders “views” open the file and paste the HTML below:

Now we need to add controller named “loginController.js” under folder “controllers”, this controller will be responsible to redirect authenticated users only to the orders view, if you tried to request the orders view as anonymous user, you will be redirected to log-in view. We’ll see in the next steps how we’ll implement the redirection for anonymous users to the log-in view once users request a secure view.

Now open the “loginController.js” file and paste the code below:

Step 7: Add AngularJS Orders Service (Factory)

This service will be responsible to issue HTTP GET request to the end point “http://ngauthenticationapi.azurewebsites.net/api/orders” we’ve defined in the previous post, if you recall we added “Authorize” attribute to indicate that this method is secured and should be called by authenticated users, if you try to call the end point directly you will receive HTTP status code 401 Unauthorized.

So add new file named “ordersService.js” under folder “services” and paste the code below:

By looking at the code above you’ll notice that we are not setting the “Authorization” header and passing the bearer token we stored in the local storage earlier in this service, so we’ll receive 401 response always! Also we are not checking if the response is rejected with status code 401 so we redirect the user to the log-in page.

There is nothing prevent us from reading the stored token from the local storage and checking if the response is rejected inside this service, but what if we have another services that needs to pass the bearer token along with each request? We’ll end up replicating this code for each service.

To solve this issue we need to find a centralized place so we add this code once so all other services interested in sending bearer token can benefit from it, to do so we need to use “AngualrJS Interceptor“.

Step 8: Add AngularJS Interceptor (Factory)

Interceptor is regular service (factory) which allow us to capture every XHR request and manipulate it before sending it to the back-end API or after receiving the response from the API, in our case we are interested to capture each request before sending it so we can set the bearer token, as well we are interested in checking if the response from back-end API contains errors which means we need to check the error code returned so if its 401 then we redirect the user to the log-in page.

To do so add new file named “authInterceptorService.js” under “services” folder and paste the code below:

By looking at the code above, the method “_request” will be fired before $http sends the request to the back-end API, so this is the right place to read the token from local storage and set it into “Authorization” header with each request. Note that I’m checking if the local storage object is nothing so in this case this means the user is anonymous and there is no need to set the token with each XHR request.

Now the method “_responseError” will be hit after the we receive a response from the Back-end API and only if there is failure status returned. So we need to check the status code, in case it was 401 we’ll redirect the user to the log-in page where he’ll be able to authenticate again.

Now we need to push this interceptor to the interceptors array, so open file “app.js” and add the below code snippet:

By doing this there is no need to setup extra code for setting up tokens or checking the status code, any AngularJS service executes XHR requests will use this interceptor. Note: this will work if you are using AngularJS service $http or $resource.

Step 9: Add the Index Controller

Now we’ll add the Index controller which will be responsible to change the layout for home page i.e (Display Welcome {Logged In Username}, Show My Orders Tab), as well we’ll add log-out functionality on it as the image below.

Index Bar

Taking in consideration that there is no straight way to log-out the user when we use token based approach, the work around we can do here is to remove the local storage key “authorizationData” and set some variables to their initial state.

So add a file named “indexController.js”  under folder “controllers” and paste the code below:

Step 10: Add the Home Controller and its View

This is last controller and view we’ll add to complete the app, it is simple view and empty controller which is used to display two boxes for log-in and signup as the image below:

Home View

So add new file named “homeController.js” under the “controllers” folder and paste the code below:

As well add new file named “home.html” under “views” folder and paste the code below:

By now we should have SPA which uses the token based approach to authenticate users.

One side note before closing: The redirection for anonymous users to log-in page is done on client side code; so any malicious user can tamper with this. It is very important to secure all back-end APIs as we implemented on this tutorial and not to depend on client side code only.

That’s it for now! Hopefully this two posts will be beneficial for folks looking to use token based authentication along with ASP.NET Web API 2 and Owin middleware.

I would like to hear your feedback and comments if there is a better way to implement this especially redirection users to log-in page when the are anonymous.

You can check the demo application on (http://ngAuthenticationWeb.azurewebsites.net), play with the back-end API for learning purposes (http://ngauthenticationapi.azurewebsites.net), and check the source code on Github.

Follow me on Twitter @tjoudeh

Comments

  1. Ajay Sharma says

    Hi,
    I am Testing AngularJSAuthentication which contain all 3 projects,But not able to test locally.What I did to test locally
    1. In All file location Changed serviceBase as my localhos “http://localhost:32150/”
    2. I hardcoded the username as
    var data = “grant_type=password&username=” + “Test123” + “&password=” + “Test123”;
    this data is passing when login
    Facing Issue:In AuthService
    At Block
    $http.post(serviceBase + ‘token’, data, { headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’ } }).success(function (response) {

    if (loginData.useRefreshTokens) {
    localStorageService.set(‘authorizationData’, { token: response.access_token, userName: loginData.userName, refreshToken: response.refresh_token, useRefreshTokens: true });
    }
    else {
    localStorageService.set(‘authorizationData’, { token: response.access_token, userName: loginData.userName, refreshToken: “”, useRefreshTokens: false });
    }
    _authentication.isAuth = true;
    _authentication.userName = loginData.userName;
    _authentication.useRefreshTokens = loginData.useRefreshTokens;

    deferred.resolve(response);

    }).error(function (err, status) {
    _logOut();
    deferred.reject(err);
    });

    return deferred.promise;ess(function (response) {
    It is not going inside the block.

    I debugged in FF:
    Data is coming as: “grant_type=password&username=ajaysh&password=ajaysh”

    What does mean to Post this data?
    After login nothing is coming page page is same as login page.
    Please help me out.

  2. Cristian says

    Taiseer Hi, I have noticed that when the token expires an error when entering the login.
    I have solved so:
    var _responseError = function (rejection) {
    if (rejection.status === 401) {
    $ location.path (‘/ income “);
    localStorageService.remove (‘authorizationData’);
    }
    return $ q.reject (rejection);
    };
    so it works without problem, you think it’s okay solved or see a better solution ??

      • Cristian says

        Thank you for sharing your knowledge, it would be good will update what you indicated in your tutorial for new people to read it and not them this error occurs when the token expires.
        I am very grateful with you and you taught me with your tutorial to handle tokens.
        Greetings from Colombia.

  3. Mark says

    When I return 401 to the client Chrome opens Credentials Dialog right away before I get into Interceptor’s response handler. How does it work with a custom Login form? Can I suppress Browser login prompt?

    • says

      Hi Mark,
      Can you inspect the response header “WWW-Authenticate” value when you receive 401? If it was set to “Basic” then your Api is configured incorrectly, that’s why you are receiving the default browser login which asks for your user name and password, read the post again and ensure you are using bearer tokens when you configured the Api.

  4. Benjamin says

    Hello,

    First, I wanted to thank you for your post.

    I have a question about the data in the local storage: is it normal that you don’t test if your token is expired or not when you run the client side application ?

    If the user comes back after a moment, he’ll see the welcome message in the navbar and if he fill a form and submit to an Authorize action, he’ll loose everything and be redirected to the login page….

    Thx for your help !

    • says

      Hi Benjamin, The implementation in the post is minimal, but yes you should check for the token expiry maybe once you request a view and if its expired you redirect user to login screen before doing any request to the server.

  5. FabioG says

    Hi, I think i’ve applied everything correctly but i don’t think my interceptor is working correctly. I wanted to be able to redirect to the login page if I try to access any other page without being authenticated, how can I achieve this?

  6. Om Vyas says

    Hi Taiseer,

    Good Post!

    Few questions around Security.
    1. Is it really a good practice to store the token in localStorage? I feel like it wouldn’t be difficult for malware to steal this information and use the token (if not expired) to access data by calling web services and passing in this token (so long as the token is not expired. Perhaps, sessionStorage might be better given that it is accssible only within that browser/window/tab session.

    2. From the first post, when authenticating user with SimpleAuthorizationServerProvider, what about signin status for the user? For example, if the user is locked out or has not yet confirmed email ,etc. will the token be issued successfully? Perhaps, you had left that out for brevity but wanted to better understand your thoughts.

    Thanks,
    Om

  7. Apollo says

    Hi Taiseer

    Having a problem logging in, I keep getting the following error when I log in from the ASP Web Client.

    “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:55710/token. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘*, *’).”

    However, when I use ‘Fiddler’, all works perfectly fine ???

  8. FabioG says

    Hey!

    Any suggestions on how to validate the user to generate the authToken using a dynamic connection string?

    I’ve a general database where companies that are registered are associated with the name and password of their own specific database that have the users for that company. So I need to get this data using the company name to create a connection string that’ll be used to check if the user login is valid. Not sure what direction to go on doing this.

  9. Erkan says

    Hi,

    When i try to login, i get the below error.

    {“$id”:”1″,”Message”:”No HTTP resource was found that matches the request URI ‘http://localhost:59000/api2/api/token’.”,”MessageDetail”:”No type was found that matches the controller named ‘token’.”}

    Could you please advise ?

    Thank you,

    Erkan

    • Wazza says

      change ‘localhost:59000/api2/api/token’ to ‘localhost:59000/api2/api/oauth/token’ find that part of your code and update it

  10. Erkan says

    Hey,
    When i try to login, i get the below network error. Could you please advise ?

    {
    message: “No HTTP resource was found that matches the request URI ‘http://localhost:59000/api2/api/token’.”
    messageDetail: “No type was found that matches the controller named ‘token’.”
    }

    Thanks

  11. says

    Hi Taiseer,

    This was a very good article with excellent information on how to generate a token for use by Angular JS … Thanks!

    On my local API server, I was able to register a user and I am able to get a token back, but when I try to get the Orders list, I get an error: No HTTP resource was found that matches the request URI ‘https://localhost:44305/api/Orders’.

    I am using Postman and I registered the same user on your Azure API site, I then got a token and was able to pull back the Orders list from your site … So, I don’t know why when using my local API server with the same Postman syntax I am getting this error.

    Any suggestions?

    Dean

    • says

      Hi Dean,
      I guess you didn’t attribute you GetOrders method with Route(“”) or there is something wrong with your routing configurations, if you share your controller code I would be able to help.

      • says

        I support an application written in VB.NET, so I setup my AngularJSAuthentication project using VB.NET … So, I understand if you are not familiar with VB.NET … By the way, I have written other VB.NET WebApi applications that work fine for standard MVC applications, but I am very impressed by how you have put together this tutorial series for implementing OAUTH Token support that can be used for AngularJS … Here is my Orders Controller:

        Imports System.Net
        Imports System.Web.Http

        Namespace AngularJSAuthentication.API.Controllers

        Public Class OrdersController
        Inherits ApiController

        Public Function [Get]() As IHttpActionResult
        Return Ok(Order.CreateOrders())
        End Function

        End Class

        #Region “Helpers”

        Public Class Order
        Public Property OrderID() As Integer
        Public Property CustomerName() As String
        Public Property ShipperCity() As String
        Public Property IsShipped() As Boolean

        Public Shared Function CreateOrders() As List(Of Order)
        Dim OrderList As New List(Of Order) From {
        New Order With {.OrderID = 10248, .CustomerName = “Taiseer Joudeh”, .ShipperCity = “Amman”, .IsShipped = True},
        New Order With {.OrderID = 10249, .CustomerName = “Ahmad Hasan”, .ShipperCity = “Dubai”, .IsShipped = False},
        New Order With {.OrderID = 10250, .CustomerName = “Tamer Yaser”, .ShipperCity = “Jeddah”, .IsShipped = False},
        New Order With {.OrderID = 10251, .CustomerName = “Lina Majed”, .ShipperCity = “Abu Dhabi”, .IsShipped = False},
        New Order With {.OrderID = 10252, .CustomerName = “Yasmeen Rami”, .ShipperCity = “Kuwait”, .IsShipped = True}
        }

        Return OrderList
        End Function
        End Class
        #End Region

        End Namespace

        Here is my WebApiConfig code:

        Imports Newtonsoft.Json.Serialization
        Imports System
        Imports System.Collections.Generic
        Imports System.Linq
        Imports System.Net.Http.Formatting
        Imports System.Web.Http

        Namespace AngularJSAuthentication.API
        Public Module WebApiConfig
        Public Sub Register(ByVal config As HttpConfiguration)

        ‘ Web API routes
        config.MapHttpAttributeRoutes()

        config.Routes.MapHttpRoute(
        name:=”DefaultApi”,
        routeTemplate:=”api/{controller}/{id}”,
        defaults:=New With {.id = RouteParameter.Optional}
        )

        Dim jsonFormatter = config.Formatters.OfType(Of JsonMediaTypeFormatter)().First()
        jsonFormatter.SerializerSettings.ContractResolver = New CamelCasePropertyNamesContractResolver()
        End Sub
        End Module
        End Namespace

        Thanks for any suggestions you can offer, Dean

        • says

          In VB.NET, the attributes begin and end with less than and greater than symbols, so after seeing my response, I noticed they got stripped from my previous Reply.

          The OrdersController Class has the attribute: RoutePrefix(“api/Orders”)

          The Get Function has the attribute: Authorize, Route(“”)

        • says

          Hi Dean,
          I will assume you are calling WebApiConfig.Register on the Startup.Configuration method, right? As well can you try to turn off “config.Routes.MapHttpRoute” and keep “config.MapHttpAttributeRoutes()”

          • says

            Hi Taiseer,

            When I first created my API web, I didn’t create the separate and blank Solution from the API Project, so I had to adjust the folder layout when adding the Web Project to the Solution.

            So, I went back to square one and built my VB.NET based version from scratch (although, I was able to pull in the files I created in my first pass, so it wasn’t that much work).

            After getting everything setup, it is now working GREAT!!!

            The lesson for other readers … If you have a problem getting your version to work … First, make sure you check that you are following Taiseer’s instructions carefully … :)

            Thanks for your quick response to help … And keep up the great work on your series of tutorials.

  12. sandip says

    I followed your tutorial but dont know why its not sending me token. I got a response from google after login and got a call for http://localhost:32150/api/account/ObtainLocalAccessToken but not have externalaccesstoken. I overloaded method to check api hit and its hit if this will be method
    [AllowAnonymous]
    [HttpGet]
    [Route(“ObtainLocalAccessToken”)]
    public async Task ObtainLocalAccessToken()
    {
    var verifiedAccessToken = await VerifyExternalAccessToken(“provider”, “externalAccessToken”);
    return Ok();
    }
    Please help me where im going wrong

  13. miriam says

    Hey ! thanks a lot for the help here. i have a question i want to add more fields to the usermodel i’ve tried to add attributes to the sign up js controller but nothings changes i don’t know what i am missing

  14. Kelly says

    What am I doing wrong. When I change the information in ordersController.cs, such as add new items, they don’t show. It still only shows what was originally there. I assume it is cached somewhere and that is what I am getting, but how do I clear it.

    • says

      Hi Lucky, that is right, because the validation is done on the server side, so when you receive 401 there is a redirect to the login page.
      Maybe you need to check if the token is not expired or exists before sending the HTTP request, and based on this you decide to display the view or redirect to login page before.
      There are a lot of topics on the net about this, do a small research and you should find something helpful.

  15. Eric Hoogeveem says

    Hey this is a great article and really helped me to start off interacting with my companies’ api from AngularJS. I’m a rookie with angular JS.

    I have two questions.

    If I wanted to pass parameters to the api call in the ordersService such as an OData filter what would be the best way to do this? I essentially have an external api which I’m using Angular to communicate with. I’ve read that using the ngResource is a good way to do this. Is that correct?

    I also have tried to implement ngResource in my service but I believe the authInterceptorService is causing errors. Does that make sense? Is there another way to use the authInterceptorService for ngResource?

    • says

      Hi Eric,
      Thanks for your comment. To be honest I do not have a clear answer if there is an issue when using ngResource with authInterceptorService, my recommendation is to create Stack OverFlow question or search there as I’m sure you will find answer directly. Sorry for not being able to help.

  16. Marlon says

    Hello!

    First of all, thank you for sharing your knowledge. I find your posts very useful and professionally written.

    Following your tutorial, I’ve managed to build the back-end API (lets call it App1) which accepts login requests and sends back the token. I’ve also created an AngularJS application (let’s call it App2), which attaches this token to subsequent requests. The WebAPI Controllers of App1 decorated with the [Authorize] attribute correctly allow access for authenticated users only.

    Now, I would like to be able to restrict access to some resources of App2. Just for the purpose of this example, let’s say that App2 will contain some WebAPI controller, which should also be decorated with the [Authorize] attribute. How can I validate the Bearer token sent to the this controller? Is there a way of forwarding it from the WebAPI Controller of App2 to App1 for validation to create some form of local token? I’d like App1 to be used only for the purpose of authentication. Further authorization should be handled by App2.
    I will appreciate all help.

    Regards,
    Marlon

Trackbacks

Leave a Reply