2

我正在尝试使用 microsoft-adal-angular6 获取 AAD 令牌并访问我的 web api。

一切似乎都在登录并获取令牌，但令牌并未作为 Auth 标头添加到 http 请求中。

基本上我遵循了这里的步骤：

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

我认为这可能与我的端点错误有关，这似乎是说这指定了何时将令牌添加到请求中。

将这一点添加到的示例除了登录并使用 adal 服务获取一些信息之外没有做任何其他事情。它没有显示如何向附加了令牌的端点发出 HTTP 请求。

4

3 回答 3

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 中注册拦截器。

于 2019-02-12T10:25:11.163 回答
2

基本上，在 microsoft-adal-angular6 中，他们提供了端点参数，该参数又负责将标头附加到指定的 URL，请确保您拥有正确的 API。

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

      }
于 2019-01-03T05:45:00.867 回答
1

通常，将不记名令牌附加到 Authorization 标头中的调用的任务由作为包的一部分提供的内置拦截器 AdalInterceptor 处理。

请看一下这个样本。它适用于 Angular 6 和 Adal-Angular-4，但应该非常相似。

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

于 2018-09-18T21:39:14.450 回答