[Blazor WASM] calling Azure Function generate CORS error with AAD

[christianMeurrens]

Hello all,

I’ve been trying to deploy my Blazor App for 2 days without any success so far, if someone has an idea of what I’m doing wrong I would be really grateful.

I could resolve most of my issues by myself but I’m now stuck on a CORS problem using AAD.

Here’s my project setup:
-Blazor webassembly client hosted on Static Website Storage (works great), Net 5
-AzureFunctions connected to an Azure Sql Server database (works great with anonymous authentication)
-Azure Active Directory I want to use to authenticate the users. (protecting both the blazor app and the functions)

So I’ve created an App registration, added my static web site address as SPA uri and uncheck both implicit.
In my blazor client, program.cs, I’ve added the following code to connect to AAD:

builder.Services.AddMsalAuthentication(options =>
{
builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication); //contains clientId, Authority
options.ProviderOptions.DefaultAccessTokenScopes.Add("https://graph.microsoft.com/User.Read");
options.ProviderOptions.LoginMode = "redirect";
});

That works great too, I can login, authorize view works as expected.

The problem is when I try to authenticate Azure functions with «Login with Azure Active Directory», If I select the Express method with my App registration, any call will fail with an error code 500, switching to advanced, I notice that the clientId is correct but the tenant Id is different from what it should be (no idea why), if I update it and call again any function I get the following classic error:

Access to fetch at 'https://login.windows.net/tenantid/oauth2/authorize ... (redirected from 'https://myfunctionstorage.azurewebsites.net/api/client/list') from origin 'https://*****9.web.core.windows.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I have of course enabled CORS for my Blazor Client Address on Azure Functions configuration but the problem seems to be about the login windows uri...

What am I missing ? some authentication code in the azure function startup (I don’t have any), some expose Api configuration ?

Thank you for your time and your help.

[christianMeurrens]

Hello,

I’ve done more researches since yesterday and I think it could by related to my HTTPClient, currently I use the basic one (with just a base adress).

But I’ve seen on some example that when using the Client using AAD it needs more parameters, for example:
builder.Services.AddHttpClient("companiesAPI", cl => { cl.BaseAddress = new Uri("https://localhost:5001/api/"); }) .AddHttpMessageHandler(sp => { var handler = sp.GetService<AuthorizationMessageHandler>() .ConfigureHandler( authorizedUrls: new[] { "https://localhost:5001" }, scopes: new[] { "companyApi" } ); return handler; });

Is that AuthorizationMessageHandler needed ?
Also I see some references to the need of using the «use_impersonation» scope.

Are those changes (on HttpClient and the use_impersonation scope) also required when using msal2/SPA app registration ?

Thank you