Activer la génération de code QR pour les applications d’authentification TOTP dans ASP.NET Core

  • Article

ASP.NET Core est fourni avec la prise en charge des applications d’authentificateur pour l’authentification individuelle. Les applications d’authentification à deux facteurs (2FA), utilisant un algorithme de mot de passe à usage unique basé sur le temps (TOTP), sont l’approche recommandée par le secteur pour la 2FA. La 2FA utilisant TOTP est préférée à la 2FA SMS. Une application d’authentification fournit un code de 6 à 8 chiffres que les utilisateurs doivent entrer après avoir confirmé leur nom d’utilisateur et leur mot de passe. En règle générale, une application d’authentification est installée sur un smartphone.

Les modèles d’application web ASP.NET Core prennent en charge les authentificateurs, mais ne prennent pas en charge la génération de code QR. Les générateurs de code QR facilitent la configuration de la 2FA. Ce document fournit des conseils pour les applications Pages et MVC Razor sur l’ajout de la génération de code QR à la page de configuration 2FA. Pour obtenir des conseils qui s’appliquent aux applications web Blazor, consultez Activer la génération de code QR pour les applications d’authentification TOTP dans une application web Blazor ASP.NET Core.

Les modèles d’application web ASP.NET Core prennent en charge les authentificateurs, mais ne prennent pas en charge la génération de code QR. Les générateurs de code QR facilitent la configuration de la 2FA. Ce document vous guide tout au long de l’ajout de la génération de code QR à la page de configuration 2FA.

L’authentification à deux facteurs ne se produit pas à l’aide d’un fournisseur d’authentification externe, tel que Google ou Facebook. Les connexions externes sont protégées par n’importe quel mécanisme fourni par le fournisseur de connexion externe. Considérez, par exemple, que le fournisseur d’authentification Microsoft nécessite une clé matérielle ou une autre approche 2FA. Si les modèles par défaut appliquent une 2FA « locale », les utilisateurs doivent alors remplir deux approches 2FA, ce qui n’est pas un scénario couramment utilisé.

Ajouter de codes QR à la page de configuration 2FA

Ces instructions utilisent qrcode.js à partir du référentiel https://davidshimjs.github.io/qrcodejs/.

@section Scripts {
    @await Html.PartialAsync("_ValidationScriptsPartial")
}
  • Créez un nouveau fichier JavaScript appelé qr.js dans wwwroot/js et ajoutez le code suivant pour générer le code QR :
window.addEventListener("load", () => {
  const uri = document.getElementById("qrCodeData").getAttribute('data-url');
  new QRCode(document.getElementById("qrCode"),
    {
      text: uri,
      width: 150,
      height: 150
    });
});
  • Mettez à jour la section Scripts pour ajouter une référence à la bibliothèque qrcode.js précédemment téléchargée.
  • Ajoutez le fichier qr.js avec l’appel pour générer le code 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>
}
  • Supprimez le paragraphe qui vous lie à ces instructions.

Exécutez votre application et vérifiez que vous pouvez numériser le code QR et valider le code prouvé par l’authentificateur.

Modifier le nom du site dans le code QR

Le nom du site dans le code QR est tiré du nom de projet que vous choisissez lors de la création initiale de votre projet. Vous pouvez le modifier en cherchant la méthode GenerateQrCodeUri(string email, string unformattedKey) dans /Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs.

Le code par défaut du modèle se présente comme suit :

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, tiré du nom de votre solution. Elle peut être remplacée par n’importe quelle valeur, mais elle doit toujours être encodée en URL.

Utiliser une autre bibliothèque de code QR

Vous pouvez remplacer la bibliothèque de codes QR par votre bibliothèque préférée. Le code HTML contient un élément qrCode dans lequel vous pouvez placer un code QR selon le mécanisme fourni par votre bibliothèque.

L’URL correctement mise en forme pour le code QR est disponible dans :

  • Propriété AuthenticatorUri du modèle.
  • Propriété data-url dans l’élément qrCodeData.

Inégalité du temps du client et du serveur TOTP

L’authentification TOTP (mot de passe à usage unique basé sur le temps) dépend à la fois du serveur et de l’appareil d’authentificateur ayant une heure précise. Les jetons ne durent que 30 secondes. Si les connexions 2FA TOTP échouent, vérifiez que l’heure du serveur est précise et, de préférence, synchronisée avec un service NTP précis.