Partager via

Activer la génération de code QR pour les applications d’authentificateur TOTP dans une application Blazor Web App ASP.NET Core

Remarque

Ceci n’est pas la dernière version de cet article. Pour la version actuelle, consultez la version .NET 9 de cet article.

Important

Ces informations portent sur la préversion du produit, qui est susceptible d’être en grande partie modifié avant sa commercialisation. Microsoft n’offre aucune garantie, expresse ou implicite, concernant les informations fournies ici.

Pour la version actuelle, consultez la version .NET 9 de cet article.

Cet article explique comment configurer un composant ASP.NET Core Blazor Web App pour l'authentification à deux facteurs (2FA) avec des codes QR générés par des applications d'authentification TOTP (Time-based One-time Password Algorithm).

Pour une introduction à l'authentification à deux facteurs avec les applications d'authentification TOTP, voir Activer la génération de codes QR pour les applications d'authentification TOTP dans ASP.NET Core.

Les conseils donnés dans cet article reposent soit sur la création de l'application avec des comptes individuels pour le type d'authentification de la nouvelle application, soit sur l'intégration de Identity dans une application existante. Pour obtenir des conseils sur l'utilisation de l'interface de programmation .NET au lieu de Visual Studio pour intégrer Identity dans une application existante, voir l'outil de génération de code ASP.NET Core (« aspnet-codegenerator »).

Avertissement

Les codes TOTP doivent être gardés secrets car ils peuvent être utilisés pour s'authentifier plusieurs fois avant d'expirer.

Ajouter de codes QR à la page de configuration 2FA

Un code QR généré par l'application pour configurer 2FA avec une application d'authentification TOTP doit être généré par une bibliothèque de codes QR.

Le guide de cet article utilise manuelbl/QrCodeGenerator, mais vous pouvez utiliser n'importe quelle bibliothèque de génération de code QR.

Ajoutez une référence de package pour le package NuGet Net.Codecrete.QrCodeGenerator.

Remarque

Pour obtenir des conseils sur l’ajout de packages à des applications .NET, consultez les articles figurant sous Installer et gérer des packages dans Flux de travail de la consommation des packages (documentation NuGet). Vérifiez les versions du package sur NuGet.org.

Ouvrez le composant EnableAuthenticator dans le dossier Components/Account/Pages/Manage. En haut du fichier, sous la directive @page, ajoutez une directive @using pour l'espace de noms QrCodeGenerator :

@using Net.Codecrete.QrCodeGenerator

Supprimez l'élément <div> qui contient les instructions du code QR et les deux éléments <div> où le code QR doit apparaître et où les données du code QR sont stockées dans la page :

- <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>

Remplacer les éléments supprimés par le balisage suivant :

<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>

Juste à l'intérieur du bloc @code d'ouverture, changez la déclaration de variable pour authenticatorUri en svgGraphicsPath :

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

Modifier le nom du site dans la méthode GenerateQrCodeUri. La valeur par défaut est Microsoft.AspNetCore.Identity.UI. Remplacez la valeur par un nom de site reconnaissable que les utilisateurs peuvent facilement identifier dans leur application d’authentification. Les développeurs définissent généralement un nom de site correspondant au nom de l'entreprise. Nous vous recommandons de limiter la longueur du nom du site à 30 caractères ou moins pour permettre l’affichage du nom du site sur des écrans d’appareils mobiles étroits.

Dans l’exemple suivant, la valeur Microsoft.AspNetCore.Identity.UI par défaut est remplacée par le nom de la société Weyland-Yutani Corporation (©1986 20th Century Studios Aliens).

Dans la méthode GenerateQrCodeUri :

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

Au bas de la méthode LoadSharedKeyAndQrCodeUriAsync, ajoutez le mot-clé var à la ligne qui définit authenticatorUri, ce qui en fait une variable locale implicitement typée :

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

Ajouter les lignes de code suivantes à la fin de la méthode LoadSharedKeyAndQrCodeUriAsync :

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

Lancez l'application et assurez-vous que le code QR peut être scanné et que le code est validé.

Avertissement

Un code TOTP ASP.NET Core doit être conservé secret, car il peut être utilisé pour s’authentifier plusieurs fois avant son expiration.

Composant EnableAuthenticator dans la source de référence

Le composant EnableAuthenticator peut être inspecté dans la source de référence :

Composant EnableAuthenticator dans la source de référence

Remarque

Les liens de documentation vers la source de référence .NET chargent généralement la branche par défaut du référentiel, qui représente le développement actuel pour la prochaine version de .NET. Pour sélectionner une balise pour une version spécifique, utilisez la liste déroulante Échanger les branches ou les balises. Pour plus d’informations, consultez Comment sélectionner une balise de version du code source ASP.NET Core (dotnet/AspNetCore.Docs #26205).

Échecs dus à l'asymétrie du temps TOTP

L'authentification TOTP dépend de la synchronisation temporelle précise entre l'appareil exécutant l'application d'authentification TOTP et le serveur de l'application. Les jetons TOTP ne sont valides que pendant 30 secondes. Si les connexions échouent en raison de codes TOTP rejetés, vérifiez que le temps exact est conservé, de préférence synchronisé avec un service NTP précis.

Ressources supplémentaires