Angular 2 SPA Azure Active Directory JWT 问题

Question

想知道是否有任何 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，它是 adal.js 对 Angular 2 的包装器。因此，当 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 参数和端点集合，但没有成功。

非常感谢...

Answer 1

实际上，payload 中 aud 的值应该是 Azure AD 应用程序的客户端 ID，您的 ng2 应用程序从中获取访问令牌。因此，如果您在 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 + '/'
}

我这边很好用。

请仔细检查您的配置，然后重试。

Answer 2

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

Angular2 应用程序必须使用其配置的客户端 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);
    }));

然后服务调用成功了.. 所以基本上我的情况是我试图在另一台机器上对另一个网络 api 进行 CORS 调用，因此不允许我登录的令牌在另一台机器上进行网络 api 调用.

我读到一个更有效的方法是将它存储在配置的端点集合中，这样当为您的远程机器调用 uri 时，就会选择正确的资源端点，但我无法让它工作。我希望这对某人有所帮助。

Answer 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 启用了 CORS API。按照这个：https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

Angular 2 SPA Azure Active Directory JWT 问题

Angular 2 SPA Azure Active Directory JWT Issue

azure-active-directory

adal.js

angular