Example of an SPA with a login screen that uses AngularJS and connects to ASP.NET Web API 2?

Solution 1:

So, instead of trying to find an example, I created one instead (link at the bottom). To explain how the functionality works, I want to go over a few things:

• The new ASP.NET Identity system provides an OAuth 2.0 Bearer token implementation which can be used with clients that consume a Web API resource over HTTP. Since the authentication is not stored in a session cookie, the server is not responsible for maintaining the authentication state. The side-effect is that the consumer has to manage authenticating the server and managing the returned token. This is the system that Microsoft uses in the SPA template that it provides with VS 2013.

• AngularJS makes no assumptions about authentication, so it's up to you how to authenticate.

• AngularJS provides the $http service for querying remote HTTP-based services as well as $resource which is built on top of $http. Using Authorization headers with the Bearer token implementation above, you can combine both to provide authenticated access to server resources over HTTP. AngularJS allows you to set a 'default' Authorization header which it will use in every subsequent HTTP transaction.

With that in mind, the way I accomplished this is by creating a User service that handles all of the authentication details, including setting the HTTP Authorization header, between the Web API server and the SPA. Based on the authentication status of the user, you can hide certain UI elements in order to prevent navigation. However, if you also define the state as requiring authentication as a property of the resolve object for the state, a watcher set on the $stateChangeError event will capture the error and redirect the user to the login form. Upon proper authentication, it will then redirect the user to the state they were trying to navigate to.

In order to prevent authentication from being lost between browser sessions (since the client is responsible for maintaining the authentication token, and that token is maintained in memory), I also added the ability for the user to persist the authentication to a cookie. All of this is transparent to the user. For them, it is practically identical to traditional form-and-session based authentication.

I'm not sure why you want to prevent the user from seeing the routes, but I have coded it as such. I am in debt to Sedushi's Plunker example of how to use AngularUI Router to navigate in a stateful manner without using URLs. Still, I'm not sure I can personally recommend this for any application I would write on my own.

The full solution (both the WebAPI and the WebUI) is available with step-by-step instructions here.

Let me know about any specific part that is unclear, and I will try to make it more clear in the answer.

Solution 2:

Refer the following blog for the demo of single page application (SPA) for ASP.NET Web API 2 and AngularJS, developed by the team at Marlabs.

http://weblogs.asp.net/shijuvarghese/archive/2014/01/25/demo-spa-app-for-asp-net-web-api-2-and-angularjs.aspx

The app is built with following technologies:

• ASP.NET Web API 2
• EF 6 Code First
• AutoMapper
• Autofac
• Semantic UI
• AngularJS 1.1.5

The application is published on github at https://github.com/MarlabsInc/webapi-angularjs-spa.

Solution 3:

@DavidAntaramian gave a great example. But if you want a simple one, you can look to this HOL from Microsoft. Their latest example on github uses .NET Core, but you can download release from October 2015.