Authorization to WEB API

[ejurisev]

Hello, I am hoping someone can help me to get the Authorization to my Web API working. I've tried every possible source but I can't get a working example. It seems I've ran into similar issue that most people on this page have. It doesn't even seem like it's trying to access the web api. Not getting any errors but it's not returning a response from the Web Api.
I am able to authenticate into the Angular app and receive the token but I am having an issue calling the Web Api. I was able to get it working with the adal-angular4 version so I think the setup in Azure is correct.

I've also tried to upgrade to adal-angular5 version 2.1.1 but then I get this error:
Cannot read property '4717174e-648c-4fb0-872a-e3d6e0bbe5ee|https://adaltestapi.azurewebsites.net' of undefined at Adal5Service.handleWindowCallback

This is my code:
APP.MODULE
providers: [AuthGuardService, AuthService, PlantsService,
Adal5Service, {
provide:Adal5HTTPService,
useFactory:Adal5HTTPService.factory,
deps: [HttpClient, Adal5Service] } ],

AUTHSERVICE
private _config = {
tenant: 'xxxxxx.onmicrosoft.com',
clientId: 'xxxxxx-5a93-46d9-8d41-2a1dbc14c885',
postLogoutRedirectUri: 'https://adaltestapi.azurewebsites.net',
redirectUri:"http://localhost:4400/auth-callback",
endpoints: {
'https://adaltestapi.azurewebsites.net': 'https://adaltestapi.azurewebsites.net'
},
}
constructor(private _adal:Adal5Service) {
this._adal.init(this._config);
}
public startAuthentication():any {
this._adal.login();
}
public completeAuthentication():void {
this._adal.handleWindowCallback();
this._adal.getUser().subscribe(user=> {
this._user=user;
});

PLANTS SERVICE
public getPlants(): Observable<Array> {
const options = this.prepareOptions();
return this.http.get(${environment.apiUrl}, options)
.map(response => {
const tmp = <IPlant[]>response.json(); --->> NEVER GET THE RESPONSE BACK AND NO REAL ERRORS EITHER
});
}
private prepareOptions():any{
let headers = new HttpHeaders();
headers = headers
.set('Content-Type', 'application/json')
.set('Authorization', Bearer ${this.adal5Service.userInfo.token});
return { headers };
}

Any help would be appreciated.
Thanks.

[ravivit9]

@ejurisev I am also having an issue after AJ6 upgrade. Please have a look at the ticket that I have raised and we may have a possible solution (see last comments in the ticket). ##41

[ejurisev]

@ravivit9 Thank you for responding but your issue is different than mine. I am not getting any errors and not using angular 6. I just need a working example using Angular 5.

[aidanpryde18]

I had a similar issue and the fix was to get rid of the map call at the end of the request. This uses Angular HttpClient instead of the old Http api and it handles mapping differently. This means that making a map call swallows the return.

Also, for the return type of getPlants set the Observable type to the type you want it converted to. Try something like this:

public getPlants(): Observable<IPlant[]> {
const options = this.prepareOptions();
return this.http.get(${environment.apiUrl}, options);
}

[largeDachshund]

@ejurisev is your app getting a token twice? authenticate user at the Angular website, then authenticate user for Web API app? I'm curious because there are no examples from Microsoft explaining what's best practice, just lame, "wow, it communicates?>!" examples. Thanks,

[TheAifam5]

The actual problem is with acquireToken when the endpoints inside of your ADAL config are present. I have this issue also. The problem is, that says in loop all the time and the web application reloads itself all the time because IFRAME of ADAL redirects the your application.

Its getting even worser - inside of IFRAME which is created by ADAL redirects to your application, which creates again IFRAME which redirects again to your app - so actually ADAL creates nested IFRAMEs where redirects to your application.

THAT'S FU*** UP ! -.-

PS. I'm gonna reference this issue in adal-js repository.

[walunjsachin]

The actual issue here is the application reloading itself in the hidden iFrame instead of endpoints configuration. I had similar issue, resolved it by adding redirectUri in ADAL configuration and upgrading to latest ADAL.js version (1.0.17).
Also refer this FAQ for explanation: https://github.com/AzureAD/azure-activedirectory-library-for-js/wiki/FAQs
Q1 and Q3