Cannot get an Angular SPA to authenticate an ASP.NET MVC WebAPI with Azure Active Directory

Question

I have created a single page application in Angular 2 and an ASP.NET MVC WebAPI that both require Azure Active Directory authentication. Both applications are registered in the Azure Portal, and have OAuth2 enabled. The SPA also has permission to access the WebAPI

In the SPA, I use adaljs, which works as expected. The ASP.NET Web API is configured to use Windows Azure Active Directory Bearer Authentication, which also works as far as I can tell.

When the SPA requests data from the WebAPI it sends a bearer authorization token in the header, but the requests gets denied (status 401 UNAUTHORIZED).

I have created a sample project in in github: https://github.com/ranthonissen/angular2-adaljs-webapi, and described the steps I followed in more detail here: https://dotronald.be/creating-an-angular-single-page-application-with-azure-active-directory-and-adal-js-that-uses-an-asp-net-webapi/

What am I missing to get this setup to work?

First, you should inspect the bearer token at e.g. jwt.io and see if the audience is correct in the token. It may be sending the wrong thing to the API, or your API is configured wrong. — juunas
The audience is the same as the application ID from the Angular SPA in the Azure Portal, and the clientId I use to acquire the token from AdalService — ranthonissen
The audience should be the client id of the API. Are you using the same app in AAD for both the front-end and API? — juunas
No, I have registered 2 separate apps. 1 for the WebAPI service and 1 for the Angular client SPA. In the SPA I have added API access to the API service application (delegated permissions) — ranthonissen
ADAL.js needs to be configured to get the correct token and send it along with requests automatically. If it is sending the id token of the SPA, that is indeed wrong. I haven't looked at how that's done with ng2 so I can't help much with that currently. But I would advise checking out other SPA examples than the one you linked. — juunas

Fei Xue - MSFT Fei Xue - MSFT · Accepted Answer · 2017-04-20T05:21:26

Based on the code, you were acquiring the access token using the clientId instead of app id URI of the second app.

To fix this issue, we can add resource id parameter in the SPA like below:

secret.service.ts

import { Injectable } from '@angular/core';
@Injectable()
export class SecretService {
    public get adalConfig(): any {
        return {
            tenant: 'adnewfei.onmicrosoft.com',
            clientId: 'aac92cf9-32ab-4004-aeab-1046389dff79',
            redirectUri: window.location.origin + '/',
            postLogoutRedirectUri: window.location.origin + '/',
            resourceId:"https://ADNewFei.onmicrosoft.com/webAPIFei"
        };
    }
}

The value of resourceId is the App ID URI of the app you register for the web API. And it should match the value you config in the web.config of web API project like below:

  <appSettings>
    <add key="ida:ClientId" value="29fc9b4c-4d77-4ffa-b4af-674d6b0584f7" />
    <add key="ida:Tenant" value="adnewfei.onmicrosoft.com" />
    <add key="ida:Audience" value="https://ADNewFei.onmicrosoft.com/webAPIFei" />
    <add key="ida:Password" value="xxxxxx" />
  </appSettings>

Cannot get an Angular SPA to authenticate an ASP.NET MVC WebAPI with Azure Active Directory

1 Answers