Udostępnij za pośrednictwem

Włączanie generowania kodu QR dla aplikacji uwierzytelniającego TOTP w ASP.NET Core Blazor Web App

Uwaga

Nie jest to najnowsza wersja tego artykułu. Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

Ważne

Te informacje odnoszą się do produktu w wersji wstępnej, który może zostać znacząco zmodyfikowany, zanim zostanie wydany komercyjnie. Firma Microsoft nie udziela żadnych gwarancji, jawnych lub domniemanych, w odniesieniu do informacji podanych w tym miejscu.

Aby zapoznać się z bieżącą wersją, zobacz wersję tego artykułu platformy .NET 9.

W tym artykule wyjaśniono, jak skonfigurować ASP.NET Core Blazor Web App na potrzeby uwierzytelniania dwuskładnikowego (2FA) przy użyciu kodów QR generowanych przez aplikacje uwierzytelniania jednorazowego (TOTP) oparte na czasie.

Aby zapoznać się z wprowadzeniem do metody uwierzytelniania 2FA z aplikacjami TOTP, zobacz: Włączanie generowania kodu QR dla aplikacji TOTP w usłudze ASP.NET Core.

Wskazówki zawarte w tym artykule opierają się na tworzeniu aplikacji z kontami indywidualnymi dla typu uwierzytelniania nowej aplikacji lub wstawianiu szkieletu Identity do istniejącej aplikacji. Aby uzyskać wskazówki dotyczące używania .NET CLI zamiast Visual Studio do szkieletowania Identity w istniejącej aplikacji, zobacz narzędzie generatora kodu ASP.NET Core („aspnet-codegenerator”).

Ostrzeżenie

Kody TOTP powinny być przechowywane w tajemnicy, ponieważ mogą być używane do uwierzytelniania wiele razy przed ich wygaśnięciem.

Dodawanie kodów QR do strony konfiguracji 2FA

Kod QR wygenerowany przez aplikację do skonfigurowania 2FA z aplikacją uwierzytelniającą TOTP musi być utworzony przez bibliotekę kodów QR.

Wskazówki zawarte w tym artykule używają manuelbl/QrCodeGenerator, ale można użyć dowolnej biblioteki generowania kodu QR.

Dodaj odwołanie do pakietu NuGet Net.Codecrete.QrCodeGenerator.

Uwaga

Aby uzyskać wskazówki dotyczące dodawania pakietów do aplikacji .NET, zobacz artykuły w Instalowanie i zarządzanie pakietami oraz w proces korzystania z pakietów (dokumentacja NuGet). Potwierdź prawidłowe wersje pakietów w NuGet.org.

Otwórz składnik EnableAuthenticator w folderze Components/Account/Pages/Manage. W górnej części pliku w ramach dyrektywy @page dodaj dyrektywę @using dla przestrzeni nazw QrCodeGenerator:

@using Net.Codecrete.QrCodeGenerator

Usuń element <div> zawierający instrukcje kodu QR oraz dwa <div> elementy, w których powinien zostać wyświetlony kod QR i gdzie dane kodu QR są przechowywane na stronie:

- <div class="alert alert-info">
-     Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable 
-     QR code generation</a>.
- </div>
- <div></div>
- <div data-url="@authenticatorUri"></div>

Zastąp usunięte elementy następującymi znacznikami:

<div>
    <svg xmlns="http://www.w3.org/2000/svg" height="300" width="300" stroke="none" 
            version="1.1" viewBox="0 0 50 50">
        <rect width="300" height="300" fill="#ffffff" />
        <path d="@svgGraphicsPath" fill="#000000" />
    </svg>
</div>

Tuż wewnątrz bloku otwierającego @code zmień deklarację zmiennej dla authenticatorUri na svgGraphicsPath:

- private string? authenticatorUri;
+ private string? svgGraphicsPath;

Zmień nazwę witryny w metodzie GenerateQrCodeUri. Domyślna wartość to Microsoft.AspNetCore.Identity.UI. Zmień wartość na znaczącą nazwę witryny, którą użytkownicy mogą łatwo zidentyfikować w swojej aplikacji wystawcy uwierzytelniania. Deweloperzy zazwyczaj ustawiają nazwę witryny zgodną z nazwą firmy. Zalecamy ograniczenie długości nazwy witryny do 30 znaków lub mniej, aby umożliwić wyświetlanie nazwy witryny na wąskich ekranach urządzeń przenośnych.

W poniższym przykładzie wartość Microsoft.AspNetCore.Identity.UI domyślna zostanie zmieniona na nazwę Weyland-Yutani Corporation firmy (©1986 20th Century Studios Aliens).

W metodzie GenerateQrCodeUri :

- UrlEncoder.Encode("Microsoft.AspNetCore.Identity.UI"),
+ UrlEncoder.Encode("Weyland-Yutani Corporation"),

W dolnej części metody LoadSharedKeyAndQrCodeUriAsync dodaj słowo kluczowe var do wiersza, który ustawia authenticatorUri, dzięki czemu stanie się niejawnie typizowaną zmienną lokalną.

- authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);
+ var authenticatorUri = GenerateQrCodeUri(email!, unformattedKey!);

Dodaj następujące wiersze kodu w dolnej części metody LoadSharedKeyAndQrCodeUriAsync:

var qr = QrCode.EncodeText(authenticatorUri, QrCode.Ecc.Medium);
svgGraphicsPath = qr.ToGraphicsPath();

Uruchom aplikację i upewnij się, że kod QR jest skanowany i czy kod jest weryfikowany.

Ostrzeżenie

Należy przechowywać tajny kod ASP.NET Core TOTP, ponieważ może służyć do pomyślnego uwierzytelniania wiele razy przed wygaśnięciem.

EnableAuthenticator składnik w źródle referencyjnym

Składnik EnableAuthenticator można sprawdzić w źródle referencyjnym:

EnableAuthenticator składnik w źródle referencyjnym

Uwaga

Linki dokumentacji do źródła referencyjnego platformy .NET zwykle ładują domyślną gałąź repozytorium, która odzwierciedla bieżące programowanie dla następnej wersji platformy .NET. Aby wybrać tag dla określonej wersji, użyj listy rozwijanej Przełącz gałęzie lub tagi. Aby uzyskać więcej informacji, zobacz Jak wybrać tag wersji kodu źródłowego platformy ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Błędy spowodowane niesymetrycznością czasu TOTP

Uwierzytelnianie TOTP zależy od utrzymania dokładnego czasu na urządzeniu z aplikacją uwierzytelniającą TOTP oraz na urządzeniu, na którym działa aplikacja. Tokeny TOTP są prawidłowe tylko przez 30 sekund. Jeśli logowania kończą się niepowodzeniem z powodu odrzuconych kodów TOTP, upewnij się, że jest utrzymywany dokładny czas, najlepiej zsynchronizowany z dokładną usługą NTP.

Dodatkowe zasoby