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)

During TechEd Europ Microsoft announced and released the developer preview for ADAL.JS - a lightweiht JavaScript library for integrating Azure AD authentication into your SPA (Single Page App).

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.

ADAL.JS is available on github and the community and contributions from the community are warmly welcomed. ADAL.JS Repository. There is also a working example right here ADAL.JS AngularJS Sample SPA.

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 The code currently shows Tenant-Id's in web.config and app.js but putting in the primary domain name of your Azure AD is also fine.


comments powered by Disqus