I am attempting to access a secure .net core 3.1 Web API via an Angular 9 front-end. I used the Angular 9 code sample from the MSAL Angular repo.
I can successfully sign in using my own Azure AD App Registrations, but when calling my endpoint (decorated with [Authorize]), I get a 401 in my frontend, as well as in postman (expected).
My Angular Interceptor doesn't even add the bearer token in the request to the API because the getScopesForEndpoint() returns null for the request:
let scopes = this.auth.getScopesForEndpoint(req.url);
console.log(scopes);
// scopes is null here.
If I hard-code the scopes into the interceptor like this:
scopes = [
"user.read",
"openid",
"profile",
"api://[My API ID]/weatherforecast"
];
I receive this error:
InteractionRequiredAuthError: AADSTS65001: The user or administrator has not consented to use the
application with ID '[MY APP CLIENT ID]' named '[MY APP]'. Send an interactive
authorization request for this user and resource.
I followed this tutorial here: Tutorial and I configured my Azure AD to be very similar to this. The only major change was that I allowed MutiTenant instead of SingleTenant:
My Angular app doesn't seem to be registered with the API, according to the error, but I thought that is what this was in Azure AD:
Am I missing a step in allowing my app to call my API's authorized endpoint? Here is a post, Very similar to the setup that I followed Related SO Post. The only difference is that my Web API is on https://localhost:44381/weatherforecast instead of being deployed to Azure. The accepted answer doesn't seem to help with my scenario. Also another very similar post here: Related SO Post 2 but the answer talks about a Cors issue, which is not relevant.
