角2 SPA Azure Active Directory JWTの問題

Question

Azure Active Directory/Angular 2/Adalの専門家がこれを支援できるかどうかわかりませんか。

私の設定は次のとおりです。Azure Active Directoryには3つのアプリ登録があります。 1つはWeb API用、1つはWPFアプリケーション用、もう1つはAngular 2 Application用です。

の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と角度2の構成でありますと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>', 


    }; 

角度とWPFの両方がAADにログインし、トークン。

問題は角度2アプリケーションにあります。

（動作する）WPFアプリケーションはAzure Active Directoryに正しくログインでき、JWT（トークン）はWeb APIアプリケーションによって受け入れられ、残りのサービスは正常に呼び出せます。

microsoft.online.com/xxxxxxx経由で、それはこのような主張が含まトークン供給WPFアプリケーションログ：

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" 
    ] 
} 

そして、この1のために - AUDパラメータは、Web APIリソースURIであります。そしてそれは私がラッパーであるNG2-アダルを使用しています完全に

に動作します。このように見えるトークンを受信したときに角度2アプリケーションログその中のSO角2用adal.js：

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パラメータは正しい視聴者が含まれていますが、角度アプリケーションは、トークンからクライアントIDを返すWeb URIからというリソースURIと一致しないため、401エラーが表示されます。 nこの要求に対して拒否されました

NG2-ADAL（adal.js）を構成して、JWTのaudパラメータにリソースURIを含むトークンを発行するAzureアクティブディレクトリを取得する方法を知っている人はいますか？

私はloginResourceパラメータとエンドポイントコレクションを試しましたが、運はありませんでした。

多くのおかげで...

Answer 1

私はこれを解決することができました。基本的には、次のような解決策があります。

Angular 2アプリケーションは、AADを使って1次認証を行うには、構成されたクライアントIDを使用する必要があります。

だから、その設定が

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

であり、これは働いていなかった理由は、角クライアントが正常にログインした後、それは（ウェブAPIにアクセスするには、このトークンを使用しようと、このされたことです重要なビットです）別のマシンにあった。だから、基本的に私のシナリオでは、私はCORS呼び出しを行うにしようとしていたということでした ...

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

してからサービスコールが働いていた：私はこのようなNG2-アダルにacquireToken関数を呼び出し、これを解決するために

別のマシン上の別のWeb APIに転送するため、別のマシンでWeb API呼び出しを行うことができませんでした。

これを行うより効率的な方法は、configのエンドポイントコレクションに格納することです。これにより、リモートマシンに対してuriが呼び出されたときに正しいリソースエンドポイントが取得されますが、これを機能させるには私はこれが誰かを助けることを望む。

Answer 2

実は、​​でaudの値は、あなたのNG2のアプリケーションからアクセストークンを取得アズールADアプリケーションのクライアントID、でなければなりません。したがって、Azure上のWeb APIアプリケーションがこのAzureADアプリケーションによって保護されている場合、ng2からのアクセストークンは、Web APIに対する要求呼び出しを許可できる必要があります。それは私の側に正常に動作します

{ 
    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 + '/' 
} 

：

は、私は次のように最も単純な構成を使用して、簡単なテストを活用 NG2 ADAL sampleを持っています。

設定をもう一度確認してもう一度お試しください。

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 APIのためのCORSを可能にしました。 続き：https://docs.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api