使用 .NET 8 对 Blazor 服务器端的双因素身份验证问题进行故障排除

解决 Blazor 登录工作流中的双因素身份验证问题

具有增强型 2FA 处理功能的 Blazor 服务器端登录流程（静态模式）

@page "/Account/LoginWith2fa"
@using System.ComponentModel.DataAnnotations
@using Microsoft.AspNetCore.Identity
@using BrokerWeb.Server.Data
@using BrokerWeb.Server.Data.Identity
@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager
@inject IdentityRedirectManager RedirectManager
@inject ILogger<LoginWith2fa> Logger
<PageTitle>Two-factor authentication</PageTitle>
<EditForm FormName="MFAAuthentication" Model="Input" OnValidSubmit="this.OnValidSubmitAsync">
<MudPaper Class="pa-6" Elevation="15" MaxWidth="500px" Style="margin:auto; margin-top:50px;">
<MudCard>
<MudCardContent>
<MudText Typo="Typo.h4" Align="Align.Center">Two-factor authentication</MudText>
<MudDivider Class="mb-4" />
<MudAlert Severity="MudBlazor.Severity.Info" Dense="true">
<!-- Notification for 2FA code input -->
<DataAnnotationsValidator />
<ValidationSummary class="text-danger" role="alert" />
<MudTextField Label="MFA" @bind-Value="Input.TwoFactorCode" For="@(() => Input.TwoFactorCode)"
Margin="Margin.Dense" Variant="Variant.Outlined" AdornmentColor="Color.Primary"
Adornment="Adornment.Start" T="string" MaxLength="6" />
<MudText Error="@ErrorMessage" Class="text-danger mb-2" />
<MudCheckBox @bind-Checked="@Input.RememberMachine" Label="Lembre-se de mim" T="bool" />
</MudCardContent>
<MudCardActions>
<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Filled" Color="Color.Primary" FullWidth="true">
Log In
</MudButton>
</MudCardActions>
</MudCard>
</MudPaper>
</EditForm>
@code {
private string ErrorMessage = string.Empty;
private ApplicationUser user = default!;
private InputModel Input { get; set; } = new InputModel();
[SupplyParameterFromQuery]
private string ReturnUrl { get; set; }
[SupplyParameterFromQuery]
private bool RememberMe { get; set; }
protected override async Task OnInitializedAsync()
{
user = await SignInManager.GetTwoFactorAuthenticationUserAsync() ?? throw new InvalidOperationException("Unable to load 2FA user.");
}
private async Task OnValidSubmitAsync()
{
var userId = await UserManager.GetUserIdAsync(user);
try
{
if (string.IsNullOrEmpty(Input.TwoFactorCode)) throw new ArgumentException("No authentication code provided!");
var authCode = Input.TwoFactorCode!.Replace(" ", string.Empty).Replace("-", string.Empty);
var result = await SignInManager.TwoFactorAuthenticatorSignInAsync(authCode, RememberMe, Input.RememberMachine);
if (result.Succeeded)
{
Logger.LogInformation("User '{UserId}' logged in with 2fa!", userId);
RedirectManager.RedirectTo(ReturnUrl);
}
else if (result.IsLockedOut)
{
Logger.LogWarning("User '{UserId}' account locked!", userId);
RedirectManager.RedirectTo("Account/Lockout");
}
else throw new ArgumentException("Invalid authentication code!");
}
catch (Exception ex)
{
Logger.LogWarning(ex.Message);
ErrorMessage = ex.Message;
}
}
private sealed class InputModel
{
[Required]
public string TwoFactorCode { get; set; }
public bool RememberMachine { get; set; }
}
}

在交互模式下测试 2FA 组件

Blazor 身份验证流程的交互模式解决方案 (InteractiveServer)

@code {
private async Task InteractiveTwoFactorLoginAsync()
{
try
{
var result = await SignInManager.TwoFactorAuthenticatorSignInAsync(Input.TwoFactorCode, RememberMe, Input.RememberMachine);
if (result.Succeeded)
{
Logger.LogInformation("Login successful for 2fa.");
RedirectManager.RedirectTo(ReturnUrl);
}
else if (result.IsLockedOut)
{
Logger.LogWarning("Account locked.");
RedirectManager.RedirectTo("/Account/Lockout");
}
else
{
Logger.LogWarning("Invalid code.");
ErrorMessage = "Invalid 2FA code";
}
}
catch (InvalidOperationException ex)
{
Logger.LogError("Login error: " + ex.Message);
}
}

有关 Blazor 服务器端 2FA 身份验证的常见问题

1. 目的是什么 @inject 在 Blazor 组件中？
2. 在布拉佐尔， @inject 用于注入依赖项，例如 SignInManager 直接进入组件，使其能够访问身份验证和用户管理服务。
3. 怎么样 TwoFactorAuthenticatorSignInAsync 提高安全性？
4. 此方法使用 2FA 代码对用户进行身份验证，通过要求基于代码的验证来成功登录，从而增加了额外的安全层。
5. 什么是 SupplyParameterFromQuery 属性吗？
6. SupplyParameterFromQuery 将 URL 查询字符串参数绑定到组件属性，这有助于通过直接从 URL 设置值来管理状态。
7. 为什么 Blazor 中会出现“响应已开始”错误？
8. 当服务器仍在处理初始响应时触发重定向时，可能会发生此错误，通常是由于重叠的生命周期事件造成的。
9. 怎么可以 OnValidSubmit 改进 Blazor 中的表单处理？
10. 使用 OnValidSubmit 允许开发人员在提交之前验证表单的输入，有助于防止错误并确保表单数据处理的安全。
11. 是 @page 每个组件都必需吗？
12. 是的， @page 定义每个组件的路由 URL，这对于 Blazor 应用程序内的路由至关重要。
13. 的作用是什么 RedirectManager 在认证中？
14. RedirectManager 允许在登录后重定向用户，这对于将用户发送到安全页面或处理锁定情况至关重要。
15. 为什么我们需要 DataAnnotationsValidator 以形式？
16. DataAnnotationsValidator 检查验证注释，确保每个输入在表单提交之前满足指定的约束。
17. 能 InteractiveServer 模式解决 Blazor 中的所有生命周期问题吗？
18. 并非总是如此。尽管 InteractiveServer 虽然有助于某些数据绑定场景，但它也会在服务器-客户端数据处理中引入额外的复杂性。
19. 怎么样 ValidationSummary Blazor 表单提供帮助吗？
20. ValidationSummary 以结构化格式显示验证错误，通过在 UI 中显示详细的错误消息来增强用户体验。

结束 Blazor 中的身份验证过程

在 Blazor 应用程序中处理双因素身份验证需要注意组件生命周期，尤其是在服务器端应用程序中。通过正确管理每个步骤（包括数据绑定和验证），开发人员可以确保用户登录获得安全、流畅的体验。

使用类似的工具 TwoFactorAuthenticatorSignInAsync 和 有效提交时 同时仔细监控状态变化可以消除常见问题。这种方法不仅可以保护登录过程的安全，还可以提供开发人员和用户都可以信赖的无缝身份验证体验。 🔐