AngularJS + ASP.NET Web API + ASP.NET MVC Authentication

asp.net-mvc angularjs asp.net-web-api forms-authentication asp.net-identity
Haider picture Haider · Apr 17, 2014 · Viewed 15.5k times · Source

I am new to AngularJS and trying to evaluate it for my new web application.

Requirement:

I will have one ASP.NET Web API which will be consumed from an Android, an iPhone and from a web application (ASP.NET MVC) too. ASP.NET Identity will be implemented in Web API. All three applications will call the login method of Web API to get the auth token.

Problem:

My problem is how to get ASP.NET MVC server side authentication work (in sync with Web API so I don't have to login for ASP.NET MVC separately) while Angular makes a call to get the HTML template/view, JavaScript files or other resources. I have went through many articles and blogs on AngularJS but still unable to find a security model which fits in my requirement.

Possible Solution:

Would it be a good idea to make the login call to ASP.NET MVC application instead of Web API directly, and ASP.NET MVC application would call the Web API to login, and once authenticated, save the auth token in session plus create a FormsAuthentication cookie and in cookie data save the encrypted auth token. Moreover set the auth token in ng-init somewhere in HTML to have the token in AngularJS scope. Now when AngularJS tries to make a call to ASP.NET MVC application to get HTML, then authenticate/authorize the user by matching the cookie decryted data with auth data in session. Also, AngularJS will send the auth token in header to call the Web API methods directly for all the subsequent calls for data manipulation through Web API.

Answer

Haider picture Haider · May 8, 2014

I solved the problem with a very strait forward solution. I just made sure I have following two lines of code in the Register method of WebApiConfig:

config.SuppressDefaultHostAuthentication();
config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

That's it. Now my MVC controllers look for the session cookie for authorization whereas my Web API controllers look for the auth token in the header of each request. Moreover, the Web API sends a token (JSON) and a session cookie itself in response to the login/authentication request e.g. http:\\www.mydomain.com\token.

So now I send my login request to Web API to get the token as well as the session cookie. Session cookie will automatically be sent will each request so I don't have to worry about the authorization of my MVC controllers. For Web API calls I am sending the auth token in the header for each request as Web API controllers don't care about the session cookie being sent with the request.

Related questions

MVC web api: No 'Access-Control-Allow-Origin' header is present on the requested resource

I tried everything that is written in this article: http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api, but nothing works. I'm trying to get data from webAPI2 (MVC5) to use in another domain using angularJS. my controller looks like this: …

Read More
How to use ASP.NET MVC and AngularJS routing?

I’m working on a new ASP.NET MVC and AngularJS application that is intended to be a collection of SPAs. I’m using the MVC areas concept to separate each individual SPA, and then I’m using AngularJS within …

Read More
Missing token 'access-control-allow-headers' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel

I have two VS projects : one exposing MVC5 controllers, the other being an angular client. I want the angular client to be able to query the controllers. I read numerous threads and tried the following : I added this in the …

Read More