A Web API & Angular starter project using Azure AD Identity

Having worked on a few greenfield projects in the last couple of years I always found myself eager (and sometimes under pressure) to get a good grasp of the domain and start delivering business value from day one.

While this is an ideal scenario, in reality a good part of the first sprint is usually spent setting up the working environment and drafting a high level architecture. And although this how it should be (you don’t want to start coding without some planning), once an architectural and technological path for the project is agreed, I sometimes felt it would be helpful to be able to fast forward through the repetitive parts of this process, especially if it’s something already familiar and proved to be working.

With this in mind, I created a sample project that uses Angular on the front-end, ASP.NET Web API on the back-end and is secured by Azure AD Identity Provider.

You can find the source-code here: https://github.com/florindpreda/Starter.WebAPI.Angular.AzureAD

Please note that this sample uses Active Directory Authentication Library for JavaScript (ADAL.JS) which handles the Azure AD authentication in Angular.

In order to get it running you have to:

  1. In web.config
    • Replace ida:Tenant with your tenant (eg. something.onmicrosoft.com)
    • Replace ida:Audience with your clientId (this is GUID you can get from the Azure Portal)
  2. In app.js
    • Replace tenant with your tenant
    • Replace clientId with your clientId
  3. Enable OAuth2 implicit grant for the application
    • Download the application manifest, set oauth2AllowImplicitFlow true, and upload it again to the portal.

You will probably notice a index_ngroute.cshtml and a app_ngroute.js in the solutions. By default, this sample uses the Angular state-based ui-router but you can easily switch to URL-based routing by renaming the files mentioned above into index.cshtml and app.js.

This should be enough to get you started with Angular, Web API, and Azure AD. You can read more about this and other scenarios supported in Azure AD here.

No Comments

Post a Comment