I am new to AngularJS and trying to evaluate it for my new web application.
I will have one ASP.NET Web API which will be consumed from an And
Also worth a look:
https://bitbucket.org/david.antaramian/so-21662778-spa-authentication-example/overview
(based on this SO question)
Warning: it's not for the faint-hearted...
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.
I think you are on the right path. I would store the tokens in an Angular Service to make it easier on yourself (http://blog.brunoscopelliti.com/deal-with-users-authentication-in-an-angularjs-web-app). I'm a little confused on what you mean by "AngularJS tries to make a call to ASP.NET MVC application to get HTML", you shouldn't need to secure the MVC app, it's just running your Angular right? The API is the piece you want to secure as well.