Exercice – Configurer l’authentification multifacteur

  • 10 minutes

Dans l’unité précédente, vous avez appris comment ASP.NET Core Identity implémente un code de secret à usage unique basé sur le temps (TOTP) pour l’authentification multifacteur (MFA). Dans cette unité, vous personnalisez le formulaire Configurer l’application d’authentification existant pour fournir un code QR qui contient la clé d’inscription.

Génération des codes QR

Il existe plusieurs stratégies pour générer le code QR. Un exemple de la documentation utilise une bibliothèque JavaScript côté client. Dans cette unité, c’est un package NuGet tiers qui est utilisé pour générer le code QR avec C# sur le serveur. L’image du code QR qui en résulte est injectée dans un élément d’espace réservé HTML en tant que chaîne codée en base 64.

Ajouter un service de code QR

Créons tout ce dont vous avez besoin pour générer des codes QR sur le formulaire Configurer l’application d’authentification.

  1. Dans le volet du terminal, installez le package NuGet QRCoder :

    dotnet add package QRCoder --version 1.6.0

  2. Dans le volet Explorateur, cliquez avec le bouton droit sur le dossier Services et ajoutez un nouveau fichier appelé QRCodeService.cs. Ajoutez le code suivant :

    using QRCoder;

namespace RazorPagesPizza.Services;
public class QRCodeService
{
    private readonly QRCodeGenerator _generator;

    public QRCodeService(QRCodeGenerator generator)
    {
        _generator = generator;
    }

    public string GetQRCodeAsBase64(string textToEncode)
    {
        QRCodeData qrCodeData = _generator.CreateQrCode(textToEncode, QRCodeGenerator.ECCLevel.Q);
        var qrCode = new PngByteQRCode(qrCodeData);

        return Convert.ToBase64String(qrCode.GetGraphic(4));
    }
}

    Le code précédent :

    • Utilise l’injection du constructeur pour accéder à une instance de la classe QRCodeGenerator de la bibliothèque.
    • Expose la méthode GetQRCodeAsBase64 pour retourner la chaîne encodée en base 64. La valeur entière passée à GetGraphic détermine les dimensions du code QR. Dans notre cas, le code QR généré est composé de blocs de quatre pixels au carré.

  3. Dans Program.cs, ajoutez les lignes mises en surbrillance :

    using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
using Microsoft.AspNetCore.Identity.UI.Services;
using RazorPagesPizza.Services;
using QRCoder;

var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection");
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<RazorPagesPizzaUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddTransient<IEmailSender, EmailSender>();
builder.Services.AddSingleton(new QRCodeService(new QRCodeGenerator()));

var app = builder.Build();

    QRCodeService est inscrit en tant que service singleton dans le conteneur IoC dans Program.cs.

Personnaliser l’authentification multifacteur

Maintenant que vous pouvez générer des codes QR, vous pouvez incorporer un code QR dans le formulaire Configurer l’application d’authentification.

  1. Ouvrez Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml.cs et apportez les changements suivants :

    1. Pour stocker la représentation sous forme de chaîne en base 64 du code QR, ajoutez la propriété suivante à la classe EnableAuthenticatorModel :

      public class EnableAuthenticatorModel : PageModel
{
    private readonly UserManager<RazorPagesPizzaUser> _userManager;
    private readonly ILogger<EnableAuthenticatorModel> _logger;
    private readonly UrlEncoder _urlEncoder;

    public string QrCodeAsBase64 { get; set; }

    2. Incorporez les changements en surbrillance dans le gestionnaire de page OnGetAsync :

      public async Task<IActionResult> OnGetAsync([FromServices] QRCodeService qrCodeService)
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
        return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    await LoadSharedKeyAndQrCodeUriAsync(user);
    QrCodeAsBase64 = qrCodeService.GetQRCodeAsBase64(AuthenticatorUri);

    return Page();
}

      Dans le gestionnaire de page précédent, l’injection de paramètres fournit une référence au service singleton QRCodeService.

    3. Pour résoudre la référence à QRCodeService, ajoutez l’instruction using suivante en haut du fichier. Enregistrez vos modifications.

      using RazorPagesPizza.Services;

    4. Incorporez le changement en surbrillance dans la méthode GenerateQrCodeUri.

      private string GenerateQrCodeUri(string email, string unformattedKey)
{
    return string.Format(
        CultureInfo.InvariantCulture,
        AuthenticatorUriFormat,
        _urlEncoder.Encode("RazorPagesPizza"),
        _urlEncoder.Encode(email),
        unformattedKey);
}

      Cela définit le nom complet de la clé dans votre application TOTP.

  2. Dans Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml, apportez les changements en surbrillance suivants et enregistrez :

    <li>
    <p>Scan the QR Code or enter this key <kbd>@Model.SharedKey</kbd> into your two factor authenticator app. Spaces and casing do not matter.</p>
    <div class="alert alert-info">Learn how to <a href="https://go.microsoft.com/fwlink/?Linkid=852423">enable QR code generation</a>.</div>
    <div id="qrCode">
        <img alt="embedded QR code" src="data:image/png;base64,@Model.QrCodeAsBase64" />
    </div>
    <div id="qrCodeData" data-url="@Model.AuthenticatorUri"></div>
</li>

    Le balisage précédent incorpore l’image encodée en base 64 dans la page.

Tester l’authentification multifacteur

Vous avez effectué toutes les modifications nécessaires pour un code QR sur le formulaire Configurer l’application d’authentification . Maintenant, vous pouvez facilement tester la fonctionnalité MFA.

  1. Vérifiez que vous avez enregistré toutes vos modifications.

  2. Générez et exécutez l’application avec dotnet run.

  3. Si ce n’est pas déjà fait, accédez au site et connectez-vous en tant qu’utilisateur inscrit. Sélectionnez le lien Hello, [First name] [Last name]! pour accéder à la page de gestion des profils, puis sélectionnez Authentification à deux facteurs.

  4. Sélectionnez le bouton Ajouter une application d’authentification.

  5. Suivez les instructions à l’écran pour inscrire et vérifier votre application d’authentification pour cet utilisateur.

    Par exemple, en utilisant Microsoft Authenticator sur Android, suivez ces étapes pour ajouter le compte à l’application :

    1. Ouvrez l’application Microsoft Authenticator.
    2. Sélectionnez le menu kebab (points de suspension verticaux) en haut à droite.
    3. Sélectionnez Ajouter un compte.
    4. Sélectionnez Autre compte (Google, Facebook, etc.).
    5. Scannez le code QR comme indiqué.

  6. Entrez le code de vérification fourni par votre application TOTP dans la zone de texte Code de vérification.

  7. Sélectionnez Vérifier.

    Si la vérification réussit, la page affiche une bannière Votre application d’authentification a été vérifiée et du code de récupération.

  8. Sous l’onglet SQL Server dans VS Code, cliquez avec le bouton droit sur la base de données RazorPagesPizza, puis sélectionnez Nouvelle requête. Entrez la requête suivante et appuyez sur Ctrl+Maj+E pour l’exécuter.

    SELECT FirstName, LastName, Email, TwoFactorEnabled
FROM dbo.AspNetUsers

    Pour l’utilisateur connecté, la sortie indique que la colonne TwoFactorEnabled est égale à 1. Étant donné que l’authentification multifacteur n’est pas activée pour l’autre utilisateur inscrit, la valeur de la colonne de l’enregistrement est 0.

  9. Dans l’application web, sélectionnez Se déconnecter, puis reconnectez-vous avec le même utilisateur.

  10. Entrez le code de vérification de l’application d’authentification TOTP dans la zone de texte Code de l’authentificateur. Sélectionnez le bouton Se connecter.

  11. Sélectionnez Bonjour [Prénom] [Nom] !. Ensuite, sélectionnez l’onglet Authentification à deux facteurs.

    Etant donné que Microsoft Authenticator est configuré, les boutons suivants s’affichent :

    • Désactiver 2FA
    • Réinitialiser les codes de récupération
    • Configurer une application d’authentification
    • Réinitialiser une application d’authentification

  12. Dans le volet du terminal dans VS Code, appuyez sur Ctrl+C pour arrêter l’application.

Résumé

Dans cette unité, vous avez ajouté l’option de générer un code QR dans le formulaire Configurer l’application d’authentification. Dans l’unité suivante, vous pourrez apprendre à utiliser Identity pour stocker les revendications et appliquer des stratégies d’autorisation.