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