I followed a tutorial to build an Angular 6 app, that uses the ADAL wrapper library for angular to get a bearer-token from Azure AD and use it to call my API.
Tutorial: https://spikesapps.wordpress.com/2017/07/27/securing-an-angular-application-with-azure-ad/
Authentication and getting the token works fine, but then I try to call my API:
this.http
.get('https://foo.azurewebsites.net/' + this.url, this.prepareOptions())
.pipe(
map((r: Response) => {
const a = r['data'] as BIExplorerSettings;
if (a) {
this.BIExplorerSettings = a;
this.alreadyFetchedSettings = true;
}
return a;
}))
prepareOptions(): any {
let headers = new HttpHeaders();
headers = headers
.set('Content-Type', 'application/json')
.set('Authorization', `Bearer ${this.adal6Service.userInfo.token}`);
return { headers };
}
But my app does NOT call the API under "https://foo.azurewebsites.net/". Instead it navigates to the microsoft website like:
This confuses me. I only want to forward my token to my API. But for some reason the ADAL-wrapper client navigates to the microsoft page.
Any propsals why this is happening?