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

這裏是角2配置與NG2阿達爾和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中登錄並獲得一個令牌。

問題在於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.js對角2.所以當它的角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錯誤 - 授權有蜜蜂n拒絕此請求

有誰知道如何配置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' 

其原因，這是行不通的，一旦客戶角成功已登錄，它試圖使用該令牌來訪問一個Web API，它（這是重要的一點）是在不同的機器。所以基本上

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

，然後將服務調用的工作.. 我的情況是，我試圖做一個CORS電話：

爲了解決這個問題我調用的函數acquireToken的NG2阿達爾這樣的到另一臺機器上的另一個web api，因此我登錄的令牌不允許在另一臺機器上進行web api調用。

我讀過這樣做的一種更有效的方法是將其存儲在配置的端點集合中，以便在爲遠程計算機調用uri時，將拾取正確的資源端點，但無法啓動讓這個工作。我希望這可以幫助別人。

Answer 2

其實，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 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 
}; 

還啓用了CORS的Web API。 關注此：https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api