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，它是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參數和端點集合，但沒有運氣。

非常感謝...

Answer 1

好的，所以我設法解決了這個問題。 基本上解決方案如下：

Angular 2應用程序必須使用其配置的客戶端ID來使用AAD進行主要身份驗證。

所以它的配置是

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

而這個問題無法解決的問題是，一旦Angular Client成功登錄，就會嘗試使用此令牌來訪問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時，會選擇正確的資源端點，但我無法將其轉換為工作。 我希望這可以幫助別人。

Answer 2

實際上， payload的aud值應該是Azure AD應用程序的客戶機ID，您的ng2應用程序將從該客戶機ID獲取訪問令牌。 因此，如果Azure上的Web API應用程序受此AzureAD應用程序的保護，則來自ng2的訪問令牌應該能夠針對您的Web API授權請求調用。

我有一個快速測試利用NG2 ADAL樣本 ，使用如下最簡單的配置：

{
  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 3

我有同樣的問題。 在端點中，我放置了APP URI ID，將其替換為App ID。

var endpoints = {

    // 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
 };

還啟用了CORS for Web API。 遵循這個： https ： //docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api