.NET 8 Blazor Web App(InteractiveServer)无Identity Cookie认证HttpContext为空问题

我是一名.NET初级开发者，首次尝试在采用全局交互式InteractiveServerRenderMode的Blazor Web App中实现无Identity的认证与授权功能。按照教程步骤操作后，发现HttpContext始终返回null，导致认证功能无法达到预期效果。

登录页面采用MudBlazor搭建，代码如下：

<MudGrid Justify="Justify.Center" AlignItems="AlignItems.Center" MaxWidth=MudBlazor.MaxWidth.False Style="height: calc(100vh - 64px); display: flex; overflow: -moz-hidden-unscrollable;">
    <MudHidden Breakpoint="Breakpoint.MdAndUp" Invert="true">
        <MudItem xs="12" md="7" lg="7" Style="background-image: url('img/scrapitem.jpg'); background-size: cover; background-position: center; height: 100%"></MudItem>
    </MudHidden> 

    <MudItem xs="12" md="5" lg="5" Class="d-flex justify-center align-center" Style="height: 100%">
        <MudCard Elevation="25" Class="rounded-lg pa-4" Style="width: 100%; max-width: 500px">
            <MudCardHeader>
                <CardHeaderContent>
                    <MudText Typo="Typo.h6" Style="color: black;" GutterBottom="true">Log Masuk /<MudElement HtmlTag="i">Login</MudElement></MudText>
                </CardHeaderContent>
            </MudCardHeader>
            <MudCardContent>
                <EditForm Model="user" OnValidSubmit="Authenticate" FormName="LoginForm">
                    <DataAnnotationsValidator />
                    <MudTextField Label="Email" Required="true" @bind-Value="user.EMAIL" For="@(() => user.EMAIL)" />
                    <MudTextField Label="Password" InputType="InputType.Password" Required="true" @bind-Value="user.PASSWORD" For="@(() => user.PASSWORD)" />
                </EditForm>
            </MudCardContent>
            <MudCardActions Class="d-flex justify-between">
                <MudButton ButtonType="MudBlazor.ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" @onclick="Authenticate">Login</MudButton>
                <MudButton Variant="Variant.Filled" Color="Color.Secondary" Class="ml-2" @onclick="SignUp">Sign Up</MudButton>
            </MudCardActions>
            <MudCardActions>
                <MudButton Variant="Variant.Text" Color="Color.Tertiary">Forgot Password?</MudButton>
            </MudCardActions>
        </MudCard>
    </MudItem>
</MudGrid>

@code部分代码如下：

@code {
    [CascadingParameter]
    public HttpContext? httpContext { get; set; }

    [SupplyParameterFromForm]
    public USER user { get; set; } = new();

    private bool success;
    private string errorMessage;

    private async Task Authenticate()
    {
        var authenticatedUser = await loginService.AuthenticateAsync(user.EMAIL, user.PASSWORD);

        if (authenticatedUser is null || authenticatedUser.PASSWORD != user.PASSWORD)
        {
            errorMessage = "Invalid username or password";
            return;
        }

        var claims = new List<Claim>
        {
            new Claim(ClaimTypes.Name, authenticatedUser.EMAIL),
            new Claim(ClaimTypes.Role, authenticatedUser.ROLE)
        };

        //Add policies
        var userPolicies = await dataContext.USER_POLICY.Where(x => x.USER_ID == authenticatedUser.ID && x.IS_ENABLED).ToListAsync();
        foreach (var userPolicy in userPolicies)
            claims.Add(new Claim(userPolicy.USERPOLICY, "true"));

        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
        var principal = new ClaimsPrincipal(identity);
        await httpContext!.SignInAsync(principal);

        if(authenticatedUser.ROLE == "CommonUser")
        {
            navigationManager.NavigateTo("/dashboardCompany");
        }
        else if (authenticatedUser.ROLE == "Enforcer")
        {
            navigationManager.NavigateTo("/dashboardAdmin");
        }
    }

    private async Task SignUp()
    {
        navigationManager.NavigateTo("/signup");
    }
}

为什么HttpContext会是null？ #

在InteractiveServerRenderMode模式下，Blazor组件通过SignalR与客户端维持长连接运行，组件的执行上下文和传统HTTP请求上下文完全分离。[CascadingParameter]提供的HttpContext仅在初始HTTP请求渲染（比如SSR阶段）时可用，后续的交互式操作（比如按钮点击）都在SignalR连接中执行，此时没有可用的HttpContext。

正确的实现方式 #

1. 确保Cookie认证配置正确 #

在Program.cs中添加并配置Cookie认证：

builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.LoginPath = "/login";
        options.LogoutPath = "/logout";
        options.Cookie.HttpOnly = true;
        options.Cookie.SecurePolicy = CookieSecurePolicy.Always; // 生产环境启用，开发环境可设为SameAsRequest
    });

builder.Services.AddAuthorization();

// 注意中间件顺序，必须在UseRouting之后，UseEndpoints之前
app.UseAuthentication();
app.UseAuthorization();

2. 创建API端点处理登录逻辑 #

不要在Blazor组件中操作HttpContext，改用API端点处理认证，端点内可以正常访问HttpContext：
在Program.cs中添加最小API：

// 定义登录请求模型
public class LoginRequest
{
    public string Email { get; set; } = string.Empty;
    public string Password { get; set; } = string.Empty;
}

app.MapPost("/api/login", async (
    [FromBody] LoginRequest request,
    ILoginService loginService,
    DataContext dataContext,
    HttpContext httpContext) =>
{
    var authenticatedUser = await loginService.AuthenticateAsync(request.Email, request.Password);

    if (authenticatedUser == null || authenticatedUser.PASSWORD != request.Password)
    {
        return Results.BadRequest("Invalid username or password");
    }

    var claims = new List<Claim>
    {
        new Claim(ClaimTypes.Name, authenticatedUser.EMAIL),
        new Claim(ClaimTypes.Role, authenticatedUser.ROLE)
    };

    var userPolicies = await dataContext.USER_POLICY
        .Where(x => x.USER_ID == authenticatedUser.ID && x.IS_ENABLED)
        .ToListAsync();
    foreach (var userPolicy in userPolicies)
        claims.Add(new Claim(userPolicy.USERPOLICY, "true"));

    var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
    var principal = new ClaimsPrincipal(identity);
    await httpContext.SignInAsync(principal);

    return Results.Ok();
});

3. 修改Blazor组件调用API #

更新登录组件的@code部分，改为调用API完成登录：

@code {
    [Inject]
    private HttpClient HttpClient { get; set; } = default!;

    [Inject]
    private NavigationManager NavigationManager { get; set; } = default!;

    public USER user { get; set; } = new();

    private string errorMessage = string.Empty;

    private async Task Authenticate()
    {
        errorMessage = string.Empty;
        try
        {
            var response = await HttpClient.PostAsJsonAsync("/api/login", new
            {
                Email = user.EMAIL,
                Password = user.PASSWORD
            });

            if (!response.IsSuccessStatusCode)
            {
                errorMessage = await response.Content.ReadAsStringAsync();
                return;
            }

            // 强制刷新页面，让AuthenticationStateProvider获取最新认证状态
            NavigationManager.NavigateTo(NavigationManager.Uri, forceLoad: true);
        }
        catch (Exception ex)
        {
            errorMessage = $"登录失败: {ex.Message}";
        }
    }

    private void SignUp()
    {
        NavigationManager.NavigateTo("/signup");
    }
}

关键注意点 #

• 登录成功后必须用forceLoad: true刷新页面，因为交互式模式下AuthenticationStateProvider不会自动感知Cookie变化，强制刷新会触发新的HTTP请求，加载最新的认证状态。
• 不要在InteractiveServerRenderMode的组件中直接尝试访问HttpContext，这是Blazor的设计特性，不是bug。

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