实现CompletingLoggingIn RenderFragment时RemoteAuthenticatorView报错：委托不匹配

我在VS 2022中使用MudBlazor构建.NET 8 Blazor WASM项目，开发环境运行正常，但部署到Azure Static Web Apps（SWA）后登录时触发Login-Failed错误，返回JSON格式的错误信息。为排查该问题，我尝试实现CompletingLoggingIn RenderFragment，却始终遇到**“方法重载与委托不匹配”**的错误，相关文档基本缺失。

当前代码（Authentication页面） #

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" CompletingLoggingIn="CompletingLoggingInFragment"/>
 
@code{
    [Parameter] public string Action { get; set; }

private static RenderFragment CompletingLoggingInFragment()
 {
     return builder =>
     {
         builder.OpenElement(0, "div");
         builder.AddAttribute(1, "class", "alert alert-danger");
         builder.AddAttribute(2, "role", "alert");
         builder.OpenElement(3, "p");
         builder.AddContent(4, "Logging in.");
         builder.CloseElement();
         builder.CloseElement();
       };
  }
}

.NET官方定义 #

// Summary:
//     Gets or sets a Microsoft.AspNetCore.Components.RenderFragment with the UI to
//     display while     Microsoft.AspNetCore.Components.WebAssembly.Authentication.RemoteAuthenticationActions.LogInCallback
//     is being handled.
[Parameter]
public RenderFragment CompletingLoggingIn { get; set; } = DefaultLogInCallbackFragment;

1. 修复RenderFragment委托不匹配问题 #

CompletingLoggingIn参数需要的是**RenderFragment类型的实例**，而你定义的是返回RenderFragment的方法，这是不匹配的。可以通过以下两种方式修复：

方案一：直接定义RenderFragment字段 #

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action" CompletingLoggingIn="@CompletingLoggingInFragment"/>
 
@code{
    [Parameter] public string Action { get; set; }

    private RenderFragment CompletingLoggingInFragment => builder =>
    {
        builder.OpenElement(0, "div");
        builder.AddAttribute(1, "class", "alert alert-danger");
        builder.AddAttribute(2, "role", "alert");
        builder.OpenElement(3, "p");
        builder.AddContent(4, "Logging in.");
        builder.CloseElement();
        builder.CloseElement();
    };
}

方案二：内联写法（更简洁） #

@page "/authentication/{action}"
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
<RemoteAuthenticatorView Action="@Action">
    <CompletingLoggingIn>
        <div class="alert alert-danger" role="alert">
            <p>Logging in.</p>
        </div>
    </CompletingLoggingIn>
</RemoteAuthenticatorView>
 
@code{
    [Parameter] public string Action { get; set; }
}

这种写法无需手动操作RenderTreeBuilder，符合Blazor组件的常规用法。

2. Azure SWA登录失败排查方向 #

部署后出现Login-Failed错误，建议从以下几点排查：

• 检查Azure SWA的身份验证配置：确认应用注册的重定向URI是否包含SWA的生产域名，本地开发与生产环境的URI需要分别配置。
• 查看SWA的日志：在Azure门户的SWA资源中进入“日志”选项卡，查看身份验证相关的错误详情，JSON错误信息通常包含具体失败原因（如权限不足、配置错误等）。
• 检查.NET 8的环境变量：生产环境下是否正确配置了身份验证相关参数（如Authority、ClientId等），避免沿用开发环境配置。
• 确认MudBlazor的资源加载：部署后是否正确加载了MudBlazor的样式与脚本，部分UI组件异常可能间接影响身份验证流程。

内容的提问来源于stack exchange，提问作者Samuel Cobb