Activer la génération de Code QR pour les applications de l’authentificateur TOTP dans ASP.NET CoreEnable QR Code generation for TOTP authenticator apps in ASP.NET Core

Codes QR nécessite ASP.NET Core 2.0 ou version ultérieure.QR Codes requires ASP.NET Core 2.0 or later.

ASP.NET Core est livré avec la prise en charge pour les applications de l’authentificateur pour l’authentification individuelle.ASP.NET Core ships with support for authenticator applications for individual authentication. Deux facteurs (2FA) authentificateur applications d’authentification, à l’aide d’une heure basée à usage unique mot de passe algorithme définie (TOTP), sont le secteur de l’approche 2fa recommandé.Two factor authentication (2FA) authenticator apps, using a Time-based One-time Password Algorithm (TOTP), are the industry recommended approach for 2FA. À 2 facteurs à l’aide de TOTP est préférée à SMS 2FA.2FA using TOTP is preferred to SMS 2FA. Une application d’authentification fournit un code de 6 à 8 chiffres que les utilisateurs doivent entrer après la confirmation de leur nom d’utilisateur et le mot de passe.An authenticator app provides a 6 to 8 digit code which users must enter after confirming their username and password. En règle générale, une application d’authentification est installée sur un Smartphone.Typically an authenticator app is installed on a smart phone.

Les modèles d’application web ASP.NET Core prennent en charge des authentificateurs, mais ne fournissent pas la prise en charge pour la génération de QRCode.The ASP.NET Core web app templates support authenticators, but don't provide support for QRCode generation. Générateurs de QRCode facilitent l’installation de 2FA.QRCode generators ease the setup of 2FA. Ce document vous guidera ajout Code QR génération à la page de configuration à 2 facteurs.This document will guide you through adding QR Code generation to the 2FA configuration page.

Authentification à deux facteurs ne se produit pas à l’aide d’un fournisseur d’authentification externe, tel que Google ou Facebook.Two factor authentication does not happen using an external authentication provider, such as Google or Facebook. Connexions externes sont protégées par le mécanisme qui fournit le fournisseur de connexion externe.External logins are protected by whatever mechanism the external login provider provides. Considérons, par exemple, le Microsoft fournisseur d’authentification requiert une clé matérielle ou une autre approche à 2 facteurs.Consider, for example, the Microsoft authentication provider requires a hardware key or another 2FA approach. Si les modèles par défaut appliquées à 2 facteurs « local » puis les utilisateurs doivent satisfaire les deux approches à 2 facteurs, qui n’est pas un scénario couramment utilisé.If the default templates enforced "local" 2FA then users would be required to satisfy two 2FA approaches, which is not a commonly used scenario.

Ajout des Codes QR à la page de configuration à 2 facteursAdding QR Codes to the 2FA configuration page

Ces instructions utilisent qrcode.js à partir de la https://davidshimjs.github.io/qrcodejs/ dépôt.These instructions use qrcode.js from the https://davidshimjs.github.io/qrcodejs/ repo.

  • Suivez les instructions de une structure identité pour générer /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.Follow the instructions in Scaffold Identity to generate /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.
  • Dans /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, localisez le Scripts section à la fin du fichier :In /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, locate the Scripts section at the end of the file:
  • Dans Pages/Account/Manage/EnableAuthenticator.cshtml (Pages Razor) ou Views/Manage/EnableAuthenticator.cshtml (MVC), recherchez le Scripts section à la fin du fichier :In Pages/Account/Manage/EnableAuthenticator.cshtml (Razor Pages) or Views/Manage/EnableAuthenticator.cshtml (MVC), locate the Scripts section at the end of the file:
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}
  • Mise à jour le Scripts section pour ajouter une référence à la qrcodejs bibliothèque que vous avez ajouté et un appel pour générer le Code QR.Update the Scripts section to add a reference to the qrcodejs library you added and a call to generate the QR Code. Il doit se présenter comme suit :It should look as follows:
@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")

    <script type="text/javascript" src="~/lib/qrcode.js"></script>
    <script type="text/javascript">
        new QRCode(document.getElementById("qrCode"),
            {
                text: "@Html.Raw(Model.AuthenticatorUri)",
                width: 150,
                height: 150
            });
    </script>
}
  • Supprimer le paragraphe qui vous renvoie à ces instructions.Delete the paragraph which links you to these instructions.

Exécutez votre application et vous assurer que vous pouvez scanner le code QR et valider le code que destiné à prouver l’authentificateur.Run your app and ensure that you can scan the QR code and validate the code the authenticator proves.

Modifier le nom du site dans le Code QRChange the site name in the QR Code

Le nom du site dans le Code QR est effectuée à partir du nom de projet que vous choisissez lors de la création initiale de votre projet.The site name in the QR Code is taken from the project name you choose when initially creating your project. Vous pouvez le modifier en recherchant le GenerateQrCodeUri(string email, string unformattedKey) méthode dans le /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.You can change it by looking for the GenerateQrCodeUri(string email, string unformattedKey) method in the /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

Le nom du site dans le Code QR est effectuée à partir du nom de projet que vous choisissez lors de la création initiale de votre projet.The site name in the QR Code is taken from the project name you choose when initially creating your project. Vous pouvez le modifier en recherchant le GenerateQrCodeUri(string email, string unformattedKey) méthode dans le Pages/Account/Manage/EnableAuthenticator.cshtml.cs fichier (Pages Razor) ou le Controllers/ManageController.cs les fichier (MVC).You can change it by looking for the GenerateQrCodeUri(string email, string unformattedKey) method in the Pages/Account/Manage/EnableAuthenticator.cshtml.cs (Razor Pages) file or the Controllers/ManageController.cs (MVC) file.

Le code par défaut à partir du modèle se présente comme suit :The default code from the template looks as follows:

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

Le deuxième paramètre dans l’appel à string.Format est le nom de votre site, effectuée à partir de votre nom de la solution.The second parameter in the call to string.Format is your site name, taken from your solution name. Il peut être modifié à n’importe quelle valeur, mais il doit toujours être codée URL.It can be changed to any value, but it must always be URL encoded.

À l’aide d’une autre bibliothèque de Code QRUsing a different QR Code library

Vous pouvez remplacer la bibliothèque de Code QR avec votre bibliothèque par défaut.You can replace the QR Code library with your preferred library. Le code HTML contient un qrCode élément dans lequel vous pouvez placer un Code QR par le mécanisme qui fournit de votre bibliothèque.The HTML contains a qrCode element into which you can place a QR Code by whatever mechanism your library provides.

L’URL correctement formatée pour le Code QR est disponible dans le :The correctly formatted URL for the QR Code is available in the:

  • AuthenticatorUri propriété du modèle.AuthenticatorUri property of the model.
  • data-url propriété dans le qrCodeData élément.data-url property in the qrCodeData element.

Décalage horaire TOTP client et serveurTOTP client and server time skew

L’authentification TOTP (à usage unique mot de passe temporaire) dépend du périphérique à la fois le serveur et un authentificateur ayant une heure précise.TOTP (Time-based One-Time Password) authentication depends on both the server and authenticator device having an accurate time. Jetons durent uniquement pendant 30 secondes.Tokens only last for 30 seconds. Si des connexions de 2FA TOTP échouent, vérifiez que l’heure du serveur est précise et préférence synchronisée à un service NTP précis.If TOTP 2FA logins are failing, check that the server time is accurate, and preferably synchronized to an accurate NTP service.