Cvičení – konfigurace vícefaktorového ověřování
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á kGetGraphic
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ů.
- Používá vložení konstruktoru pro získání přístupu k instanci třídy knihovny
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 run
pří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:
- Otevřete aplikaci Microsoft Authenticator.
- V pravém horním rohu vyberte nabídku (svislé tři tečky).
- Vyberte Přidat účet.
- Vyberte Jiný účet (Google, Facebook atd.).
- 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 roven1
. Vzhledem k tomu, že pro jiného registrovaného uživatele není povolené vícefaktorové ověřování, hodnota sloupce záznamu je0
.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.