Anyone creating a PWA and authenticating using Azure Active Directory ADAL?

I have tried installing an npm package called angular2-adal but it is written for Angular 2.0.0-RC1 and the examples show installing it using system.js. I cannot seem to get it to work using webpack 2 in Ionic 2.0.0.RC-1 and Angular 2.0.0 Any help would be greatly appreciated as I am a consultant trying to get this working for my client as time is critical. Of course this is the life we live when trying to be on the leading edge of technology. :slight_smile:

Ok I got it to work. I used an npm package called ng2-adal and modified my webpack config to add a resolve for the adal module:

resolve: {
alias: { 'adal': 'adal-angular' }
}

I then followed the example code on the github repo.

I am trying to accomplish something similar with a PWA and am using ADAL.JS. I actually can get authenticated and call my api with data returned but it appears that there is a problem with the redirect post authentication. Any idea what could be causing this?

Yes. Adal.js hard-coded to look for the hash “#” to separate the base URL from the auth token on redirect. So you will need to use locationStrategy of path in Ionic. It will authenticate then redirect back to the host app and then navigation proceeds without the hash.

If you need more info, I can show you some code. I think I posed it on the adal example repo on github. I don’t have the URL handy right now, but it’s up there.

Thanks,
Mike

Thanks for the quick response. If you wouldn’t mind posting a link that would be great. There are so many ADAL repos and those with dead links that I feel like I’m chasing rabbits.

Also, is there a better way to do this? I have this working with the Cordova plugin but I am putting out a PWA so this wont work for me. Are any of the NPM solutions a better way to go?

Here’s the post that describes how to do it.

PathLocationStrategy with DeepLinker https://forum.ionicframework.com/t/pathlocationstrategy-with-deeplinker/69287

I have looked at your example. Can you tell me if I am supposed to be able to access the about page using http://localhost/about url construct? I have implemented your code in my own example and I get a “Cannot Get /about” error in ionic serve. I have accessed this via a true web server and get an error as well. What am I missing?

I am getting the same error. I believe it is an Ionic bug. Are you on rc4 yet? I will upgrade to day and see if fixed the problem and if not I will report the bug. I did see an old post from them that says they only support he hash, but if they also support change the location strategy they will have to support the path strategy before final release.

I am currently on version 2.1.4 (probably not RC4). I haven’t updated in a while for fear of breaking a project that I am currently working on. It would be great if you could test that out and let me know your results. Thanks.

I did upgrade to rc4 but it does not solve the problem. I will open an issue on github or search for it in the forum.

Thanks for checking. Any idea how something like this takes to get resolved? The only outstanding part of my solution is the authentication with ADAL.JS. I would prefer to release my solution as a PWA but unfortunately can’t until this is fixed unless you know of a way to get around this. I have the authentication working with the Cordova plugin but in order to utilize that I will have to release as an App or utilize another PWA framework.

I am able to authenticate and redirect, but I get the same error you get if I try and enter a URL wth a route or if I refresh the page. What is happening in your app?

I seem to possibly have this working but I see a few issues. The first time I authenticate I console out the token three times and I can not seem to be directed to my next page. I am not receiving any errors and I am running this in ionic server. Maybe I am performing the call incorrectly with the this.rootPage = AboutPage? This is being executed from my constructor on my app.component.ts. Thoughts?

var authContext = new AuthenticationContext(config);

// Check For & Handle Redirect From AAD After Login
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();


if (isCallback && !authContext.getLoginError()) {
    this.rootPage = AboutPage
}


  
  var user = authContext.getCachedUser();


  if (!user) {
      authContext.login();
  }

  authContext.acquireToken("https://mydev.onmicrosoft.com/myappreg", function (error, token) {
      if (error || !token) {
          console.log("ADAL error occurred: " + error);
          return;
      }
      console.log(token)

  });

Which library are you using? I am using ng2-adal which is a fork of angular2-adal. it is more up to date.

I am using Adal.js itself. Including it as a script in the index.html. I could try the ng-adal…just wasn’t familiar with it. Could you post a snippet of your auth code?

There is a link in the npm package page to an example on github, which is what I used. Pay close attention to the issues listed on each place and you should be good to go.

https://www.npmjs.com/package/ng2-adal

Thanks. I will check it out. Appreciate your help.

Glad to help man, we’ve all been there.

I have tried the ng2-adal npm library. Performed the install via NPM, put the reference in the home.ts to the index.d.ts for the typings, and put the import within the home.ts.

import {AdalService} from ‘ng2-adal/core’;

When I add public adalservice: AdalService to the constructor I continually get Cannot find module “adal”.

Any clues?

You have to make sure it is referenced in your app.module.ts.

Import it and then add the adalservice to your providers array:

providers: [
AdalService,
AuthHttp,
AuthenticationProvider,
DataProvider,
{ provide: ErrorHandler, useClass: IonicErrorHandler },
{ provide: LocationStrategy, useClass: PathLocationStrategy },
ForecastsProvider,
NavigationProvider,
ProjectsProvider,
UserViewProvider,
UtilProvider
]