This is a simple app that is hosted on Azure. It uses ASP.NET Core with Angular2 front end and WebAPI on the back. The site and database are hosted on Azure and use Azure’s EasyAuth (link tbd) authentication service. This service allows for user login using their Microsoft, Google or Facebook accounts.
The app has simple CRUD functionalities that is done through the API. This app is to demonstrate the Angular2 project structure using modules, components and services. The full source code can be found here:
https://github.com/johnlee/Names
A demo of the application can be viewed here:
https://ereum.azurewebsites.net/
The app is pretty straight forward API controllers with Angular2 frontend served through .NET Core. The part that was somewhat tricky for me was trying to get this hosted on Azure and using Azure’s EasyAuth – or App Service Authentication feature. You can find more information about this feature on the links below.
https://azure.microsoft.com/en-us/blog/announcing-app-service-authentication-authorization/
https://docs.microsoft.com/en-us/azure/app-service/app-service-authentication-overview
The nice thing about this feature is that it provides a variety of ways for users to authenticate, such as with their Microsoft account, Google, Facebook or even Twitter. The authentication service can also go up against an Active Directory (which was the original target Azure were going for when creating this feature). This would be great for intranet or enterprise applications as the developer could essentially completely ignore authentication as Azure would be handling all for them.
On this sample ereum app, I can view the user’s identity and claims by calling this endpoint:
https://ereum.azurewebsites.net/.auth/me
If using a provider like Google or Facebook, the claims slightly differ but I can get a variety of information about the user.
Traditionally, when implementing OAuth authentication we would need to setup an OWIN layer on the application side and handle the connections to the identity providers, handle the tokens, register the users on our backend, etc. etc. which is all a bit complex and not the simplest thing to manage. But with Azure’s EasyAuth, it takes all that away from our application side. With just a few small configuration steps on Azure (like entering the client keys), we’re able to have an authentication system completely automated for us.
I’m a big fan of EasyAuth and hope to use it in all my apps on Azure. It also works for API projects and integrates in mobile apps like Xarmarin.
Though overall this was pretty easy to implement, it wasnt completely problem free. There were a couple of issues, the biggest of which was that the Azure side was not able to update the Claims Principal object on my app side (the Azure document above states that it is supposed to). Turns out this is known issue with ASP.NET Core and being worked by Microsoft. I’m told the feature works fine with regular .Net 4.6 Framework. I had posted the issue here:
Also, at this time I was still using the older Visual Studio 2015 (update3) and it didn’t have a good template for .NET Core projects. I found this template pack very useful:
https://marketplace.visualstudio.com/items?itemName=MadsKristensen.ASPNETCoreTemplatePack
This project uses Webpack to build and bundle the frontend files. Though one could piece this together from the template I’ve linked above, but I found this posting by Steven to be very helpful.
http://blog.stevensanderson.com/2016/10/04/angular2-template-for-visual-studio/
Some other references I used during this project:
Getting user auth from client side
https://docs.microsoft.com/en-us/azure/app-service-mobile/app-service-mobile-html-how-to-use-client-library
Tutorial on working with Azure app service
https://docs.microsoft.com/en-us/azure/app-service-web/app-service-web-get-started-2#authenticate-your-users
https://cgillum.tech/category/easy-auth/
Using Angular on Visual Studio
https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html
http://asp.net-hacker.rocks/2016/08/08/setup-angular2-typescript-aspnetcore-in-visualstudio.html
https://github.com/luiscantero/angular2-webpack-dotnet-core