无法获得Angular SPA来使用Azure Active Directory验证ASP.NET MVC WebAPI

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?

Answer 1

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>