Почему microsoft-adal-angular6 не присоединяет токен на предъявителя?

Question

Я пытаюсь использовать microsoft-adal-angular6, чтобы получить токен AAD и получить доступ к моему веб-API.

Кажется, что все работает, войдя в систему и получив токен, но токен не добавляется в качестве заголовка Auth к http-запросам.

В основном я следовал за шагами здесь:

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

Я думаю, возможно, это связано с тем, что мои конечные точки неверны, то есть, похоже, это указывает, когда токен будет добавлен к запросам.

В примере добавьте эти пункты, чтобы ничего не делать, кроме входа в систему и получения некоторой информации с помощью службы Adal. Он не показывает, как сделать HTTP-запрос к конечной точке, к которой подключен токен.

Answer 1

В основном, в microsoft-adal-angular6 они предоставили параметр конечной точки, который, в свою очередь, заботится о присоединении заголовка к указанному URL, пожалуйста, убедитесь, что у вас есть право API.

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

      }

Answer 2

Я боролся с аутентификацией AAD от Angular6, пробуя обе библиотеки: adal-angular4 и microsoft-adal-angular6. Для меня никто из них не делает всю работу. В результате входа в систему с использованием adal-angular4 был возвращен неверный токен, поэтому я попытался использовать Microsoft. В этом случае токен был в порядке, но он не подключался к запросу webapi автоматически (конфигурации "конечных точек" было недостаточно). Решением было взять перехватчик из adal-angular4 и настроить его для использования с 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);
                }
                )
            );
    }
}

Не забудьте зарегистрировать перехватчик в AppModule.

Answer 3

Как правило, задача присоединения токена переноса к вашему вызову в заголовке авторизации выполняется встроенным перехватчиком AdalInterceptor, который входит в состав пакета.

Пожалуйста, посмотрите на этот образец. Он работает с Angular 6 и Adal-Angular-4, но должен быть довольно похожим.

Аутентификация с помощью Azure AD, клиент Angular 6, веб-API

Конкретно реализация шага 3 в этой статье.

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 { } 

ПРИМЕЧАНИЕ. Вы не опубликовали код для той части, где вы выполняете HTTP-вызов. Если это предложение не поможет, пожалуйста, добавьте точный код, и я / другие могут искать проблемы.