Blazor Server自定义身份验证时HttpContext.SignInAsync遇空值问题

核心问题原因 #

Blazor Server组件运行在SignalR长连接管道中，仅初始页面加载时存在HttpContext，后续交互无有效Http上下文，直接在组件内调用HttpContext.SignInAsync必然为空。不能通过全局存储HttpContext解决，这会引发线程安全和上下文混乱问题。

正确实现方案 #

将登录/登出逻辑移至HTTP管道（端点路由或控制器），通过Blazor组件发起HTTP请求触发认证操作，确保操作时有有效HttpContext。

1. Program.cs配置

添加Cookie认证，并定义登录/登出端点：

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();

// 配置Cookie认证（替代Identity）
builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme)
    .AddCookie(options =>
    {
        options.LoginPath = "/Login";
        options.ExpireTimeSpan = TimeSpan.FromHours(2);
        options.SlidingExpiration = true;
    });

var app = builder.Build();

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();
// 中间件顺序必须正确：先认证，再授权
app.UseAuthentication();
app.UseAuthorization();

app.MapBlazorHub();
app.MapFallbackToPage("/_Host");

// 登录端点
app.MapPost("/api/auth/login", async (HttpContext context, [FromBody] LoginRequest request) =>
{
    // 自定义用户验证逻辑（替换为你的数据源校验）
    bool isValid = request.Username == "admin" && request.Password == "123456";
    if (!isValid) return Results.Unauthorized();

    // 创建身份声明
    var claims = new List<Claim>
    {
        new Claim(ClaimTypes.Name, request.Username),
        new Claim(ClaimTypes.Role, "Admin")
    };
    var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
    
    // 此处HttpContext必然有效
    await context.SignInAsync(CookieAuthenticationDefaults.AuthenticationScheme, new ClaimsPrincipal(identity));
    return Results.Ok();
});

// 登出端点
app.MapPost("/api/auth/logout", async (HttpContext context) =>
{
    await context.SignOutAsync(CookieAuthenticationDefaults.AuthenticationScheme);
    return Results.Ok();
});

app.Run();

// 登录请求模型
public class LoginRequest
{
    public string Username { get; set; }
    public string Password { get; set; }
}

2. Login.razor组件

通过HttpClient调用登录端点，避免直接操作HttpContext：

@page "/Login"
@inject HttpClient Http
@inject NavigationManager NavManager

<div class="container mt-5">
    <h3>用户登录</h3>
    <div class="card mt-3" style="width: 30rem;">
        <div class="card-body">
            <div class="mb-3">
                <label class="form-label">用户名</label>
                <input @bind="Username" type="text" class="form-control" />
            </div>
            <div class="mb-3">
                <label class="form-label">密码</label>
                <input @bind="Password" type="password" class="form-control" />
            </div>
            @if (!string.IsNullOrEmpty(ErrorMsg))
            {
                <div class="alert alert-danger">@ErrorMsg</div>
            }
            <button @onclick="Login" class="btn btn-primary w-100">登录</button>
        </div>
    </div>
</div>

@code {
    private string Username { get; set; }
    private string Password { get; set; }
    private string ErrorMsg { get; set; }

    private async Task Login()
    {
        ErrorMsg = string.Empty;
        try
        {
            var response = await Http.PostAsJsonAsync("/api/auth/login", new { Username, Password });
            if (response.IsSuccessStatusCode)
            {
                // forceLoad强制刷新页面，确保认证状态生效
                NavManager.NavigateTo("/", forceLoad: true);
            }
            else
            {
                ErrorMsg = "用户名或密码错误";
            }
        }
        catch (Exception ex)
        {
            ErrorMsg = $"登录失败：{ex.Message}";
        }
    }
}

3. 登出组件示例

同样通过HTTP请求触发登出：

@inject HttpClient Http
@inject NavigationManager NavManager

<button @onclick="Logout" class="btn btn-outline-danger">登出</button>

@code {
    private async Task Logout()
    {
        await Http.PostAsync("/api/auth/logout", null);
        NavManager.NavigateTo("/Login", forceLoad: true);
    }
}

关键注意事项 #

• 必须保证中间件顺序：UseAuthentication()要放在UseAuthorization()之前，且在UseRouting()之后。
• 登录/登出后需用forceLoad: true刷新页面，确保Blazor组件获取最新的认证状态。
• 禁止尝试全局存储HttpContext，这会导致多请求上下文冲突的严重问题。

内容的提问来源于stack exchange，提问作者Age of Empires