.NET 8을 사용하는 Blazor 서버 측의 2단계 인증 문제 해결

Blazor 로그인 워크플로의 2단계 인증 문제 해결

향상된 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 애플리케이션에서 2단계 인증을 처리하려면 특히 서버 측 애플리케이션에서 구성 요소 수명 주기에 주의가 필요합니다. 데이터 바인딩 및 유효성 검사를 포함한 각 단계를 적절하게 관리함으로써 개발자는 사용자 로그인에 대한 안전하고 원활한 경험을 보장할 수 있습니다.

다음과 같은 도구를 사용하여 TwoFactorAuthenticatorSignInAsync 그리고 유효한제출시 상태 변경을 주의 깊게 모니터링하면 일반적인 문제를 제거할 수 있습니다. 이 접근 방식은 로그인 프로세스를 보호할 뿐만 아니라 개발자와 사용자 모두가 신뢰할 수 있는 원활한 인증 환경을 제공합니다. 🔐