Почему 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.

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.Если это предложение не помогло, пожалуйста, добавьте точный код, и я / другие могут искать проблемы.