Włączanie generowania kodu QR dla aplikacji uwierzytelniającego TOTP w usłudze ASP.NET Core

ASP.NET Core jest dostarczany z obsługą aplikacji authenticator na potrzeby indywidualnego uwierzytelniania. Aplikacje uwierzytelniające uwierzytelniania dwuskładnikowego (2FA, Time-based One-Time Password Algorithm, TOTP) to zalecane w branży podejście do uwierzytelniania 2FA. Uwierzytelnianie 2FA przy użyciu protokołu TOTP jest preferowane do uwierzytelniania SMS 2FA. Aplikacja authenticator udostępnia od 6 do 8 cyfr kod, który użytkownicy muszą wprowadzić po potwierdzeniu nazwy użytkownika i hasła. Zazwyczaj aplikacja uwierzytelniania jest instalowana na smartfonie.

Szablony aplikacji internetowych platformy ASP.NET Core obsługują uwierzytelnianie, ale nie zapewniają obsługi generowania kodu QR. Generatory kodu QR ułatwiają konfigurowanie uwierzytelniania 2FA. Ten dokument zawiera wskazówki dotyczące Razor aplikacji Pages i MVC dotyczących dodawania generowania kodu QR do strony konfiguracji 2FA. Aby uzyskać wskazówki dotyczące Blazor usługi Web Apps, zobacz Włączanie generowania kodu QR dla aplikacji uwierzytelniania TOTP w aplikacji internetowej platformy ASP.NET CoreBlazor.

Uwierzytelnianie dwuskładnikowe nie jest wykonywane przy użyciu zewnętrznego dostawcy uwierzytelniania, takiego jak Google lub Facebook. Identyfikatory logowania zewnętrznego są chronione przez dowolny mechanizm zapewniany przez zewnętrznego dostawcę logowania. Rozważmy na przykład , że dostawca uwierzytelniania firmy Microsoft wymaga klucza sprzętowego lub innego podejścia uwierzytelniania 2FA. Jeśli szablony domyślne wymusiły "lokalną" uwierzytelnianie 2FA, użytkownicy będą musieli spełnić dwa podejścia uwierzytelniania 2FA, co nie jest często używanym scenariuszem.

Dodawanie kodów QR do strony konfiguracji 2FA

Te instrukcje są używane qrcode.js z https://davidshimjs.github.io/qrcodejs/ repozytorium.

• Pobierz bibliotekę qrcode.js JavaScript do wwwroot\lib folderu w projekcie.
• Postępuj zgodnie z instrukcjami w sekcji Szkielet, Identity aby wygenerować /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlelement .
• W /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlpliku znajdź sekcję Scripts na końcu pliku:

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}

• Utwórz nowy plik JavaScript o nazwie qr.js w wwwroot/js pliku i dodaj następujący kod, aby wygenerować kod QR:

window.addEventListener("load", () => {
  const uri = document.getElementById("qrCodeData").getAttribute('data-url');
  new QRCode(document.getElementById("qrCode"),
    {
      text: uri,
      width: 150,
      height: 150
    });
});

• Zaktualizuj sekcję, Scripts aby dodać odwołanie do qrcode.js biblioteki, która została wcześniej pobrana.
• qr.js Dodaj plik za pomocą wywołania , aby wygenerować kod QR:

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script type="text/javascript" src="~/lib/qrcode.js"></script>
    <script type="text/javascript" src="~/js/qr.js"></script>
}

• Usuń akapit, który łączy Cię z tymi instrukcjami.

Uruchom aplikację i upewnij się, że możesz zeskanować kod QR i zweryfikować kod, który potwierdza wystawca uwierzytelnień.

Zmienianie nazwy witryny w kodzie QR

Nazwa witryny w kodzie QR jest pobierana z nazwy projektu wybranej podczas początkowego tworzenia projektu. Możesz ją zmienić, wyszukując metodę GenerateQrCodeUri(string email, string unformattedKey) w /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cspliku .

Domyślny kod z szablonu wygląda następująco:

private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        AuthenticatorUriFormat,
        _urlEncoder.Encode("Razor Pages"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

Drugi parametr w wywołaniu metody to string.Format nazwa witryny pobrana z nazwy rozwiązania. Można go zmienić na dowolną wartość, ale zawsze musi być zakodowany adres URL.

Korzystanie z innej biblioteki kodu QR

Możesz zastąpić bibliotekę kodów QR preferowaną biblioteką. Kod HTML zawiera qrCode element, w którym można umieścić kod QR za pomocą dowolnego mechanizmu zapewnianego przez bibliotekę.

Poprawnie sformatowany adres URL kodu QR jest dostępny w:

• AuthenticatorUri właściwość modelu.
• data-url właściwość w elemecie qrCodeData .

Niesymetryczność czasu klienta i serwera TOTP

Uwierzytelnianie TOTP (jednorazowe hasło jednorazowe) zależy zarówno od serwera, jak i urządzenia wystawcy uwierzytelnienia o dokładnym czasie. Tokeny trwają tylko przez 30 sekund. Jeśli logowania 2FA protokołu TOTP kończą się niepowodzeniem, sprawdź, czy czas serwera jest dokładny i najlepiej zsynchronizowany z dokładną usługą NTP.