为什么 microsoft-adal-angular6 不附加不记名令牌？

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

我在尝试使用 Angular6 的 AAD 身份验证这两个库时遇到了困难：adal-angular4 和 microsoft-adal-angular6。对我来说，他们都没有完成工作。由于使用 adal-angular4 登录，返回了无效令牌，所以我尝试了 microsoft one。在这种情况下，令牌很好，但它没有自动附加到 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，但应该非常相似。

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