我已经尝试部署 Blazor PWA 两天了，到目前为止没有任何成功，如果有人知道我做错了什么，我将非常感激。 你好 我可以自己解决大部分问题，但现在使用 AAD 遇到了 CORS 问题。
这是我的项目设置：
因此，我创建了一个应用程序注册，将我的静态网站地址添加为 SPA uri，并取消选中两者隐式。 在我的 blazor 客户端 program.cs 中，我添加了以下代码来连接到 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";
});
这也很好用，我可以登录，授权查看按预期工作。
问题是当我尝试使用“使用 Azure Active Directory 登录”对 Azure 功能进行身份验证时， 我尝试了快速配置和高级配置（使用 clientId、tenantId），但是当我
可以从来源“https://login.windows.net/tenantid/oauth2/authorize ...（从“https://myfunctionstorage.azurewebsites.net/api/client/list”重定向）获取数据：/ /*****9.web.core.windows.net' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需求，请将请求模式设置为“no-cors”以在禁用 CORS 的情况下获取资源。
当然，我已经在 Azure Functions 配置上为 Blazor 客户端地址启用了 CORS，但问题似乎与登录 Windows uri 相关...
另外，如果我在应用程序注册中启用令牌 id 隐式流并在浏览器中访问登录 url，则它工作得很好。
到目前为止我能找到的所有示例都是关于 msal 1.0 和使用隐式流而不是 SPA 的应用程序注册，因此它没有帮助......
感谢您的时间和帮助。
更新： 从昨天开始我做了更多的研究，我认为这可能与我的 HTTPClient 有关，目前我使用基本的（只有一个基本地址）。
但我在一些示例中看到，当使用 AAD 来使用客户端时，它需要更多参数，例如：
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; });
需要 AuthorizationMessageHandler 吗？ 我还看到一些关于需要使用“use_impersonation”范围的参考。
使用 msal2/SPA 应用程序注册时是否也需要进行这些更改（在 HttpClient 和 use_impersonation 范围上）？
谢谢
如果想在 Blazor WebAssembly 客户端中调用 Azure AD 投影的 Azure 函数，请参考以下步骤 如果您想在Angular应用程序中调用Azure AD投影的Azure函数，请参考以下代码
创建 Azure AD 应用程序以保护功能
注册 Azure AD 应用程序。完成后，请复制应用程序（客户端）ID和目录（租户）ID
配置重定向URI。选择Web并输入<app-url>/.auth/login/aad/callback.
Enable 隐性拨款流程
Define API scope and copy it
创建客户端机密。
在应用服务应用中启用 Azure Active Directory
Configure CORS policy in Azure Function
创建客户端AD应用程序来访问功能
Code
AuthorizationMessageHandler classusing Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.WebAssembly.Authentication;
public class CustomAuthorizationMessageHandler : AuthorizationMessageHandler
{
public CustomAuthorizationMessageHandler(IAccessTokenProvider provider,
NavigationManager navigationManager)
: base(provider, navigationManager)
{
ConfigureHandler(
authorizedUrls: new[] { "<your function app url>" },
scopes: new[] { "<the function app API scope your define>" });
}
}
Program.cs. public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");
// register CustomAuthorizationMessageHandler
builder.Services.AddScoped<CustomAuthorizationMessageHandler>();
// configure httpclient
// call the following code please add packageMicrosoft.Extensions.Http 3.1.0
builder.Services.AddHttpClient("ServerAPI", client =>
client.BaseAddress = new Uri("<your function app url>"))
.AddHttpMessageHandler<CustomAuthorizationMessageHandler>();
// register the httpclient
builder.Services.AddScoped(sp => sp.GetRequiredService<IHttpClientFactory>()
.CreateClient("ServerAPI"));
// configure Azure AD auth
builder.Services.AddMsalAuthentication(options =>
{
builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
options.ProviderOptions.DefaultAccessTokenScopes.Add("<the function app API scope your define>");
});
await builder.Build().RunAsync();
}
@page "/fetchdata"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@inject HttpClient Http
<h1>Call Azure Function</h1>
<p>This component demonstrates fetching data from the server.</p>
<p>Result: @forecasts</p>
<button class="btn btn-primary" @onclick="CallFun">Call Function</button>
@code {
private string forecasts;
protected async Task CallFun()
{
forecasts = await Http.GetStringAsync("api/http");
}
}