Aktivera QR-kodgenerering för TOTP-autentiseringsappar i ASP.NET Core

ASP.NET Core levereras med stöd för autentiseringsprogram för individuell autentisering. Autentiseringsappar för tvåfaktorautentisering (2FA) med hjälp av en tidsbaserad engångslösenordalgoritm (TOTP) är den branschrekommenderade metoden för 2FA. 2FA med TOTP är att föredra framför SMS 2FA. En autentiseringsapp innehåller en 6 till 8-siffrig kod som användarna måste ange när de har bekräftat sitt användarnamn och lösenord. Vanligtvis installeras en autentiseringsapp på en smartphone.

Varning

En ASP.NET Core TOTP-kod bör hållas hemlig eftersom den kan användas för att autentiseras flera gånger innan den upphör att gälla.

ASP.NET Core-webbappmallar stöder autentisering men ger inte stöd för QR-kodgenerering. QR-kodgeneratorer underlättar installationen av 2FA. Det här dokumentet innehåller vägledning för Razor Pages- och MVC-appar om hur du lägger till QR-kod generation till 2FA-konfigurationssidan. Vägledning som gäller för Blazor Web Apps finns i Aktivera QR-kodgenerering för TOTP-autentiseringsappar i en ASP.NET Core Blazor Web App. Vägledning som gäller för Blazor WebAssembly appar finns i Aktivera QR-kodgenerering för TOTP-autentiseringsappar i ASP.NET Core Blazor WebAssembly med ASP.NET Core Identity.

Tvåfaktorsautentisering sker inte med hjälp av en extern autentiseringsprovider, till exempel Google eller Facebook-. Externa inloggningar skyddas av den mekanism som den externa inloggningsprovidern tillhandahåller. Tänk till exempel på att Microsoft-autentiseringsprovidern kräver en maskinvarunyckel eller en annan 2FA-metod. Om standardmallarna kräver 2FA för både webbappen och den externa autentiseringsprovidern måste användarna uppfylla två 2FA-metoder. Att kräva två 2FA-metoder avviker från etablerade säkerhetsrutiner, som vanligtvis förlitar sig på en enda stark 2FA-metod för autentisering.

Lägga till QR-koder på 2FA-konfigurationssidan

Dessa instruktioner använder qrcode.js från lagringsplats https://davidshimjs.github.io/qrcodejs/.

• Ladda ned qrcode.js JavaScript-biblioteket till mappen wwwroot\lib i projektet.
• Följ anvisningarna i Scaffold Identity för att generera /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.
• I /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtmlletar du upp avsnittet Scripts i slutet av filen:

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

• Skapa en ny JavaScript-fil med namnet qr.js i wwwroot/js och lägg till följande kod för att generera QR Code:

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

• Uppdatera avsnittet Scripts för att lägga till en referens till det qrcode.js bibliotek som tidigare laddats ned.
• Lägg till qr.js-filen med anropet för att generera QR-koden:

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

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

• Ta bort stycket som länkar dig till de här anvisningarna.

Kör din app och se till att du kan skanna QR-koden och verifiera koden som autentiseringsutenten bevisar.

Ändra webbplatsnamnet i QR-koden

Webbplatsnamnet i QR-koden hämtas från det projektnamn du väljer när du först skapar projektet. Du kan ändra den genom att leta efter metoden GenerateQrCodeUri(string email, string unformattedKey) i /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

Standardkoden från mallen ser ut så här:

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

Den andra parametern i anropet till string.Format är ditt webbplatsnamn, hämtat från lösningsnamnet. Det kan ändras till valfritt värde, men det måste alltid vara URL-kodat.

Använda ett annat QR Code-bibliotek

Du kan ersätta QR Code-biblioteket med önskat bibliotek. HTML-koden innehåller ett qrCode element där du kan placera en QR-kod med vilken mekanism biblioteket än tillhandahåller.

Den korrekt formaterade URL:en för QR Code är tillgänglig i:

• Modellens egenskap AuthenticatorUri.
• Egenskapen data-url i elementet qrCodeData.

TOTP-klient- och servertidsförskjutning

TOTP-autentisering (tidsbaserad One-Time lösenord) beror på att både servern och autentiseringsenheten har en korrekt tid. Token varar bara i 30 sekunder. Om TOTP 2FA-inloggningar misslyckas kontrollerar du att servertiden är korrekt och helst synkroniserad med en korrekt NTP-tjänst.