Cvičení – konfigurace vícefaktorového ověřování

10 min

V předchozí lekci jste zjistili, jak ASP.NET Core Identity implementuje jednorázové heslo (TOTP) založené na čase pro vícefaktorové ověřování (MFA). V této lekci přizpůsobíte stávající formulář aplikace Configure Authenticator tak, aby poskytoval kód QR, který obsahuje registrační klíč.

Generování kódů QR

Pro generování kódu QR existuje několik strategií. Příklad v dokumentaci používá javascriptovou knihovnu na straně klienta. V této lekci se ale k vygenerování kódu QR na serveru používá balíček NuGet třetí strany. Výsledný obrázek s kódem QR se vloží do zástupného elementu HTML jako řetězec s kódováním base-64.

Přidání služby kódu QR

Pojďme vytvořit vše, co potřebujete k vygenerování kódů QR ve formuláři Konfigurovat ověřovací aplikaci .

V podokně terminálu nainstalujte QRCoder balíček NuGet:
```
dotnet add package QRCoder --version 1.6.0
```
V podokně Průzkumník klikněte pravým tlačítkem na složku Služby a přidejte nový soubor s názvem QRCodeService.cs. Přidejte následující kód:
```
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));
    }
}
```
Předchozí kód:
- Používá vložení konstruktoru pro získání přístupu k instanci třídy knihovny QRCodeGenerator.
- Zpřístupňuje metodu GetQRCodeAsBase64 pro vrácení řetězce s kódováním base-64. Celočíselná hodnota předaná k GetGraphic určení rozměrů kódu QR. V tomto případě se vygenerovaný kód QR skládá z bloků o velikosti čtyř pixelů čtverců.

V Program.cs přidejte zvýrazněné řádky:

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 je zaregistrovaná jako jednoúčelová služba v kontejneru IoC v rámci Program.cs.

Přizpůsobení vícefaktorového ověřování

Teď, když můžete generovat kódy QR, můžete kód QR vložit do formuláře Konfigurovat ověřovací aplikaci .

Otevřete Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs a proveďte následující změny:

Chcete-li uložit řetězcovou reprezentaci kódu QR base-64, přidejte do EnableAuthenticatorModel třídy následující vlastnost:

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

    public string QrCodeAsBase64 { get; set; }

Do obslužné rutiny stránky OnGetAsync začleňte zvýrazněné změny:

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

Vložení parametru v předchozí obslužné rutině stránky poskytuje odkaz na jednorázovou službu QRCodeService.

Pokud chcete přeložit odkaz na QRCodeService, přidejte na začátek souboru následující using příkaz. Uložte provedené změny.
```
using RazorPagesPizza.Services;
```

Začleňte zvýrazněnou změnu do GenerateQrCodeUri metody.

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

Tím se nastaví zobrazovaný název klíče v aplikaci TOTP.

V souboru Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml proveďte následující zvýrazněné změny a pak soubor uložte:

<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>

Předchozí kód vloží na stránku obrázek s kódováním base-64.

Testování vícefaktorového ověřování

Provedli jste všechny změny potřebné pro kód QR ve formuláři Konfigurace ověřovací aplikace . Teď můžete snadno otestovat funkčnost vícefaktorového ověřování.

Ujistěte se, že jste uložili všechny změny.
Sestavte a spusťte aplikaci pomocí dotnet runpříkazu .
Přejděte na web a přihlaste se pomocí některého registrovaného uživatele, pokud ještě nejste přihlášení. Výběrem odkazu Hello, [Jméno] [Příjmení]! přejděte na stránku pro správu profilu a pak vyberte Dvoufaktorové ověřování.
Vyberte tlačítko pro přidání ověřovací aplikace.
Podle pokynů na obrazovce zaregistrujte a ověřte ověřovací aplikaci pro tohoto uživatele.

Pokud například používáte Microsoft Authenticator v Androidu, přidejte účet do aplikace takto:
1. Otevřete aplikaci Microsoft Authenticator.
2. V pravém horním rohu vyberte nabídku (svislé tři tečky).
3. Vyberte Přidat účet.
4. Vyberte Jiný účet (Google, Facebook atd.).
5. Při zobrazení výzvy naskenujte kód QR.
Do textového pole pro ověřovací kód zadejte ověřovací kód, který vám poskytla aplikace pro jednorázová hesla s časovým omezením (TOTP).
Vyberte možnost ověření.

Při úspěšném ověření se na stránce zobrazí informační zpráva, že ověřovací aplikace byla ověřena a několik kódů pro obnovení.
Na kartě SQL Server v editoru VS Code klikněte pravým tlačítkem myši na databázi RazorPagesPizza a vyberte Nový dotaz. Zadejte následující dotaz a stisknutím kláves Ctrl+Shift+E ho spusťte.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
Pro přihlášeného uživatele výstup ukazuje, že TwoFactorEnabled sloupec je roven 1. Vzhledem k tomu, že pro jiného registrovaného uživatele není povolené vícefaktorové ověřování, hodnota sloupce záznamu je 0.
Ve webové aplikaci vyberte Odhlásit se a pak se znovu přihlaste se stejným uživatelem.
Do textového pole pro ověřovací kód zadejte ověřovací kód z ověřovací aplikace pro jednorázová hesla s časovým omezením (TOTP). Vyberte tlačítko pro přihlášení.
Vyberte odkaz Hello, [jméno] [příjmení]!. Pak vyberte kartu pro dvojúrovňové ověřování.

Vzhledem k tomu, že je aplikace Microsoft Authenticator nastavená, zobrazí se následující tlačítka:
- Disable 2FA (Zakázat dvojúrovňové ověřování)
- Reset recovery codes (Resetovat kódy pro obnovení)
- Set up authenticator app (Nastavit ověřovací aplikaci)
- Reset authenticator app (Resetovat ověřovací aplikaci)
V podokně terminálu v editoru VS Code zastavte aplikaci stisknutím kláves Ctrl+C.

Shrnutí

V této lekci jste přidali možnost vygenerovat kód QR do formuláře Konfigurace ověřovací aplikace . V další lekci se dozvíte o použití identity k ukládání deklarací identity a použití zásad autorizace.

Pokračovat