Delen via

Het genereren van QR-code inschakelen voor TOTP Authenticator-apps in ASP.NET Core

  • Artikel

ASP.NET Core wordt geleverd met ondersteuning voor verificatortoepassingen voor afzonderlijke verificatie. Twee-factor-authenticatie (2FA) verificatietoepassingen, gebruik makend van een tijd-gebaseerd eenmalig wachtwoord-algoritme (TOTP), zijn de door de industrie aanbevolen benadering voor 2FA. 2FA die TOTP gebruikt, heeft de voorkeur voor SMS 2FA. Een verificator-app biedt een code van 6 tot 8 cijfers die gebruikers moeten invoeren nadat ze hun gebruikersnaam en wachtwoord hebben bevestigd. Normaal gesproken wordt een authenticator-app geïnstalleerd op een smartphone.

Waarschuwing

Een ASP.NET Core TOTP-code moet geheim worden gehouden, omdat deze kan worden gebruikt om meerdere keren te verifiëren voordat deze verloopt.

De ASP.NET Core-web-app-sjablonen ondersteunen verificators, maar bieden geen ondersteuning voor het genereren van QR-code. QR-codegeneratoren vereenvoudigen de installatie van 2FA. Dit document bevat richtlijnen voor Razor Pagina's en MVC-apps voor het toevoegen van QR-code generatie aan de 2FA-configuratiepagina. Voor richtlijnen die van toepassing zijn op Blazor Web App’s, zie QR-codegeneratie activeren voor TOTP-authenticatorapps in een ASP.NET Core Blazor Web App. Zie Identityvoor richtlijnen die van toepassing zijn op -apps.

De ASP.NET Core-web-app-sjablonen ondersteunen verificators, maar bieden geen ondersteuning voor het genereren van QR-code. QR-codegeneratoren vereenvoudigen de installatie van 2FA. In dit document wordt u begeleid bij het toevoegen van QR-code generatie aan de 2FA-configuratiepagina.

Tweeledige verificatie gebeurt niet met behulp van een externe verificatieprovider, zoals Google- of Facebook-. Externe aanmeldingen worden beveiligd door het mechanisme dat de externe aanmeldingsprovider biedt. Denk bijvoorbeeld aan de Microsoft-verificatieprovider vereist een hardwaresleutel of een andere 2FA-benadering. Als voor de standaardsjablonen 2FA is vereist voor zowel de web-app als de externe verificatieprovider, moeten gebruikers voldoen aan twee 2FA-benaderingen. Het vereisen van twee 2FA-benaderingen wijkt af van vastgestelde beveiligingsprocedures, die doorgaans afhankelijk zijn van één sterke 2FA-methode voor verificatie.

QR-codes toevoegen aan de 2FA-configuratiepagina

Deze instructies gebruiken qrcode.js uit de https://davidshimjs.github.io/qrcodejs/ repository.

  • Download de qrcode.js JavaScript-bibliotheek naar de map wwwroot\lib in uw project.
  • Volg de instructies in Scaffold Identity om /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlte genereren.
  • Zoek in /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlde sectie Scripts aan het einde van het bestand:
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}
  • Maak een nieuw JavaScript-bestand met de naam qr.js in wwwroot/js en voeg de volgende code toe om de QR-code te genereren:
window.addEventListener("load", () => {
  const uri = document.getElementById("qrCodeData").getAttribute('data-url');
  new QRCode(document.getElementById("qrCode"),
    {
      text: uri,
      width: 150,
      height: 150
    });
});
  • Werk de sectie Scripts bij om een verwijzing naar de qrcode.js-bibliotheek toe te voegen die eerder is gedownload.
  • Voeg het qr.js-bestand toe met de aanroep om de QR-code te genereren:
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script type="text/javascript" src="~/lib/qrcode.js"></script>
    <script type="text/javascript" src="~/js/qr.js"></script>
}
  • Verwijder de alinea die u aan deze instructies koppelt.

Voer uw app uit en zorg ervoor dat u de QR-code kunt scannen en de code kunt valideren die de verificator bewijst.

De sitenaam in de QR-code wijzigen

De sitenaam in de QR-code wordt opgehaald uit de projectnaam die u kiest bij het maken van uw project. U kunt deze wijzigen door te zoeken naar de GenerateQrCodeUri(string email, string unformattedKey) methode in de /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

De standaardcode van de sjabloon ziet er als volgt uit:

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

De tweede parameter in de aanroep van string.Format is de naam van uw site, afkomstig van de naam van uw oplossing. Deze kan worden gewijzigd in elke waarde, maar moet altijd url-codering hebben.

Een andere QR-codebibliotheek gebruiken

U kunt de QR Code-bibliotheek vervangen door de bibliotheek van uw voorkeur. De HTML bevat een qrCode element waarin u een QR-code kunt plaatsen door het mechanisme dat uw bibliotheek biedt.

De correct opgemaakte URL voor de QR-code is beschikbaar in:

  • AuthenticatorUri eigenschap van het model.
  • data-url eigenschap in het qrCodeData element.

TOTP-klant en server tijdverschil

TOTP-verificatie (tijdgebaseerd One-Time-wachtwoord) is afhankelijk van zowel de server als het authenticatorapparaat die nauwkeurig gesynchroniseerd zijn in tijd. Tokens duren slechts 30 seconden. Als TOTP 2FA-aanmeldingen mislukken, controleert u of de servertijd juist is en bij voorkeur is gesynchroniseerd met een nauwkeurige NTP-service.