Ć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 jednostce dostosujesz istniejący formularz konfiguracji aplikacji uwierzytelniającej, aby podać kod QR zawierający klucz rejestracji.

Generowanie kodów QR

Istnieje wiele strategii generowania kodu QR. Dokumentacja podaje przykład użycia 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. Wynikowy obraz kodu QR jest wstrzykiwany do elementu zastępczego HTML jako ciąg zakodowany w formacie base-64.

Dodawanie usługi kodu QR

Stwórzmy wszystko, czego potrzebujesz, aby wygenerować kody QR w formularzu Konfigurowanie aplikacji uwierzytelniającej.

W okienku terminalu zainstaluj pakiet QRCoder NuGet:
```
dotnet add package QRCoder --version 1.6.0
```

W okienku Eksploratora kliknij prawym przyciskiem myszy folder Services 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:

Używa iniekcji konstruktora, aby uzyskać dostęp do wystąpienia klasy QRCodeGenerator z biblioteki.
Uwidacznia metodę GetQRCodeAsBase64, aby zwrócić ciąg zakodowany w formacie base-64. Wartość całkowita przekazana do GetGraphic określa wymiary kodu QR. W takim przypadku wygenerowany kod QR składa się z bloków o rozmiarze czterech pikseli kwadratowych.

W Program.csdodaj 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();

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

Dostosowywanie uwierzytelniania wieloskładnikowego

Teraz, gdy możesz wygenerować kody QR, możesz osadzić kod QR w formularzu Konfigurowanie uwierzytelniającej aplikacji.

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

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

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 zawiera odwołanie do usługi pojedynczej QRCodeService.

Aby rozwiązać problem z odwołaniem do QRCodeService, dodaj następującą instrukcję using 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);
}

Ustawia nazwę wyświetlaną dla klucza w aplikacji TOTP.

W Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlwprowadź następujące zmiany, które zostały wyróżnione, i 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 znacznik osadza kodowany obraz base-64 na stronie.

Testowanie uwierzytelniania wieloskładnikowego

Wprowadzono wszystkie zmiany wymagane dla kodu QR w formularzu Konfigurowanie aplikacji uwierzytelniającej. Teraz możesz łatwo przetestować funkcje uwierzytelniania wieloskładnikowego.

Upewnij się, że wszystkie zmiany zostały zapisane.
Skompiluj i uruchom aplikację przy użyciu dotnet run.
Przejdź do witryny i zaloguj się przy użyciu zarejestrowanego użytkownika, jeśli jeszcze nie zalogowałeś się. Wybierz pozycję Witaj, [Imię] [Nazwisko]! link, aby przejść do strony zarządzania profilami, a następnie wybierz pozycję Uwierzytelnianie dwuskładnikowe.
Wybierz przycisk Dodaj aplikację do uwierzytelniania.
Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby zarejestrować i zweryfikować aplikację authenticator 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 kebab (wielokropek pionowy) w prawym górnym rogu.
3. Wybierz pozycję Dodaj konto.
4. Wybierz pozycję Inne konto (Google, Facebook itp.).
5. Skanuj kod QR zgodnie ze wskazaniem.
Wprowadź kod weryfikacyjny dostarczony przez aplikację TOTP w polu tekstowym Kod weryfikacyjny.
Wybierz pozycję Sprawdź.

Po pomyślnej weryfikacji na stronie jest wyświetlany baner Twoja aplikacja uwierzytelniająca została zweryfikowana oraz niektóre kody odzyskiwania.
Na karcie programu 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 jest 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 uwierzytelniającej TOTP w polu tekstowym kodu Authenticator. Wybierz przycisk Zaloguj się.
Wybierz pozycję Witaj, [Imię] [Nazwisko]!. Następnie wybierz kartę Uwierzytelnianie dwuskładnikowe.

Ponieważ aplikacja Microsoft Authenticator jest skonfigurowana, wyświetlane są następujące przyciski:
- Wyłącz uwierzytelnianie 2FA
- Resetowanie kodów odzyskiwania
- Skonfiguruj aplikację uwierzytelniającą
- Resetowanie aplikacji uwierzytelniającej
W okienku terminalu w programie VS Code naciśnij Ctrl+C, aby zatrzymać aplikację.

Streszczenie

W tej jednostce dodałeś możliwość generowania kodu QR do formularza Konfigurowanie aplikacji uwierzytelniającej. W następnej lekcji dowiesz się więcej na temat używania tożsamości do przechowywania oświadczeń i stosowania zasad autoryzacji.