Angular 2 SPA Azure Active Directory JWT Issue

Question

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

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.

The configuration for the Web API looks fairly standard:

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

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

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>',


    };

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

The problem lies with the Angular 2 Application.

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.

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

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

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

}

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

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?

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

Many Thanks...

Unsure why I'm voted down. I've tried to state clearly what I've tried, what has worked, what I think the problem is and a potential resolution. — The Unculled Badger

The Unculled Badger The Unculled Badger · Accepted Answer · 2017-03-08T15:38:59

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

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

So its config is

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

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.

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

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 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 Issue

3 Answers