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. Lana says

    I’m having a problem:

    I just setted the code below to allow roles to allow the roles admin, and have added my user to the role Admin and added the role to the database.

    Now when im trying to go to /tokens it says everytime Unauthorized.

    Already tried to allow lazyloading, not worked…

    Code:
    [Authorize(Roles = "Admin")]
    [Route("")]
    public IHttpActionResult Get()
    {
    return Ok(_repo.GetAllRefreshTokens());
    }

    [Authorize(Roles = "Admin")]
    [AllowAnonymous]
    [Route("")]
    public async Task Delete(string tokenId)

    • says

      Hi Lana, just answered the same question please check it here. As well you should not receive 401 when you call the “/token” end point it is unprotected endpoint.
      Let me know if you need further help!

  2. says

    Hi!

    I’m using this exempla with ionicframework.com and the only “problem” i get is i can’t hold the session.
    everytime i close the app, when i open they redirect to login page…
    I increase the login time on API, but nothing, i miss something?

    Thanks!

    • says

      Hi Daniel,
      Just to clarify there is no session between your hybrid mobile app and your API, your problem resides in not storing the token in HTML5 localStorage when you obtain the token from the Authorization server, there is nothing to do with increasing the token time.
      Make sure that you store the token locally on your app and you are sending it in the Authorization header for each request to a the API protected end points. That’s the areas you need to investigate and make sure they are working correctly in your hybrid mobile app.

  3. @Datz Me says

    I’m using Internet Explorer in testing this application but I can’t Login nor Sign up and i use this one to Google Chrome and no error happened. I used it in my Website and same problem with IE it cannot Login. Please help me what is the problem. It showed me an error “unsupported_grant_type”.. Note: Functional in anybrowser except Internet Explorer. What will I do to fix this problem?

  4. says

    How do you suggest debugging this locally? For serviceBase should we assign it the iis express url such as: var serviceBase = ‘http://localhost:49803/’;, or should we just put everything in one project so we can use a relative URL? Is there a better approach?

    • says

      You can debug it while the projects are separated, if you need to debug the JS files you can use IE and set breakpoints, or you can use Google Chrome and set break points using developer tools.

      • says

        What I mean is, we have to replace this line:

        var serviceBase = ‘http://ngauthenticationapi.azurewebsites.net/’;

        when debugging locally. What should we replace it with? It it’s just one project we can use a relative URL instead of an absolute one. What was the approach you took when debugging before deploying it to azure? Did you have the iis express URL hardcoded and then replace it before deploying to production?

        Thanks!

    • says

      Hi Tamer,
      There is no endpoint for validating the token in this tutorial, if you need to implement one you might need to store the tokens in DB. What you want to verify in the token? The claims inside it and if it is expired or not?

  5. paolo says

    Hi Taiseer,
    Thank you for detailed explanations.

    I faced the following problem:

    When use Chrome i have to click twice the login button because the first time I get the following errors:

    Failed to load resource: the server responded with a status of 400 (Bad Request) http://localhost:33484/token

    XMLHttpRequest cannot load http://localhost:33484/token. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:16583′ is therefore not allowed access. The response had HTTP status code 400.

    I have set the client allowed origin column to match my host: http://localhost:16583 and cors is enabled.

    the second time all work and the user is authenticated.

    ie and firefox work well.

    Thank you!
    paolo

      • paolo says

        Hi Taiseer,
        Thanks for rapid reply.
        I have checked in other chrome browser (mobile and other computers) and the result is the same, sometimes work fine and sometimes the first time I click to login button I get un error.
        For testing purpose I published the app, you may try to login,the test should be made more times opening and closing chrome.
        http://www.paolocostantini.it => demouser/demo123
        thanks

        • says

          I’ve checked and it is working fine at my end using Google chrome version (39.0.2171.65 m). Maybe you are facing this issue when you are logged in and you try to login again. I remember there is fix for this in the comments, you can search for it.

  6. Ederson says

    Could you please explain me in step 9 as the updated menu works after User login I’m not getting the update menu navigation that is required to change the css variable modicar for this condition and refresh the screen.
      <li data-ng-hide = "! authentication.isAuth"

  7. says

    Hello Ederson,
    Sure no problem, the navigation bar in the index.html page uses a controller named “indexController”, if you check the LOC https://github.com/tjoudeh/AngularJSAuthentication/blob/master/AngularJSAuthentication.Web/app/controllers/indexController.js#L9 you will notice that I’m passing the “authentication” object and checking if the user is authenticated or not, based on this I’m hiding/showing this list item. Hope this clarify your concern.

  8. Ederson says

    Hello Taiseer,

    It turns out that even with this object authentication returning true with the logged User is not updating my navigation menu not know if you need to add som css for checked as another example to run the hide-ng. Add.ng-ng-hide-hide-add-active also noticed that you do not add angular.module (‘app’, ['ngAnimate']); veriquei as another example has some part of css or javascript more work is needed to update the navigation bar?

  9. Ederson says

    Yes I am configuring the controller for the navigation section in the HTML but still not updated if I press F5 appears menus mean that my variable is populated in the controller.
    There’s something that is taken when clicked on login that makes updating the navigation menu?
    Even indexController being outside the ng-view it updates itself with the changes in the scope of the controller?

    This example will work if I upgrade the version of Angular v1.2.18?

  10. Marc says

    Hi,
    WONDERFUL work, thank you. All seems well except that navbar. The collapse button does not function at all when screen is small. NO expansion of menu items etc. Can you please post a working example of the navbar? Your menu looks nothing like any other example out there so I am confused. Then again, none of the examples posted on site work either. Everywhere I look the posts seem to say to use ui-bootstrap??????

  11. Marc says

    Thank you Sir!!!!!!!!!!!! Another noob question for you….
    I am trying to make a GET request work but the uri cannot be located. I keep getting 404 errors.

    Here is my webapi…

    // GET api/Permissions/GetPermissionByUser begin snippet
    [Authorize]
    [Route("GetPermissionByUser")]
    public IHttpActionResult Get(string userName)
    /// end snippet

    // The webapi config…
    config.Routes.MapHttpRoute(
    name: “DefaultApi”,
    routeTemplate: “api/{controller}/{id}”,
    defaults: new { id = RouteParameter.Optional }
    );

    // My javascript call…
    return $http.get(serviceBase + ‘api/Permissions/GetPermissionByUser’, userData).then(function (results) {
    return results;
    });

    // userData is a string with “userName” in it.

    Please advise if you can!

    Many thanks!

Trackbacks

Leave a Reply