Question

我正在尝试使用microsoft-adal-angular6获取AAD令牌并访问我的Web 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

通常，作为包一部分提供的内置拦截器AdalInterceptor可以完成在Authorization标头中将承载令牌附加到呼叫的任务。

请查看此示例。它适用于Angular 6和Adal-Angular-4，但应该非常相似。

Authentication with Azure AD, Angular 6 client, Web 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调用的部分发布任何代码。如果此建议没有帮助，请添加确切的代码，我/其他人可以寻找问题。

Answer 3

我在Angular6的两个库Adal-angular4和microsoft-adal-angular6中尝试了AAD身份验证。对我来说，他们没有一个能干全部工作。使用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中注册拦截器。

为什么microsoft-adal-angular6不附加承载令牌？

3 个答案: