Accessing an WebAPI using ADAL.JS and Azure AD within AngularJS
Building a secured WebAPI using WAAD is pretty easy, OWIN middleware allows developers to easily integrate AuthN in their services.
Accessing those API with plain old C# is easy because Azure AD Authentication Library (ADAL) for .NET is available for quiet a long time (at least what we call long time in our business :D)
In order to get ADAL.js working for your Azure AD - Application, you've to opt-in for OAuth2.0 implicit flow which is currently disabled by default. This setting can only be changed by downloading the application manifest and changing oauth2AllowImplicitFlow to true, once you've uploaded the manifest again, you can use ADAL.JS with your Azure AD Application.
When exploring that example I stumbled upon many bugs and naming issues in AngularJS. But again, :D after reading their AngularJS code, I'm 100% sure that Microsoft doesn't do that much AngularJS development.
In order to fix those bugs and apply a proper naming for all the AngularJS stuff, I've forked the repository and applied my changes their :).
If you're interested in the polished, fixed and readable version, go and checkout my implementation right here Polished ADAL.JS AngularJS Sample
Further readings on ADAL.JS could be found on Vittorio Bertocci's blog
I've created a pull-request so perhaps my changes will go to the official sample :)
Get the Sample up and running
In order to get the sample up and running you should follow the instructions in Readme.md. The code currently shows Tenant-Id's in
app.js but putting in the primary domain name of your Azure AD is also fine.