Gyakorlat – Többtényezős hitelesítés konfigurálása

8 perc

Az előző leckében megtanulta, hogyan valósítja meg az ASP.NET Core Identity az időalapú egyszeri jelszót (TOTP) a többtényezős hitelesítéshez (MFA). Ebben a leckében testreszabhatja a meglévő Hitelesítő alkalmazás konfigurálása űrlapot , hogy a regisztrációs kulcsot tartalmazó QR-kódot adjon meg.

QR-kódok létrehozása

A QR-kód többféle stratégiával is generálható. A dokumentációban egy példa ügyféloldali JavaScript-kódtárat használ. Ebben a leckében azonban egy külső NuGet-csomaggal hozza létre a QR-kódot C# használatával a kiszolgálón. Az eredményül kapott QR-kód képe egy HTML helyőrzőelem helyére lesz beszúrva base-64 kódolású sztringként.

QR-kódszolgáltatás hozzáadása

Hozzunk létre mindent, amire szüksége van a QR-kódok létrehozásához az Authenticator alkalmazás konfigurálása űrlapon.

A terminálpanelen telepítse a QRCoder NuGet-csomagot:
```
dotnet add package QRCoder --version 1.4.3
```
Az Explorer panelen kattintson a jobb gombbal a Szolgáltatások mappára, és adjon hozzá egy QRCodeService.cs nevű új fájlt. Adja hozzá a következő kódot:
```
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));
    }
}
```
A fenti kód a következőket végzi el:
- Konstruktor injektálásával szerez hozzáférést a kódtár QRCodeGenerator osztályának egy példányához.
- Elérhetővé teszi a GetQRCodeAsBase64 metódust a base-64 kódolású sztring visszaadásához. A QR-kód méreteit a GetGraphic paraméternek átadott egész szám határozza meg. Ebben az esetben a létrehozott QR-kód négy képpont méretű blokkokból áll.

A Program.cs fájlban adja hozzá a kiemelt sorokat:

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 egyetlentonos szolgáltatásként van regisztrálva az IoC-tárolóban a Program.cs fájlban.

A többtényezős hitelesítés testreszabása

Most, hogy létrehozhat QR-kódokat, beágyazhat egy QR-kódot az Authenticator alkalmazás konfigurálása űrlapba.

Nyissa meg Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs és hajtsa végre a következő módosításokat:

Az EnableAuthenticatorModel osztályhoz adja hozzá az alábbi tulajdonságot a QR-kód base-64-sztringként történő tárolásához:

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

    public string QrCodeAsBase64 { get; set; }

Építse be a kiemelt módosításokat az OnGetAsync lapkezelőbe:

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

A fenti lapkezelőben a paraméter injektálása ad meg egy hivatkozást a QRCodeService egyedülálló szolgáltatásra.

A fájl elejére szúrja be az alábbi using utasítást a QRCodeService szolgáltatásra való hivatkozás feloldásához. Mentse a módosításokat.
```
using RazorPagesPizza.Services;
```

Foglalja bele a metódus kiemelt módosítását GenerateQrCodeUri .

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

Ezzel beállítja a kulcs megjelenítendő nevét a TOTP-alkalmazásban.

Végezze el az alábbi kiemelt módosításokat az Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml fájlban, majd mentse a fájlt:

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

A fenti kód a base-64 kódolású képet ágyazza be az oldalba.

Többtényezős hitelesítés tesztelése

A QR-kódhoz szükséges összes módosítást elvégezte a Hitelesítő alkalmazás konfigurálása űrlapon . Most már egyszerűen tesztelheti az MFA funkcióit.

Győződjön meg arról, hogy az összes módosítást mentette.
Hozza létre és futtassa az alkalmazást a következővel: dotnet run.
Lépjen a webhelyre, és jelentkezzen be bármelyik regisztrált felhasználóval, ha még nem jelentkezett be. Válassza a Hello, [Vezetéknév] [Vezetéknév]! hivatkozást a profilkezelési lapra való navigáláshoz, majd válassza a Kétfaktoros hitelesítés lehetőséget.
Válassza a hitelesítő alkalmazás hozzáadása gombot.
A képernyőn megjelenő utasítások végrehajtásával regisztrálja és ellenőrizze az ehhez a felhasználóhoz tartozó hitelesítő alkalmazást.

Ha például a Microsoft Authenticatort használja Androidon, az alábbi lépéseket követve adja hozzá a fiókot az alkalmazáshoz:
1. Nyissa meg a Microsoft Authenticator alkalmazást.
2. Válassza a függőlegesen elhelyezkedő három pontot a jobb felső sarokban.
3. Válassza a Fiók felvétele lehetőséget.
4. Válassza az Egyéb fiók (Google, Facebook stb.) lehetőséget.
5. Olvassa be a QR-kódot, ahogyan a rendszer kéri.
Az Ellenőrző kód szövegbeviteli mezőben adja meg a TOTP-alkalmazásától kapott ellenőrző kódot.
Válassza az Ellenőrzés lehetőséget.

A sikeres ellenőrzés után az oldal egy sávot jelenít meg A hitelesítő alkalmazás ellenőrzése megtörtént felirattal és néhány visszaállítási kóddal.
A VS Code SQL Server lapján kattintson a jobb gombbal a RazorPagesPizza adatbázisra, és válassza az Új lekérdezés lehetőséget. Írja be a következő lekérdezést, és a CtrlShift+Ebillentyűkombinációt+ lenyomva futtassa.
```
SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers
```
A bejelentkezett felhasználó esetében a kimenet azt mutatja, hogy az TwoFactorEnabled oszlop egyenlő.1 Mivel a másik regisztrált felhasználónál nincs engedélyezve a kéttényezős hitelesítés, ebben a rekordban az oszlop értéke 0.
A webalkalmazásban válassza a Kijelentkezés lehetőséget, majd jelentkezzen be újra ugyanazzal a felhasználóval.
A Hitelesítési kód szövegbeviteli mezőben adja meg a TOTP hitelesítő alkalmazásától kapott ellenőrző kódot. Válassza a Bejelentkezés gombot.
Válassza a Hello, [Utónév][Vezetéknév]! elemet. Az után válassza a Kéttényezős hitelesítés lapfület.

Mivel a Microsoft Authenticator be lett állítva, az alábbi gombok jelennek meg:
- 2FA letiltása
- Visszaállítási kódok alaphelyzetbe állítása
- Hitelesítő alkalmazás beállítása
- Hitelesítő alkalmazás alaphelyzetbe állítása
A VS Code terminálablakában nyomja le a CtrlCbillentyűkombinációt+ az alkalmazás leállításához.

Összefoglalás

Ebben a leckében hozzáadta a QR-kód generálásának lehetőségét az Authenticator alkalmazás konfigurálása űrlaphoz. A következő leckében megtudhatja, hogyan használhatja az Identitást jogcímek tárolására és engedélyezési szabályzatok alkalmazására.

Folytatás