Angular 2 SPA Azure Active Directory JWT 问题

想知道是否有 Azure Active Directory/Angular 2/Adal 专家可以提供帮助。

我的设置如下：具有三个应用程序注册的 Azure Active Directory。一种用于 Web API，一种用于 WPF 应用程序，一种用于 Angular 2 应用程序。

Web API 的配置看起来相当标准：

<add key="ida:Tenant" value="<tenant>" />
<add key="ida:Audience" value="<ResourceURI>" />

WPF 应用程序（正在运行）的配置是

<add key="ida:AADInstance" value="https://login.windows.net/{0}"/>
<add key="ida:Tenant" value="<tenant>" />
<add key="ida:RedirectUri" value="<some redirect>" />
<add key="ida:ClientId" value="<client id as configured in Azure>" />
<add key="ApiResourceId" value="<The WEB API resource URI>"/>
<add key="ApiBaseAddress" value="<The base address of the Web API>"/>

这是带有 NG2-ADAL 和 ADAL.js 的 Angular 2 配置

   public get adalConfig(): any {


    return {
      instance: 'https://login.windows.net/',
      tenant: '<tenant>',
      clientId: '<client id configured for Angular App in Azure AD>',
      redirectUri: '<Angular 2 app Url>',
      extraQueryParameter: 'nux=1',
      postLogoutRedirectUri: '<Angular 2 app Url>',
      cacheLocation: 'localStorage',
      loginResource: '<Web API Resource Uri>',


    };

Angular 和 WPF 都可以登录 AAD 并获取令牌。

问题出在 Angular 2 应用程序上。

WPF 应用程序（有效）可以正确登录到 Azure Active Directory，并且 Web API 应用程序接受 JWT（令牌），并且可以成功调用其余服务。

当 WPF 应用程序通过 microsoft.online.com/xxxxxxx 登录时，它会提供一个令牌，其中包含如下声明：

 Header
{
  typ: "JWT",
  alg: "RS256",
  x5t: "_UgqXG_tMLduSJ1T8caHxU7cOtc",
  kid: "_UgqXG_tMLduSJ1T8caHxU7cOtc"
}
 Payload
{
  aud: "<web api resource uri>",
  iss: "https://sts.windows.net/1afea43f-3f0b-4a86-ad29-d444b80d2c91/",
  iat: 1488889876,
  nbf: 1488889876,
  exp: 1488893776,
  acr: "1",
  aio: "NA",
  amr: [
    "pwd"
  ]
}

对于这个 - aud 参数是 Web API 资源 URI。它工作完美

我正在使用 ng2-adal，它是 Angular 2 的 adal.js 的包装器。因此，当 Angular 2 应用程序登录时，它会收到一个如下所示的令牌：

 Header
{
  typ: "JWT",
  alg: "RS256",
  x5t: "_UgqXG_tMLduSJ1T8caHxU7cOtc",
  kid: "_UgqXG_tMLduSJ1T8caHxU7cOtc"
}
 Payload
{
  aud: "<angular app client id>",
  iss: "https://sts.windows.net/1afea43f-3f0b-4a86-ad29-d444b80d2c91/",
  iat: 1488888955,
  nbf: 1488888955,
  exp: 1488892855,
  amr: [
    "pwd"
  ]

}

所以主要区别是 -我想为什么我会收到错误那是WPF 应用程序令牌中的 aud 参数包含正确的受众并且正在被接受，而 Angular 应用程序从其令牌返回客户端 ID，该令牌与资源 URI 不匹配来自 Web Api，因此给我一个 401 错误 - 此请求的授权已被拒绝

有谁知道如何配置 NG2-ADAL (adal.js) 以使 Azure Active Directory 发出包含 JWT aud 参数中的资源 URI 的令牌？

我尝试过 loginResource 参数和端点集合，但没有成功。

非常感谢...

好吧，我已经成功解决了这个问题。基本上解决方案如下：

Angular 2 应用程序必须使用其配置的客户端 ID 来通过 AAD 进行主要身份验证。

所以它的配置是

tenant: '<tenant>',
clientId: '<configured angular 2 client id', 
redirectUri: 'some redirect',
postLogoutRedirectUri: 'some redirect',
cacheLocation: 'localStorage'

这不起作用的原因是，一旦 Angular 客户端成功登录，它就会尝试使用此令牌来访问 Web api（这是重要的一点）位于不同的机器.

为了解决这个问题，我在 ng2-adal 上调用了函数 acquireToken，如下所示：

this.adalService.acquireToken(<client id of target web api>).subscribe(p=>{
       console.log("Acquired token = " + p);

       let headers = new Headers();
        headers.append("Authorization", "Bearer " + p);
        someService.testWebApi(headers).subscribe(res => {
        console.log(res);
      }, (error) => {
        console.log(error);
      });


    }, (error => {
      console.log(error);
    }));

然后服务电话就起作用了.. 所以基本上我的情况是，我试图对另一台计算机上的另一个 Web api 进行 CORS 调用，因此我登录的令牌不允许在另一台计算机上进行 Web api 调用。

我读过，一种更有效的方法是将其存储在配置的端点集合中，这样当远程计算机调用 uri 时，就会选择正确的资源端点，但我无法将其获取到工作。我希望这可以帮助别人。