Blazor WebAssembly：builder.Services.AddMsalAuthentication 抛出异常 => 无法读取未定义的属性“join”

Question

我第一次尝试使用 MSAL 授权，但在 Blazor 中失败了。任何线索（我认为这将是一个简单的答案？）

此处提供小型仓库

客户端文件：Program.cs

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("app");

builder.Services.AddMsalAuthentication(options => //THROWS EXCEPTION!!!!!
{
    options.ProviderOptions.AdditionalScopesToConsent.Add($"https://graph.microsoft.com/User.Read");
});

var baseAddress = builder.HostEnvironment.BaseAddress;
builder.Services.AddHttpClient(baseAddress, client => client.BaseAddress = new Uri(baseAddress))
        .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

意外结果：抛出异常

暴击：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 未处理的异常渲染组件：无法读取未定义的属性“join” TypeError：无法读取 Function.createUserManager 处未定义的属性“join”（https://localhost:44391/ _content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js:1:6020）在 Function.initializeCore （https://localhost:44391/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js:1 :5035 ) 在 Function.init ( https://localhost:44391/_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js:1:4575 ) 在https://localhost:44391/_framework/blazor.web assembly .js:1:9873 在 Object.beginInvokeJSFromDotNet ( https://localhost:44391/_framework/blazor.web assembly.js:1:9841 ) 的新 Promise () 在 _mono_wasm_invoke_js_marshalled ( https://localhost:44391/_framework/wasm) /dotnet.3.2.0.js:1:171294 ) 在 do_icall (wasm-function[6049]:0x10f8b1) 在 do_icall_wrapper (wasm-function[1896]:0x50b6a) 在 interp_exec_method (wasm-function[1120]:0x2588e)

Answer 1

尝试这样的事情......

builder.Services.AddMsalAuthentication(options =>
{
    ...

    options.ProviderOptions.AdditionalScopesToConsent.Add(
        "https://graph.microsoft.com/Mail.Send");
    options.ProviderOptions.AdditionalScopesToConsent.Add(
        "https://graph.microsoft.com/User.Read");
}

https://learn.microsoft.com/en-us/aspnet/core/security/blazor/web assembly/additional-scenarios?view=aspnetcore-3.1#request-additional-access-tokens

希望能帮助到你！

编辑1： 我的客户Program.cs

using System.Net.Http; using Microsoft.AspNetCore.Components.WebAssembly.Authentication;

Index.html在页面中添加以下引用

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddHttpClient("BlazorWasmAADMsal.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
                .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

            // Supply HttpClient instances that include access tokens when making requests to the server project
            builder.Services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorWasmAADMsal.ServerAPI"));

            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                options.ProviderOptions.DefaultAccessTokenScopes.Add("api://XXXXXXXXXXXXXXXXXX/API.Access");
            });

            await builder.Build().RunAsync();
        }

编辑2： 做了一些小的改变。工作项目已上传至此处。在答案中添加成功登录屏幕截图以供参考。:-)

编辑3：

应用程序需要 Azure Active Directory (AAD) Microsoft Graph API 范围来读取用户数据和发送邮件。在 Azure AAD 门户中添加 Microsoft Graph API 权限后，将在客户端应用程序中配置其他范围。

上次我错过启用以下几行，我已启用它Program.cs

<script src="_content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js"></script>

这是一个奇怪的错误，从未预料到并且见​​过。

Index.html 中 AuthenticationService.js 的引用不正确。我已将其更正为...

<script src="_content/Microsoft.Authentication.WebAssembly.Msal/AuthenticationService.js"></script>

我也在这里上传了最新的代码

该IAccessTokenProvider.RequestToken方法提供了一个重载，允许应用程序提供具有给定范围集的访问令牌。

在 Razor 组件中，您可以编写如下内容：

public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddHttpClient("BlazorWasmAADMsal.ServerAPI", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
                .AddHttpMessageHandler<BaseAddressAuthorizationMessageHandler>();

            // Supply HttpClient instances that include access tokens when making requests to the server project
            builder.Services.AddTransient(sp => sp.GetRequiredService<IHttpClientFactory>().CreateClient("BlazorWasmAADMsal.ServerAPI"));

            builder.Services.AddMsalAuthentication(options =>
            {
                builder.Configuration.Bind("AzureAd", options.ProviderOptions.Authentication);
                options.ProviderOptions.DefaultAccessTokenScopes.Add("api://XXXXXXXXXXXXXXXXXX/API.Access");
            });

            await builder.Build().RunAsync();
        }

AccessTokenResult.TryGetToken返回：

true与使用的令牌。 false如果未检索到令牌。

希望对您有帮助。