Azure AD Authentication with .NET Core Web API - azure

Question

We have a simple setup. Frontend web application gets a token from Azure AD. Frontend uses that token to authenticate requests to our backend .NET Core Web API. Both will be deployed as Azure Web Apps.
We have found a number of resources on this subject (Microsoft Docs, Blogs, Youtube) however, no matter what we try we are getting 401 Unauthorized errors when we send a request from the frontend to the backend.
Here is our setup:
We have 2 app registrations (one for the frontend, one for the backend)
In the Azure Portal I navigated to Azure AD -> App Registrations -> Backend App -> Expose an API -> Add Scope -> Filled out Form:
Then navigate to the Frontend app registration -> API Permissions -> Add a permission -> Add Access to API exposed in step 2.
Then select "Grant Admin Consent"
Onto the Frontend code:
On the Frontend we are using Microsoft's MSAL library. We have it configured as such:
// Frontend msal config
{
msalConfig: {
auth: {
clientId: "{frontend clientId}",
authority: "https://login.microsoftonline.com/{tenantId}/",
redirectUri: appUri,
postLogoutRedirectUri: appUri,
mainWindowRedirectUri: appUri
},
cache: {
cacheLocation: 'localStorage'
}
}
We send a login request:
// login.js
const request = {
scopes: [
"User.Read",
"api://{Backend Application Id From AzureAD App Registration}/access_as_user"
]
};
instance.loginPopup(request).catch(
(error) => {
console.log(error);
}
);
This works as expected and users are able to login and out of our frontend application.
We place our Azure AD provided token in our Authorization header in requests to our backend API (always returns a 401).
Backend code using Microsoft.Identity.Web (.NET 5):
// .Net appsettings.json
"AzureAd": {
"Instance": "https://login.microsoftonline.com/",
"ClientId": "{backend clientId}",
"TenantId": "{tenantId}"
}
// Startup.cs
using Microsoft.Identity.Web;
ConfigureServices(IServiceCollection services)
{
//other services
services.AddMicrosoftIdentityWebApiAuthentication(Configuration, "AzureAd");
//other services
}
Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// other config
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
// other config
}
Any help on how to proceed would be greatly appreciated. We are testing locally right now, but once we get auth working we will be deploying the frontend & backend applications to Azure Web Apps.
UPDATE:
I can see in the 401 response headers that I am getting:
Bearer error="invalid_token", error_description="The signature is invalid"

Answer 1

Try to add "Audience" parameter into AzureAD section: "Audience": "api://{Client_Id}".
To receive more info about auth you can pass subscribeToJwtBearerMiddlewareDiagnosticsEvents: true into services.AddMicrosoftIdentityWebApiAuthentication and check your logs after unsuccessful request.
Also, you can decode(https://jwt.io) your token and check the payload section if there are required scope and audience.
It could be that token (provided to backend) is actually for Microsoft Graph(check appId here: shawntabrizi.com/aad/…). If "scp" is "openid profile User.Read email" and "aud" is "00000003-0000-0000-c000-000000000000" then you are using the wrong token for your backend. Ask Frontend to check the way how they are receiving a token.
Frontend guy put something like this into code, correct me if I am wrong:
public static msalInterceptorConfigFactory(): MsalInterceptorConfiguration {
const resourceMap = new Map<string, Array<string>>();
resourceMap.set(environment.apiUrl, [environment.scope]);
return {
interactionType: InteractionType.Redirect,
resourceMap
};
}
public static msalGuardConfigFactory(): MsalGuardConfiguration {
return {
interactionType: InteractionType.Redirect,
authRequest: {
scopes: [environment.scope]
}
};
}
# module.ts
providers: [
...
{
provide: MSAL_GUARD_CONFIG,
useFactory: msalGuardConfigFactory
},
{
provide: MSAL_INTERCEPTOR_CONFIG,
useFactory: msalInterceptorConfigFactory
},
...
],