Ćwiczenie — konfigurowanie uwierzytelniania wieloskładnikowego

10 min

W poprzedniej lekcji przedstawiono, jak ASP.NET Core Identity implementuje jednorazowe hasło (TOTP) na potrzeby uwierzytelniania wieloskładnikowego (MFA). W tej lekcji dostosujesz istniejący formularz Konfigurowanie aplikacji authenticator, aby podać kod QR zawierający klucz rejestracji.

Generowanie kodów QR

Istnieje wiele strategii generowania kodu QR. Przykład w dokumentacji używa biblioteki JavaScript po stronie klienta. Jednak w tej lekcji pakiet NuGet innej firmy jest używany do generowania kodu QR za pomocą języka C# na serwerze. Otrzymany obraz kodu QR jest wstrzykiwany do elementu zastępczego HTML jako ciąg z kodowaniem base-64.

Dodawanie usługi kodu QR

Skompilujmy wszystko, czego potrzebujesz, aby wygenerować kody QR w formularzu Konfigurowanie aplikacji authenticator.

W okienku terminalu QRCoder zainstaluj pakiet NuGet:
```
dotnet add package QRCoder --version 1.6.0
```
W okienku Eksplorator kliknij prawym przyciskiem myszy folder Usługi i dodaj nowy plik o nazwie QRCodeService.cs. Dodaj następujący kod:
```
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));
    }
}
```
Powyższy kod ma następujące działanie:
- Używa iniekcji konstruktora, aby uzyskać dostęp do wystąpienia klasy biblioteki QRCodeGenerator.
- Uwidacznia metodę GetQRCodeAsBase64 zwracającą ciąg z kodowaniem base-64. Przekazana wartość całkowita określa GetGraphic wymiary kodu QR. W takim przypadku wygenerowany kod QR składa się z bloków o rozmiarze czterech pikseli kwadratowych.

W Program.cs dodaj wyróżnione wiersze:

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();

QRCodeServicejest rejestrowana jako pojedyncza usługa w kontenerze IoC w Program.cs.

Dostosowywanie uwierzytelniania wieloskładnikowego

Teraz, po wygenerowaniu kodów QR, możesz osadzić kod QR w formularzu Konfigurowanie aplikacji authenticator.

Otwórz Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs plik i wprowadź następujące zmiany:

Aby zapisać reprezentację ciągu base-64 kodu QR, dodaj następującą EnableAuthenticatorModel właściwość do klasy :

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

    public string QrCodeAsBase64 { get; set; }

Uwzględnij wyróżnione zmiany w procedurze obsługi strony OnGetAsync:

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

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

    return Page();
}

W poprzedniej procedurze obsługi strony iniekcja parametrów zapewnia odwołanie do pojedynczej usługi QRCodeService.

Aby rozwiązać problem z odwołaniem do QRCodeServicepliku , dodaj następującą using instrukcję na początku pliku. Zapisz zmiany.
```
using RazorPagesPizza.Services;
```

Uwzględnij wyróżnioną zmianę w metodzie GenerateQrCodeUri .

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

Spowoduje to ustawienie nazwy wyświetlanej klucza w aplikacji TOTP.

W pliku Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml wprowadź następujące wyróżnione zmiany, po czym zapisz:

<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 class="alert alert-info">Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.</div>
    <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>

Powyższy kod umożliwia osadzenie obrazu z kodowaniem base-64 na stronie.

Testowanie uwierzytelniania wieloskładnikowego

Wszystkie zmiany wymagane do kodu QR wprowadzono w formularzu Konfigurowanie aplikacji wystawcy uwierzytelniania. Teraz możesz łatwo przetestować funkcje uwierzytelniania wieloskładnikowego.

Upewnij się, że wszystkie zmiany zostały zapisane.
Skompiluj i uruchom aplikację za pomocą polecenia dotnet run.
Przejdź do witryny i zaloguj się przy użyciu zarejestrowanego użytkownika, jeśli jeszcze nie zalogowałeś się. Wybierz pozycję Hello, [Imię] [Nazwisko]! link, aby przejść do strony zarządzania profilami, a następnie wybierz pozycję Uwierzytelnianie dwuskładnikowe.
Wybierz przycisk Add authenticator app (Dodaj aplikację wystawcy uwierzytelnienia).
Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zarejestrować i zweryfikować aplikację wystawcy uwierzytelnienia dla tego użytkownika.

Na przykład przy użyciu aplikacji Microsoft Authenticator w systemie Android wykonaj następujące kroki, aby dodać konto do aplikacji:
1. Otwórz aplikację Microsoft Authenticator.
2. Wybierz menu kebabowe (wielokropek pionowy) w prawym górnym rogu.
3. Wybierz pozycję Add account (Dodaj konto).
4. Wybierz pozycję Other account (Google, Facebook, etc.) (Inne konto [Google, Facebook itp.]).
5. Zeskanuj kod QR zgodnie z podanym opisem.
Wprowadź kod weryfikacyjny podany w aplikacji TOTP w polu tekstowym Verification Code (Kod weryfikacyjny).
Wybierz pozycję Verify (Weryfikuj).

Po pomyślnej weryfikacji na stronie zostaną wyświetlone baner Your authenticator app has been verified (Twoja aplikacja wystawcy uwierzytelnienia została zweryfikowana) i kody odzyskiwania.
Na karcie SQL Server w programie VS Code kliknij prawym przyciskiem myszy bazę danych RazorPagesPizza i wybierz pozycję Nowe zapytanie. Wprowadź następujące zapytanie i naciśnij Ctrl+Shift+E, aby go uruchomić.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
W przypadku zalogowanych użytkowników dane wyjściowe pokazują, że kolumna TwoFactorEnabled jest równa 1. Ponieważ uwierzytelnianie wieloskładnikowe nie jest włączone dla innego zarejestrowanego użytkownika, wartość kolumny rekordu to 0.
W aplikacji internetowej wybierz pozycję Wyloguj, a następnie zaloguj się ponownie przy użyciu tego samego użytkownika.
Wprowadź kod weryfikacyjny z aplikacji wystawcy uwierzytelnienia TOTP w polu tekstowym Authenticator code (Kod wystawcy uwierzytelnienia). Wybierz przycisk Log in (Zaloguj się).
Wybierz pozycję Hello, [imię] [nazwisko]! (Witaj, [imię] [nazwisko]!). Następnie wybierz kartę Two-factor authentication (Uwierzytelnianie dwuskładnikowe).

Ponieważ aplikacja Microsoft Authenticator jest skonfigurowana, wyświetlane są następujące przyciski:
- Disable 2FA (Wyłącz uwierzytelnianie dwuskładnikowe)
- Reset recovery codes (Resetuj kody odzyskiwania)
- Set up authenticator app (Konfiguruj aplikację wystawcy uwierzytelnienia)
- Reset authenticator app (Resetuj aplikację wystawcy uwierzytelnienia)
W okienku terminalu w programie VS Code naciśnij Ctrl+C, aby zatrzymać aplikację.

Podsumowanie