59

I would like to create a new AngularJS, Web API Single page application. Does anyone have any examples that show how I can set up a user login screen that connects to a WEB API controller for a simple login (no need for google/facebook login etc) that uses ASP.NET Identity and without the need for user registration.

Also how can I handle showing a new view once the login has been completed. What I would like is to have a solution that does not show routing in the browser URL. So for example I would like to be able to switch from the login view and a couple of other different views without the url changing from www.abc.com.

In other words I would like to avoid showing www.abc.com/login, www.abc.com/screen1, www.abc.com/screen2

Any advice would be much appreciated.

8
  • Your web api endpoints surface JSON data, everything else you coud handle with angular, routing in angular is simple and intuitive, and yes, angular's default ng-route is enough, ui-router is for more complex nested routing. Study some angular first, and you will see that integrating web api is no big deal, its a lot like using jquery ajax in mvc, except heer you have angular's $http. Feb 9, 2014 at 18:38
  • CD. Thanks for your correction. I will update the question now. Feb 13, 2014 at 6:55
  • 1
    To avoid showing the routing you'd probably have to use ng-switch or ng-include. That will allow you to show different content depending on what link has been pressed and it won't change the route.
    – JDWardle
    Feb 13, 2014 at 7:04
  • @Sedushi - I am not 100% sure of this but I think the AngularUI Router would allow me to do this without showing the routing. Hopefully someone else can comment and let me know if this is true and if that's the only alternative to what you suggest. I would be a bit concerned about doing everything with ng-switch as I think this would lead to a very big page. Maybe ng-include but let's see what others have to suggest. Thanks for your comment. Feb 13, 2014 at 7:16
  • 2
    @SamanthaJ I looked over ui-router and it does indeed look like you can change the route without showing the url. I modified an example from the docs that shows this working plnkr.co/edit/pXqYzo?p=preview. It still has the #/ in the url and you can get rid of that by enabling html5 mode, but for some reason plunker doesn't like html5 mode so I left it commented out. When I tried it locally everything worked just fine even with html5 mode enabled.
    – JDWardle
    Feb 13, 2014 at 16:57

3 Answers 3

127
+500

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.

10
  • 5
    Amazing and thank you very much for all of your help with this. I will accept this answer. Feb 19, 2014 at 5:51
  • 1
    Happy to help. It's not perfect, and as you work on your project you might find better ways to meet your needs as well as better ways to refactor the code I wrote. But hopefully this points you in the correct direction for what you need to do. Feb 19, 2014 at 20:27
  • 1
    @DavidAntaramian How would you modify this to work with Facebook and other OAuth2 authentication providers? That's a very helpful post btw.
    – AD.Net
    Aug 10, 2014 at 0:30
  • This is an awesome example. I had problems running it, and ended up doing the thing described here: stackoverflow.com/a/25896267/1271135. Hope this helps someone. Sep 17, 2014 at 17:09
  • best answer I've ever seen here :)
    – KnF
    Sep 19, 2014 at 23:50
9

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.

1
  • 1
    Thanks this is a good example. I will wait another few days and see if anyone else comes up with anything as good as this. Feb 16, 2014 at 14:26
1

@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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.