I have an ASP.NET Core 3.1 web API application that is protected by Azure Authentication. I also have an Angular 11 application that calls the web API.
They work fine on our integration environment. But authentication fails on the test environment.
The Angular app authenticates fine using msal-angular library, it gets the access token and includes it when calling the web API. But the web API fails to retrieve the identity from the bearer token.
After deleting and recreating both (frontend and backend) Azure APP registrations several times and after reconfiguring them, the authentication still fails. I don't know what is the cause, so this is why I need to diagnose it.
I have enabled JwtBearerMiddlewareDiagnosticsEvents
and I can see 'Begin OnAuthenticationFailedAsync' and 'End OnAuthenticationFailedAsync' on the logs. But it isn't enough information. It tells you no more that the events are raised, no additional information.
I've read the following article on documentation that tells you how to configure logging in MSAL.NET, but I don't think it's applicable to web API.
https://learn.microsoft.com/en-us/azure/active-directory/develop/msal-logging-dotnet
So the question is: How can I figure out why the authentication is failing? Is there any way to log the cause?
UPDATE:
I'm closer, I set log level to trace and now I see the following on the log of asp.net core web api app:
IDX10511: Signature validation failed. Keys tried: '[PII is hidden. For more details, see https://aka.ms/IdentityModel/PII.]'. \nkid: '[PII is hidden. For more details, see https://aka.ms/IdentityModel/PII.]
UPDATE:
I get the following error:
Bearer was not authenticated. Failure message: IDX10214: Audience validation failed. Audiences: '242e8f40-d795-43bc-8ac8-8eed3df71745'. Did not match: validationParameters.ValidAudience: 'b99e89fc-8a1c-4605-8c18-796d7064037e' or validationParameters.ValidAudiences: 'null'.
'242e8f40-d795-43bc-8ac8-8eed3df71745' is the AppId on the web api app registration manifest.
'b99e89fc-8a1c-4605-8c18-796d7064037e' is the client id of the web api registration.
The scope is 'api://242e8f40-d795-43bc-8ac8-8eed3df71745/api-access'.
This is how I set the scope:
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
protectedResourceMap.set('https://api.example.com/*', ['api://242e8f40-d795-43bc-8ac8-8eed3df71745/api-access']);
return {
interactionType: InteractionType.Popup,
protectedResourceMap
};
}
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
return {
interactionType: InteractionType.Popup,
authRequest: {
scopes: ['api://242e8f40-d795-43bc-8ac8-8eed3df71745/api-access']
},
loginFailedRoute: '/login-failed'
};
}
Your problem has been solved. The problem is that the configuration of the web api is wrong. You need to create them again and reconfigure .
According to my experience, you need to create two applications in Azure, one representing the web api application and the other representing the client application (ie Angular 11 application).
Then you need to expose the api of the web api application in Azure and add the Angular 11 application as a client application to the web api application.
Finally, when requesting an access token, you need to set the scope to: api://{web api client id}/{scope name}
.