9

I am using Angular2 and want to authenticate the user against an Azure AD. I found ADALjs but they cater for Angular1 only, I also found this https://www.npmjs.com/package/angular2-adal#adalService, but this seems still in the initial stages. What is the best path I can take to implement this, can someone provide a working example.

user3547774
  • 1,621
  • 3
  • 20
  • 46
  • There exists a similar (answered!) question on stack overflow: [How to load adal.js in webpack inside Angular 2](http://stackoverflow.com/questions/40044892/how-to-load-adal-js-in-webpack-inside-angular-2-azure-ad) – hannes neukermans Oct 14 '16 at 17:26

2 Answers2

2

This answer is probably super late, but since you asked for an example, I have modified the latest Angular 2 Quickstart and integrated ADAL into it, here: https://github.com/ranveeraggarwal/ng2-adal-QuickStart

It also has routing and protected routing.

This uses systemjs and I am yet to find a webpack-based solution.

Ranveer
  • 6,683
  • 8
  • 45
  • 92
0

To fix this, you will need to do a number of things:

npm install adal-angular --save        (=>"@types/adal": "^1.0.22")
npm install @types/adal --save-dev     (=>"adal-angular": "^1.0.12")
npm install expose-loader

With those packages installed, you have to do the following:
inside your component.ts:

  1. write a triple slash to import the typings
    /// <reference path="../../../node_modules/@types/adal/index.d.ts" />
  2. import adal.js and expose it as AuthenticationContext using the expose loader
    import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
  3. declare a variable of type AuthenticationContextStatic and assign it value of AuthenticationContext
    let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
  4. Now you can initialize the authentication context using the createAuthContextFn
    let config: adal.Config = { clientId : 'test' }; let context = new createAuthContextFn(config);

How to load adal.js in webpack inside Angular 2 (Azure-AD)

Community
  • 1
  • 1
hannes neukermans
  • 12,017
  • 7
  • 37
  • 56
  • Is there anything tricky to getting this working in a system.js environment? – BradleyDotNET Dec 04 '16 at 18:02
  • @hannes How do we expose external API's endpoints using this approach ? – Pickle Dec 05 '16 at 20:05
  • You mean connect to your AD tenant? Fill in the url, no? Anyways, another approach if you use typescript, you can also try npm installing adal-ts. The repo also has a live demo hosted on azure to get you started. – hannes neukermans Dec 05 '16 at 21:03