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
– juunas, Commented Apr 19, 2017 at 13:11
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
– ranthonissen, Commented Apr 19, 2017 at 13:26
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
– juunas, Commented Apr 19, 2017 at 13:33
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
– ranthonissen, Commented Apr 19, 2017 at 13:44
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
– juunas, Commented Apr 19, 2017 at 13:56

Leniel Maccaferri · Accepted Answer · 2019-06-05 21:34:14Z

3

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>

edited Jun 5, 2019 at 21:34

Leniel Maccaferri

103k48 gold badges381 silver badges495 bronze badges

answered Apr 20, 2017 at 5:21

Fei Xue

14.7k1 gold badge24 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ranthonissen Over a year ago

That was indeed the issue. I got the sample working now. Thank you very much for your help!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related