Angular 2 SPA Azure Active Directory JWT问题 [英] Angular 2 SPA Azure Active Directory JWT Issue

问题描述

想知道是否有Azure Active Directory / Angular 2 / Adal专家可以协助您解决此问题。

Wondering if any Azure Active Directory/Angular 2/Adal experts can assist with this.

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

My set up is as follows: Azure Active Directory with three app registrations. One for the Web API, one for a WPF application and one for an Angular 2 Application.

Web API的配置看起来很标准：

The configuration for the Web API looks fairly standard:

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

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

The configuration for the WPF application (which is working) is

<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>"/>

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

Here is the Angular 2 configuration with NG2-ADAL and ADAL.js

   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并获得令牌。

Both angular and WPF are able to login in AAD and get a token.

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

The problem lies with the Angular 2 Application.

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

The WPF application (which works) can login to Azure Active Directory correctly and the JWT (token) is accepted by the Web API application and the rest service can be called successfully.

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

When the WPF application logs in via microsoft.online.com/xxxxxxx it supplies a token which includes a claim like this:

 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。

And for this one - the aud parameter is the Web API resource URI. and it works perfectly

我正在使用ng2-adal，它是Angular 2的adal.js的包装。因此，当Angular 2应用程序登录时，它会收到一个令牌看起来像这样：

I am using ng2-adal which is a wrapper around adal.js for Angular 2. So when the Angular 2 Application Logs in it receives a token which looks like this:

 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错误-此请求的授权被拒绝

So the main difference - and I think why I am getting the error is that the aud parameter in the token for the WPF application contains the correct audience and is being accepted, whereas the Angular Application is returning the Client ID from its token which does not match the Resource URI from the Web Api and hence is giving me a 401 error - Authorization has been denied for this request

有人知道如何将NG2-ADAL（adal.js）配置为获得Azure活动目录来发出令牌，该令牌在JWT的aud参数中包含资源URI？

Does anyone know how to configure the NG2-ADAL (adal.js) to get Azure active directory to issue a token which contains the Resource URI in the aud parameter of the JWT?

我尝试了loginResource参数和终结点集合，但是没有运气。

I have tried the loginResource parameter and the endpoints collection but with no luck.

非常感谢...

推荐答案

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

Ok, so I have managed to solve this. Basically the solution is the following:

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

The Angular 2 application must use its configured client id to do the primary authentication with AAD.

因此它的配置是

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

这不起作用的原因是，一旦Angular Client成功登录，它便试图使用此令牌访问Web api， （这是重要的一点）是在另一台计算机上。

And the reason this wasn't working is that once the Angular Client has logged in successfully, it was trying to use this token to access a web api which (and this is the important bit) was on a different machine.

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

To solve this I called the function acquireToken on the ng2-adal like this:

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调用。

and then the service call worked.. So basically my scenario was that I was trying to do a CORS call to another web api on another machine and hence the token I got to login was not being allowed for making a web api call on another machine.

I已经读到，一种更有效的方法是将其存储在配置的端点集合中，以便在为远程计算机调用uri时，可以选择正确的资源端点，但是我无法使其正常工作。我希望这对某人有帮助。

I have read that a more efficient way of doing this is to store it in the endpoints collection of the config so that when the uri is called for your remote machine, the correct resource endpoint is picked up, but I was unable to get this to work. I hope this helps someone.

这篇关于Angular 2 SPA Azure Active Directory JWT问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！