在 RXjs Http Get 方法中包装 Azure B2C 身份验证令牌答案

【问题标题】：Wrap Azure B2C Authentication Token in RXjs Http Get Method在 RXjs Http Get 方法中包装 Azure B2C 身份验证令牌
【发布时间】：2018-01-19 12:41:28
【问题描述】：

我在 Angular 5 中有 RXJS Http get 方法来使用来自 ASP.Net Web 2 的服务。在调用使用这些服务之前，我已经获得了从 Azure B2C 收到的身份验证令牌。

我的问题是我如何包装这个 RXJS 服务方法以将令牌与 Web API 请求一起传递。

服务

import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

import{ IMessageA } from '../../../Interfaces/UnitTest/TestMessageA';

@Injectable()

 export class ServerFlowTestService{

   private developmentBaseUrl: string = 'https://localhost:44370/';

   constructor(private http: Http){}

   public getMessageFromWebAPI_T1():Observable<IMessageA[]>
  {
    return this.http.get(this.developmentBaseUrl+ '/app/analysis/GetMessage')
                    .map((response:Response)=> <IMessageA[]>response.json())

  }
}

可观察组件

unitTestA: IMessageA[];

  constructor(private authSandbox: AuthenticationSandbox, private unitTestingService: ServerFlowTestService 

 ) { 

 this.token = authSandbox.getToken();

 this.unitTest1 = unitTestingService.getServerFlowTest1();

 this.unitTestingService.getMessageFromWebAPI_T1()
                      .subscribe((messageA_Data) => this.unitTestA = messageA_Data);

 }

【问题讨论】：

标签： angular asp.net-web-api2 rxjs restful-authentication

【解决方案1】：

您可以使用angular2-jwt 包来制作包装器。它从local/sessionStorage 中获取您的token 并包装必要的标题。您创建一个 AuthModule 并将其导入主模块：

import { AuthHttp, AuthConfig } from 'angular2-jwt';

export function authHttpServiceFactory(http: Http, options: RequestOptions) 
{
    return new AuthHttp(new AuthConfig({
        tokenName: 'token',
        tokenGetter: (() => sessionStorage.getItem('adal.idtoken')),
        globalHeaders: [{ 'Content-Type': 'application/json' }],
    }), http, options);
}

@NgModule({
    providers: [
    {
        provide: AuthHttp,
        useFactory: authHttpServiceFactory,
        deps: [Http, RequestOptions]
    }
})
export class AuthModule { }

然后您可以使用AuthHttp 调用token 而不是http：

import { AuthHttp } from 'angular2-jwt';

constructor(private authHttp: AuthHttp) { }

public getMessageFromWebAPI_T1():Observable<IMessageA[]>
{
    return this.authHttp.get(this.developmentBaseUrl+ '/app/analysis/GetMessage')
                .map((response:Response)=> <IMessageA[]>response.json())

}

查看this walk through，尤其是授权部分。希望这会有所帮助。

【讨论】：