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

10 perc

Az előző leckében megtanulta, hogyan valósítja meg a ASP.NET Core Identity az időalapú egyszeri jelszót (TOTP) a többtényezős hitelesítéshez (MFA). Ebben a leckében testre szabhatja 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 harmadik féltől származó 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 a Hitelesítő alkalmazás konfigurálása űrlapon .

A terminálpanelen telepítse a QRCoder NuGet-csomagot:
```
dotnet add package QRCoder --version 1.6.0
```
Az Explorer panelen kattintson a jobb gombbal a Szolgáltatások mappára, és adjon hozzá egy új fájlt QRCodeService.cs. 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 dimenzióinak meghatározásához GetGraphic átadott egész számérték. Ebben az esetben a létrehozott QR-kód négy képpont négyzet alakú blokkokból áll.

A Program.cs 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();

QRCodeServiceA rendszer egyszeri szolgáltatásként van regisztrálva az Program.cs belüli IoC-tárolóban.

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

Most, hogy létrehozhat QR-kódokat, beágyazhat egy QR-kódot a Hitelesítő alkalmazás konfigurálása alkalmazásűrlapra .

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

A QR-kód 64-es alapsztring-ábrázolásának tárolásához adja hozzá a következő tulajdonságot az EnableAuthenticatorModel osztályhoz:

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)
    {
        return 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 hivatkozás feloldásához QRCodeServiceadja hozzá a következő using utasítást a fájl elejéhez. Mentse a módosításokat.
```
using RazorPagesPizza.Services;
```

A metódus kiemelt módosításának belefoglalása 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 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>

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 a Hitelesítő alkalmazás konfigurálása alkalmazásűrlapon hajtotta végre. 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 nincs bejelentkezve. Válassza a Hello, [Vezetéknév] [Vezetéknév]! hivatkozást a profilkezelési lap megnyitásához, 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.

A Microsoft Authenticator androidos használatával például 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 Ctrl Shift+E billentyű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 többtényezős hitelesítés nincs engedélyezve a másik regisztrált felhasználó számára, a rekord 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 van állítva, a következő 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 Ctrl C billentyűkombinációt+ az alkalmazás leállításához.

Összegzés

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

Folytatás