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

8 min

V předchozí lekci jste se dozvěděli, jak ASP.NET Core Identity implementuje jednorázové heslo založené na čase (TOTP) pro vícefaktorové ověřování (MFA). V této lekci přizpůsobíte existující formulář konfigurace ověřovací aplikace 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 však k vygenerování kódu QR v jazyce C# 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 Konfigurace ověřovací aplikace .

V podokně terminálu nainstalujte QRCoder balíček NuGet:
```
dotnet add package QRCoder --version 1.4.3
```
V podokně Průzkumník klikněte pravým tlačítkem na složku Services 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. Rozměry kódu QR jsou určeny celočíselnou hodnotou předanou do GetGraphic. V tomto případě se vygenerovaný kód QR skládá z bloků o velikosti 4 pixelů na druhou.

V souboru 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 souboru 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 soubor a proveďte následující změny:

Do třídy EnableAuthenticatorModel přidejte následující vlastnost pro uložení řetězcové reprezentace kódu QR s kódováním 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; }

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)
    {
        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.

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

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

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

Ve formuláři Konfigurace ověřovací aplikace jste provedli všechny změny potřebné pro kód QR. Funkce vícefaktorového ověřování teď můžete snadno otestovat.

Ujistěte se, že jste uložili všechny změny.
Sestavte a spusťte aplikaci pomocí dotnet run.
Přejděte na web a přihlaste se pod některým z registrovaných uživatelů( pokud ještě nejste přihlášení). Výběrem odkazu Hello, [jméno] [Příjmení]! přejděte na stránku správy profilu a pak vyberte Dvojúrovňové 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.

Například při použití aplikace Microsoft Authenticator na Androidu přidejte účet do aplikace následujícím postupem:
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 ve VS Code klikněte pravým tlačítkem na databázi RazorPagesPizza a vyberte Nový dotaz. Zadejte následující dotaz a spusťte ho stisknutím klávesy Ctrl+Shift+E .
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
U přihlášeného uživatele se ve výstupu zobrazí, že sloupec TwoFactorEnabled je roven hodnotě 1. Protože u druhého zaregistrovaného uživatele není vícefaktorové ověřování povolené, nabývá sloupec tohoto záznamu hodnoty 0.
Ve webové aplikaci vyberte Odhlášení a pak se znovu přihlaste pod 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í.

Protože byla nastavena aplikace Microsoft Authenticator, 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ávesy Ctrl+C .

Souhrn

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