Angular 2 SPA Azure Active Directory JWT 问题答案

【问题标题】：Angular 2 SPA Azure Active Directory JWT IssueAngular 2 SPA Azure Active Directory JWT 问题
【发布时间】：2017-07-27 16:29:27
【问题描述】：

想知道是否有任何 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，并且JWT（token）被Web API应用程序接受，并且可以成功调用其余服务。

当 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，该令牌与来自 Web Api 的资源 URI 不匹配，因此给我一个 401 错误 - 此请求的授权已被拒绝

有谁知道如何配置 NG2-ADAL (adal.js) 以让 Azure 活动目录发出一个令牌，该令牌包含 JWT 的 aud 参数中的资源 URI？

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

非常感谢...

【问题讨论】：

不确定为什么我被否决了。我试图清楚地说明我尝试过的方法、有效的方法、我认为问题所在以及可能的解决方案。

标签： angular azure-active-directory adal.js

【解决方案1】：

好的，所以我已经设法解决了这个问题。基本上解决方法如下：

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 时，拾取正确的资源端点，但我无法让它工作。我希望这对某人有所帮助。

【讨论】：

【解决方案2】：

实际上，payload 中的 aud 的值应该是 Azure AD 应用程序的客户端 ID，您的 ng2 应用程序从该客户端 ID 获取访问令牌。因此，如果您在 Azure 上的 Web API 应用程序受此 AzureAD 应用程序保护，则从 ng2 获取的访问令牌应该能够授权对您的 Web API 的请求调用。

我有一个快速测试利用NG2 ADAL sample，使用最简单的配置如下：

{
  tenant: '<tenant id>',
  clientId: '<azure ad application client id>', // also use this application to protect the backed services
  redirectUri: window.location.origin + '/',
  postLogoutRedirectUri: window.location.origin + '/'
}

对我来说效果很好。

请仔细检查您的配置并重试。

【讨论】：

您好。好的 - 我已经重试了您正在使用的示例以及您正在使用的确切配置。我所做的唯一更改是使用 WEB API 客户端 ID，而不是我为 Azure 中的 Angular 2 Web 应用程序设置的客户端 ID。也许那是我错了。我认为这现在符合您的设置。但是，我仍然从 Web API 上对 /api/values 的调用中获得 401 未授权。明确一点，配置是1个app注册WEB API，1个app注册Angular 2个Web App。 Angular 2 从 web api 获取它的令牌，然后用它来尝试访问资源..
我还是很难理解，确认一下，NG2中的配置应该是WEB API的AzureAD应用，NG2应用我们不需要设置AAD应用。
好的 - 这里的问题是我使用 angular 2 adal 在不同的服务器上调用 API，因此令牌不正确？
cloudidentity.com/blog/2014/10/28/…。 SPA 不适用于相同的模型。 cookie 可用于保护对您自己的支持的呼叫，事实上很多人都这样做；但如果你想在不同的后端调用 API，这不起作用

【解决方案3】：

我遇到了同样的问题。在端点中我放置了 APP URI ID，将其替换为 App ID。

var 端点 = {

    // Map the location of a request to an API to a the identifier of the associated resource
    "https://localhost:44327/": "<Application ID>" // Not APP URI ID
 };

还为 Web API 启用了 CORS。关注这个：https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

【讨论】：