Add example on how to use HttpClient along with the AdalService

[pelle79]

I would be eternally grateful if you could add a httpservice that performs a get request or similar, which utilizes the adalservice

[ottosson]

Maybe this is what you are looking for? adal-angular4-example

[web265p3]

The adal-angular4-example does not perform a get-call. I also need a working example. I only get adal-angular4 to work with Angular 4. With Angular 6 and the interceptors I am not able to call any service. I am using the interceptor like this:

@NgModule({
  imports: [
    CommonModule,
    HttpClientModule,
    EmployeeRoutes
  ],
  declarations: [
    ListComponent
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AdalInterceptor,
      multi: true
    },
    EmployeeService
]
})
export class EmployeeModule { }

But I cannot get, post or delete anything with adal-angular4 for Angular 6.

[ottosson]

@web265p3 That project is using adal-angular4 2.x.x. For Angular 6 projects you should upgrade adal-angular4 to 3.x.x. Not sure if you need to do anything else, but that would probably be a good start.

[web265p3]

Why do you think I am using 2.xx? I am definetly on 3.01. Or am I doing anything wrong?

[ottosson]

No I just wanted you to make sure that you changed to 3.x.x in package.json. Another guess: Don't you need to add AdalService to the providers?

[web265p3]

I did this in the module above... My source and issue is here:

https://github.com/benbaran/adal-angular4/issues/53

Any working Example with angular-adal6 with calling GET or POST would be appreciated a lot :-) My example does not perform the call. So I need the example to analyze. With Angular 4 and the 1.xx it works perfectly.

[geerzo]

I have Angular 6 working with this library and get calls. My current code isn't shareable directly but I can try to put something together. I looked at your other ticket, do you have the latest version of your code that uses the interceptors?

[web265p3]

Thanks. An example would be awesome, because I just do not get it to work. The file where I am using the interceptors can be found here:

https://github.com/web265p3/angular-adal-test/blob/master/src/app/app-routing.module.ts

Yeah- this is the latest version.

[web265p3]

Maybe you can just post the lines of your code, where you perform the get or post?

[pinderhudson]

I’m in the same boat. Please post code that utilizes the interceptor for configured endpoints. I cannot get it to work

[daver77]

@web265p3 Are you just getting 401's calling your API? I'm using Angular 6 and use the code you posted above and it's attempting to call my API (.NET Core 2.0) but I get the error

Bearer error="invalid_token", error_description="The issuer is invalid"

[geerzo]

I've been trying to put together a sample but my app has stopped working now (haven't changed any libraries). I am now getting an error that says "ERROR: Token renewal operation failed due to timeout" anytime I try and call my API. I can see in the network debugger that ADAL is calling out to the authorize endpoint and never returning.

One of the annoying things about angular apps is for some reason they load, then reload. What's interesting is that the first call to authorize works, but on the reload it gets stuck in pending.

[geerzo]

Ok, I was able to fix the issue by downgrading adal-angular to 1.0.15. Seems like something in the 1.0.16 release broke how this library uses it (more details below).

I also added an API call to the example project. https://github.com/benbaran/adal-angular6-example/pull/2

More Details: After you load an application and then call a secure API it calls the aquireToken method which registers a callback and then ADAL creates a hidden iFrame to get the authorization token. The problem that happens is that once that authorization call returns the main Angular app seems to reload which clears out the application state so when it processes the returned token it doesn't know what to do with it. You can see this in the handleCallback method where it can't determine what the callback is for and assumes its a login call and disregards the actual token for the web call. To fix it I think there needs to either be a change to the ADAL library to handle saving session scope the same way that the aquireTokenRedirect method does, or there needs to be a way to not cause the app to reload with the hidden iFrame gets a response.

[peac3maker]

Another interesting part is that I found live reload of angular cli is not working well with the callback of ADAL. I had to use the following command ng serve --live-reload false.

[geerzo]

I don't have a problem with live-reload as long as I'm on adal-angular 1.0.15.

[brettkc]

@geerzo is correct here. Authorizing the user works as intended with the newer adal-angular version (1.0.17 in my case) but there are issues with using the interceptor and the call to acquireToken timing out. Downgrading the adal-angular version appears to make things work.

[sonphnt]

@daver77 Have you found the solution? I am getting "Wrong audience error" when calling to a separated Web API.

[daver77]

@sonphnt - no sorry, I still get Bearer error="invalid_token", error_description="The issuer is invalid"

My Angular6 app is validating against Azure AD fine but when it tries to call my .NET Core Web API it fails with a 401.

It sounds like you are missing the audience property. What are you using in Startup.cs? I have

            services.AddAuthentication(options =>
            {
                options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
                options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;
            }).AddJwtBearer(options =>
            {
                options.Authority = "https://login.microsoftonline.com/common";
                options.Audience = "[application id]";
                options.TokenValidationParameters.ValidateLifetime = true;
                options.TokenValidationParameters.ClockSkew = TimeSpan.Zero;
            });

            services.AddAuthorization();

[sonphnt]

Are you using .net core 2.x. ? If you created the api project from VS2017 with .net core 2.x with organisation authentication by default. You will see an extension called “AddAzureAd” with options binding to your appsettings file automatically. You dont have to configure AddJwtbearer manually

[daver77]

I got it working, the Authority was incorrect, it should have been https://sts.windows.net rather than https://login.microsoftonline.com. I'm not sure where this is set though, adal.js (line 30) defaults to https://login.microsoftonline.com.

[geerzo]

Please see the Example Project for a working example of calling the Graph API. Please use 3.0.5 of this library.