연습 - Multi-Factor Authentication 구성 - Training

8분

이전 단원에서는 ASP.NET Core ID가 MFA(다단계 인증)를 위해 TOTP(시간 제약이 있는 일회성 암호)를 구현하는 방법을 알아보았습니다. 이 단원에서는 등록 키가 포함된 QR 코드를 제공하도록 기존 Authenticator 앱 구성 양식을 사용자 지정합니다.

QR 코드 생성 중

QR 코드를 생성하는 전략에는 여러 가지가 있습니다. 설명서의 예제에서는 클라이언트 쪽 JavaScript 라이브러리를 사용합니다. 그러나 이 단원에서 타사 NuGet 패키지는 서버의 C#으로 QR 코드를 생성하는 데 사용됩니다. 결과 QR 코드 이미지는 base-64로 인코딩된 문자열로 HTML 자리 표시자 요소에 삽입됩니다.

QR 코드 서비스 추가

인증자 구성 앱 양식에서 QR 코드를 생성하는 데 필요한 모든 항목을 빌드해 보겠습니다.

터미널 창에서 QRCoder NuGet 패키지를 설치합니다.
```
dotnet add package QRCoder --version 1.4.3
```
탐색기 창에서 Services 폴더를 마우스 오른쪽 단추로 클릭하고 QRCodeService.cs라는 새 파일을 추가합니다. 다음 코드를 추가합니다.
```
using QRCoder;

namespace RazorPagesPizza.Services;
public class QRCodeService
{
    private readonly QRCodeGenerator _generator;

    public QRCodeService(QRCodeGenerator generator)
    {
        _generator = generator;
    }

    public string GetQRCodeAsBase64(string textToEncode)
    {
        QRCodeData qrCodeData = _generator.CreateQrCode(textToEncode, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new PngByteQRCode(qrCodeData);

        return Convert.ToBase64String(qrCode.GetGraphic(4));
    }
}
```
위의 코드는
- 생성자 주입을 사용하여 라이브러리 QRCodeGenerator 클래스의 인스턴스에 대한 액세스 권한을 얻습니다.
- base-64로 인코딩된 문자열을 반환하는 GetQRCodeAsBase64 메서드를 노출합니다. QR 코드 차원은 GetGraphic에 전달된 정수 값에 따라 결정됩니다. 이 경우 생성된 QR 코드는 4픽셀 제곱 크기의 블록으로 구성됩니다.

Program.cs에서 다음과 같이 강조 표시된 줄을 추가합니다.

using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
using Microsoft.AspNetCore.Identity.UI.Services;
using RazorPagesPizza.Services;
using QRCoder;

var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection");
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<RazorPagesPizzaUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddTransient<IEmailSender, EmailSender>();
builder.Services.AddSingleton(new QRCodeService(new QRCodeGenerator()));

var app = builder.Build();

QRCodeService는 Program.cs 내의 IoC 컨테이너에서 싱글톤 서비스로 등록됩니다.

Multi-Factor Authentication 사용자 지정

이제 QR 코드를 생성할 수 있으므로 인증자 구성 앱 양식에 QR 코드를 포함할 수 있습니다.

Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs을 열고 다음과 같이 변경합니다.

다음 속성을 EnableAuthenticatorModel 클래스에 추가하여 QR 코드의 base-64 문자열 표현을 저장합니다.

public class EnableAuthenticatorModel : PageModel
{
    private readonly UserManager<RazorPagesPizzaUser> _userManager;
    private readonly ILogger<EnableAuthenticatorModel> _logger;
    private readonly UrlEncoder _urlEncoder;

    public string QrCodeAsBase64 { get; set; }

OnGetAsync 페이지 처리기에 강조 표시된 변경 내용을 통합합니다.

public async Task<IActionResult> OnGetAsync([FromServices] QRCodeService qrCodeService)
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
        NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    await LoadSharedKeyAndQrCodeUriAsync(user);
    QrCodeAsBase64 = qrCodeService.GetQRCodeAsBase64(AuthenticatorUri);

    return Page();
}

위의 페이지 처리기에서 매개 변수 주입은 QRCodeService 싱글톤 서비스에 대한 참조를 제공합니다.

다음 using 문을 파일 맨 위에 추가하여 QRCodeService에 대한 참조를 확인합니다. 변경 내용을 저장합니다.
```
using RazorPagesPizza.Services;
```

강조 표시된 변경 내용을 GenerateQrCodeUri 메서드에 통합합니다.

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        CultureInfo.InvariantCulture,
        AuthenticatorUriFormat,
        _urlEncoder.Encode("RazorPagesPizza"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

그러면 TOTP 앱에서 키의 표시 이름이 설정됩니다.

Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml에서 강조 표시된 다음 내용과 같이 변경하고 저장합니다.

<li>
    <p>Scan the QR Code or enter this key <kbd>@Model.SharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>
    <div id="qrCode">
        <img alt="embedded QR code" src="data:image/png;base64,@Model.QrCodeAsBase64" />
    </div>
    <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
</li>

위의 태그는 base-64로 인코딩된 이미지를 페이지에 포함합니다.

Multi-factor Authentication 테스트

인증자 구성 앱 양식에서 QR 코드에 필요한 모든 변경 내용을 만들었습니다. 이제 MFA 기능을 쉽게 테스트할 수 있습니다.

모든 변경 내용을 저장했는지 확인합니다.
dotnet run을(를) 사용하여 앱을 빌드하고 실행합니다.
아직 로그인하지 않은 경우 사이트로 이동하여 등록된 사용자로 로그인합니다. Hello, [First name] [Last name]! 링크를 선택하여 프로필 관리 페이지로 이동한 다음, 2단계 인증을 선택합니다.
Authenticator 앱 추가 단추를 선택합니다.
화면의 지시에 따라 이 사용자에 대한 Authenticator 앱을 등록하고 확인합니다.

예를 들어, Android에서 Microsoft Authenticator를 사용하는 경우 다음 단계에 따라 앱에 계정을 추가합니다.
1. Microsoft Authenticator 앱을 엽니다.
2. 오른쪽 위에서 꼬치형 메뉴(세로 줄임표)를 선택합니다.
3. 계정 추가를 선택합니다.
4. 다른 계정(Google, Facebook 등)을 선택합니다.
5. 표시된 QR 코드를 검색합니다.
확인 코드 텍스트 상자에 TOTP 앱에서 제공하는 확인 코드를 입력합니다.
확인을 선택합니다.

성공적으로 확인되면 페이지에는 Authenticator 앱이 확인됨 배너와 일부 복구 코드가 표시됩니다.
VS Code SQL Server 탭에서 RazorPagesPizza 데이터베이스를 마우스 오른쪽 단추로 클릭하고 새 쿼리를 선택합니다. 다음 쿼리를 입력하고 Ctrl+Shift+E를 눌러 실행합니다.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
로그인한 사용자의 경우 출력에 TwoFactorEnabled 열이 1로 표시됩니다. 등록된 다른 사용자에 대해 Multi-Factor Authentication을 사용하도록 설정하지 않았기 때문에 레코드의 열 값은 0입니다.
웹앱에서 로그아웃을 선택한 다음, 동일한 사용자로 다시 로그인합니다.
Authenticator 코드 텍스트 상자에 TOTP Authenticator 앱의 확인 코드를 입력합니다. 로그인 단추를 선택합니다.
Hello, [First name] [Last name]!을 선택합니다. 그런 다음, 2단계 인증 탭을 선택합니다.

Microsoft Authenticator가 설정되었으므로 다음 단추가 표시됩니다.
- 2FA 사용 안 함
- 복구 코드 다시 설정
- Authenticator 앱 설정
- Authenticator 앱 다시 설정
VS Code 터미널 창에서 Ctrl+C를 눌러 앱을 중지합니다.

요약

이 단원에서는 인증자 구성 앱 양식에 QR 코드를 생성하는 기능을 추가했습니다. 다음 단원에서는 ID를 사용하여 클레임을 저장하고 권한 부여 정책을 적용하는 방법을 알아볼 수 있습니다.

계속

연습 - Multi-Factor Authentication 구성

QR 코드 생성 중

QR 코드 서비스 추가

Multi-Factor Authentication 사용자 지정

Multi-factor Authentication 테스트

요약

피드백