Why is microsoft-adal-angular6 not attaching the bearer token?

Question

I'm trying to use microsoft-adal-angular6 to get an AAD token and access my web api.

Everything seems to be working wrt logging in and getting the token, but the token isn't being added as an Auth header to the http requests.

Basically I followed the steps here:

https://www.npmjs.com/package/microsoft-adal-angular6

I think maybe it has to do with my endpoints being wrong, that seems to say this specifies when the token will be added to the requests.

The sample add this points to doesn't do anything more than login and get some info using the adal service. It doesn't show how to make an HTTP request to an endpoint having the token attached.

Answer 1

Usually, the task of attaching bearer token to your call in Authorization header is taken care of by the built-in interceptor AdalInterceptor provided as part of package.

Please take a look at this sample. It works with Angular 6 and Adal-Angular-4 but should be pretty similar.

Authentication with Azure AD, Angular 6 client, Web API

Specifically the implementation of Step 3 in this article.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './/app-routing.module';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { AuthCallbackComponent } from './auth-callback/auth-callback.component';
import { AdalService, AdalInterceptor } from 'adal-angular4';

@NgModule({
  declarations: [
    AppComponent,
    AuthCallbackComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [AdalService, { provide: HTTP_INTERCEPTORS, useClass: AdalInterceptor, multi: true }],
  bootstrap: [AppComponent]
})
export class AppModule { } 

NOTE: You haven't posted any code for the part where you're making the http call. In case this suggestion doesn't help, please add the exact code and me/others can look for issues.

Answer 2

Basically , in microsoft-adal-angular6 they have provided endpoint parameter which in turn takes care of attaching the header to the URL specified please make sure that you have the API right .

 endpoints: { 
        "https://localhost/Api/": "xxx-bae6-4760-b434-xxx",

      }

Answer 3

I struggled with AAD authentication from Angular6 trying both libraries: adal-angular4 and microsoft-adal-angular6. For me none of them make whole job. As a result of login using adal-angular4 the invalid token was returned, so I tried microsoft one. In this case the token was fine, but it was not attaching to webapi request automatically ("endpoints" configuration was not enough). The solution was to take interceptor from adal-angular4 and adjust it to be used with microsoft lib.

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { mergeMap } from 'rxjs/operators';
import { MsAdalAngular6Service } from 'microsoft-adal-angular6';

@Injectable()
export class MyInterceptor implements HttpInterceptor {

    constructor(private adal: MsAdalAngular6Service) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // retrieve resource from endpoints configuration
        const resource = this.adal.GetResourceForEndpoint(request.url);
        if (!resource) {
            return next.handle(request);
        }
        if (!this.adal.isAuthenticated) {
            throw new Error('Cannot send request to registered endpoint if the user is not authenticated.');
        }

        // acquire and inject token
        return this.adal.acquireToken(resource)
            .pipe(
                mergeMap((token: string) => {
                    // clone the request and replace the original headers with
                    // cloned headers, updated with the authorization
                    const authorizedRequest = request.clone({
                        headers: request.headers.set('Authorization', 'Bearer ' + token),
                    });
                    return next.handle(authorizedRequest);
                }
                )
            );
    }
}

Don't forget to register interceptor in AppModule.