ASP.NET MVC + Web API2 + AngularJS authorization and authentication

Question

I'm developing one large application, which will consist of both ASP.NET MVC and AngularJS+Web Api2 on back-end. Previously I have used MVC forms authorization in my applications. There are lots of examples how to use token based authorization with AngularJS+Web Api, but can't find complete solution that will fit both cases.

Please provide me some information, where I can read on this topic, maybe step-by-step examples, tutorials, or blogs, where mixed authorization for both is described.

Answer 1

1. Implement ASP.Net Identity 2 in your WebAPI2 application here is a good tutorial on implementing ASP.Identity 2. It's better if you keep the WebAPI and MVC5 app in different projects.

2. Decide whether you like to connect to the API directly from your AngularJS app or from your MVC app

3. If calling API methodes directly from your AngularJS app, use this directive for OAuth2. Store the access_token in localstorage or cookie.

4. If calling the API methodes from your inside your MVC app, store the access_token on the client side (using either localstorage or a cookie) and use it for each call to your API. here is a tutorial showing how to use AngularJS with ASP.Net MVC5

5. Make sure you are using a secure connection (https) in production.

Update

You can use the default the ASP.Net providers for WebAPI. But the default providers work best with EnityFramework.
I am not a fan of EF so I used custom providers myself. Here is an overview of custom idenity providers. This MySQL example helped me a lot in implementing a custom provider (however I still used SQL Server but with our own internal DAL).