Call from Blazor an API behind Azure API Management with validate-jwt - jwt

Question

Behind an Azure API Management I have a bunch of APIs. All my applications are using an Identity Server 4 to validate and authenticate users and applications. When a request to the API comes, I like to validate the jwt token before proceeding.
For this reason , in the API Management, under the Security section, I selected OpenID connect and then my Identity Server.
In the design of the APIs, I added the validation-jwt
and the policy is like that
<policies>
<inbound>
<validate-jwt header-name="Authorization"
failed-validation-httpcode="401" require-scheme="Bearer"
output-token-variable-name="jwt">
<openid-config url="https://idsrv4/.well-known/openid-configuration" />
</validate-jwt>
<cors>
<allowed-origins>
<origin>*</origin>
</allowed-origins>
<allowed-methods preflight-result-max-age="300">
<method>GET</method>
<method>POST</method>
</allowed-methods>
<allowed-headers>
<header>*</header>
</allowed-headers>
<expose-headers>
<header>*</header>
</expose-headers>
</cors>
<base />
</inbound>
<backend>
<base />
</backend>
<outbound>
<base />
</outbound>
<on-error>
<base />
</on-error>
</policies>
Then, in the Program.cs of my Blazor WebAssembly, I added the following code
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");
string apiEndpoint = builder.Configuration["Api:EndpointsUrl"];
string apiScope = builder.Configuration["Api:Scope"];
builder.Services.AddScoped<APIService>();
#region Configure HTTP Client
builder.Services.AddHttpClient("companiesAPI", cl =>
{
cl.BaseAddress = new Uri(apiEndpoint);
})
.AddHttpMessageHandler(sp =>
{
var handler = sp.GetService<AuthorizationMessageHandler>()
.ConfigureHandler(
authorizedUrls: new[] { "https://localhost:7241" },
scopes: new[] { "220005_api" }
);
return handler;
});
builder.Services.AddScoped(sp => sp.GetService<IHttpClientFactory>().CreateClient("companiesAPI"));
#endregion
#region Configure Authentication and Authorization
builder.Services.AddOidcAuthentication(options =>
{
builder.Configuration.Bind("oidc", options.ProviderOptions);
options.UserOptions.RoleClaim = "role";
})
.AddAccountClaimsPrincipalFactory<MultipleRoleClaimsPrincipalFactory<RemoteUserAccount>>();
builder.Services.AddAuthorizationCore();
#endregion
await builder.Build().RunAsync();
Finally, in the API service, I read the API.
public class APIService
{
private readonly HttpClient _httpClient;
private readonly JsonSerializerOptions _options;
public APIService(HttpClient httpClient)
{
_httpClient = httpClient;
_options = new JsonSerializerOptions { PropertyNameCaseInsensitive = true };
}
public async Task<APIResponse> GetAttributeAsync(APIRequest apirequest)
{
try
{
HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Post, $"typing");
var content =
new StringContent(JsonSerializer.Serialize(apirequest),
Encoding.UTF8, "application/json");
request.Content = content;
HttpResponseMessage responseMessage;
responseMessage = await _httpClient.SendAsync(request);
responseMessage.EnsureSuccessStatusCode();
if (responseMessage.IsSuccessStatusCode)
{
var responseContent = await responseMessage.Content.ReadAsStringAsync();
return JsonSerializer.Deserialize<APIResponse>(responseContent, _options);
}
else
return new APIResponse() { Success = false };
}
catch (Exception ex)
{
return new APIResponse() { Success = false };
}
}
}
Now, if I call the API, I have the following error:
TypeError: Failed to fetch
If from the API Management, I remove the validate-jwt, the application calls the API and receives the answer with no issues.
What is the correct configuration for the API Management? What is the correct code in the Blazor project to pass the jwt token?

Answer 1

In your application code you should get the JWT like this
// This gets the UserToken (JWT) to get data from Microsoft Graph for the scopes: User.Read & Mail.Read
// scope for API: API/GUID [YOUR API-URL-FROM-YOUR-APPREGISTRATION-IN-AAD]
var token = await _tokenAcquisition.GetAccessTokenForUserAsync(new string[] { "User.Read", "Mail.Read", "api://12345678-1234-1234-1234-123456789012/products" });
In the APIM => In the Inbound you are missing the required claims
<inbound>
<validate-jwt header-name="Authorization"
failed-validation-httpcode="401"
failed-validation-error-message="Unauthorized. Access token is missing or invalid!!!">
<openid-config url="https://login.microsoftonline.com/11a14169-89cc-44e8-95d7-xxxxxxxxxxxx/v2.0/.well-known/openid-configuration" />
<required-claims>
<claim name="aud">
<value>{client-id-of-Client-API-1-on-App-Registration}</value>
</claim>
</required-claims>
Check your JWT over here to set the right claim for 'aud' in your APIM
Have a look at this question for more code details. The code is GOOD!
How do I get the JWT in a Blazor Server App with Microsoft Identity Platform (AAD) to make external API-Management call and authorize with the jwt