1
votes

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:

https://login.microsoftonline.com/foo.com/oauth2/authorize?response_type=token&client_id=xxxxxxx-xxx-xxx-xxxxx-xxxxx&resource=xxxxxxx-2342-xxxx-xxxx-0292xxxxxx&redirect_uri=http%3A%2F%2Flocalhost%3A4200%2Fframe%2Fportal%2Fhome&state=a99xxxx7-xxx6-xxxc-a7b5-9xxxxx4c%7Cbceb8191-2342-4xxx-b48b-029xxxxxd4a&client-request-id=50xxxx9-fa10-xxxx-9e36-bbf9062xxxx&x-client-SKU=Js&x-client-Ver=1.0.16&prompt=none&login_hint=username%40foo.com&domain_hint=foo.com

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?

2
It should be doing that redirect in a hidden iframe. That's the way implicit grant works. But it's actually redirecting your browser?juunas
I actually dont understand why it should even get another token at this endpoint. Actually I already have a bearer token after authentication. Shouldn't this be enough to call my API?David
It should be yeah.juunas
The call to "foo.azurewebsites.net" does not even happen. I watched the traffic in fiddler and its not there... :-(David
I guess ADAL somehow thinks that token is not valid for the API.juunas

2 Answers

0
votes

You need to verify if the website has access permissions for the API and the implicit flow in the manifest is true.

0
votes

microsoft-adal-angular6 If you are using angular 6 + you can use this package it is much simpler and easy to use https://www.npmjs.com/package/microsoft-adal-angular6

More over you need to add the login and logout redirect URL in your azure ad account in your app service