Exercice - Configurer la prise en charge d’Identity

  • 15 minutes

Identity est prêt à l’emploi sans aucune personnalisation. Dans cette unité, Identity est ajouté à un projet ASP.NET Core Razor Pages existant.

Obtenir et ouvrir le projet de démarrage

Remarque

Si vous souhaitez utiliser .devcontainer dans GitHub Codespaces, accédez à vos codespaces pour le dépôt MicrosoftDocs/mslearn-secure-aspnet-core-identity. Créez un codespace à l’aide de la branche main, puis passez à l’étape 3.

  1. Dans une fenêtre de terminal, exécutez la commande suivante pour obtenir le projet de démarrage :

    git clone https://github.com/MicrosoftDocs/mslearn-secure-aspnet-core-identity

  2. Basculez vers le répertoire du code source et lancez Visual Studio Code :

    cd mslearn-secure-aspnet-core-identity
code .

    Visual Studio Code s’ouvre. Acceptez les invites pour installer les extensions recommandées ou sélectionnez Rouvrir dans le conteneur si vous souhaitez utiliser .devcontainer.

    Conseil

    Si vous manquez l’invite pour rouvrir dans le conteneur, appuyez sur Ctrl+Maj+P pour ouvrir la palette de commandes, puis recherchez et sélectionnez Dev Containers : Rouvrir dans le conteneur.

  3. Une fois le projet chargé (localement ou dans le conteneur), appuyez sur Ctrl+Maj+` pour ouvrir un nouveau volet de terminal.

  4. Dans le nouveau volet de terminal, définissez votre emplacement sur le répertoire RazorPagesPizza :

    cd RazorPagesPizza

  5. Dans le volet Explorateur, développez le répertoire RazorPagesPizza pour afficher le code. RazorPagesPizza est le répertoire du projet. Tout du long, partez du principe que tous les chemins abordés dans ce module sont relatifs à cet emplacement.

Explorer l’application

Nous allons exécuter l’application pour avoir une introduction rapide.

  1. Dans le volet du terminal, générez le projet et exécutez l’application :

    dotnet run

  2. Notez l’URL affichée dans la sortie du terminal. Par exemple : https://localhost:7192.

  3. Ouvrez l’application dans votre navigateur en sélectionnant l’URL avec Ctrl+clic.

    Important

    Si vous utilisez .devcontainer dans Docker, le certificat SSL qui se trouve dans le conteneur ne sera pas approuvé par votre navigateur. Pour afficher l’application web, vous devez effectuer l’une des opérations suivantes :

    • Ignorez l’erreur de certificat. Si vous utilisez Microsoft Edge, sélectionnez Options avancées et Continuer sur localhost (non recommandé). Les détails varient selon le navigateur.
    • Enregistrez le certificat et ajoutez-le à vos autorités de certification approuvées.
    • Importez un certificat de développement existant dans le conteneur. Pour plus d’informations, consultez les commentaires générés dans ./devcontainer/devcontainter.json.

    Si vous choisissez d’importer un certificat de développement existant dans le conteneur, le chemin du conteneur /root/.aspnet/ est exposé en tant que .devcontainer/persisted-data/.aspnet en dehors du conteneur. C’est pour que ce soit pratique pour vous.

    Si vous utilisez .devcontainer dans GitHub Codespaces, aucune action n’est requise. Codespaces gère automatiquement la connexion SSL proxy.

  4. Explorez l’application web dans le navigateur. Utilisation des liens sur l’en-tête :

    1. Accéder à Liste de pizzas
    2. Revenir dans Accueil

    Notez que vous n’êtes pas obligé de vous authentifier.

  5. Appuyez sur Ctrl+C dans le volet du terminal pour arrêter l’application.

Ajouter ASP.NET Core Identity au projet

L’implémentation d’Identity par défaut peut être ajoutée avec des outils en ligne de commande dotnet.

  1. Installez le générateur automatique (scaffolder) de code ASP.NET Core :

    dotnet tool install dotnet-aspnet-codegenerator --version 6.0.2 --global

    Le générateur automatique est un outil .NET Core qui :

    • Est utilisé pour ajouter les composants Identity par défaut au projet.
    • Permet de personnaliser les composants de l’interface utilisateur Identity dans l’unité suivante.
    • Est appelé via dotnet aspnet-codegenerator dans ce module.

  2. Ajoutez les packages NuGet suivants au projet :

    dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design --version 6.0.2
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore --version 6.0.3
dotnet add package Microsoft.AspNetCore.Identity.UI --version 6.0.3
dotnet add package Microsoft.EntityFrameworkCore.Design --version 6.0.3
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 6.0.3

    Ces packages installent les modèles de génération de code et les dépendances utilisés par le générateur automatique.

    Conseil

    Pour voir les générateurs disponibles :

    • Dans l’interpréteur de commandes, exécutez dotnet aspnet-codegenerator -h.
    • Quand vous êtes dans Visual Studio, cliquez avec le bouton droit sur le projet dans l’Explorateur de solutions, puis sélectionnez Ajouter>Nouvel élément généré automatiquement.

  3. Utilisez le générateur automatique pour ajouter les composants Identity par défaut au projet. Exécutez la commande suivante dans le terminal :

    dotnet aspnet-codegenerator identity --useDefaultUI --dbContext RazorPagesPizzaAuth

    Dans la commande précédente :

    • Le générateur identifié comme identity est utilisé pour ajouter le framework Identity au projet.
    • L’option --useDefaultUI indique qu’une bibliothèque de classes Razor (RCL) contenant les éléments d’interface utilisateur par défaut est utilisée. Le démarrage est utilisé pour appliquer un style aux composants.
    • L’option --dbContext spécifie le nom d’une classe de contexte de base de données EF Core à générer.

    La structure de répertoires Areas suivante s’affiche dans le répertoire RazorPagesPizza :

    • Areas
      • Identity (s’affiche sur la même ligne que Areas)
        • Data
          • RazorPagesPizzaAuth.cs
        • Pages
          • _ValidationScriptsPartial.cshtml
          • _ViewStart.cshtml

    Conseil

    Si le répertoire Areas n’apparaît pas automatiquement dans le volet Explorateur, sélectionnez le bouton Actualiser l’Explorateur dans l’en-tête MSLEARN-SECURE-ASPNET-CORE-IDENTITY dans le volet Explorateur.

    Les zones offrent un moyen de partitionner une application web ASP.NET Core en groupes fonctionnels plus petits.

    Le générateur de modèles automatique a également apporté à Program.cs les modifications suivantes mises en évidence, retouchées pour une meilleure lisibilité :

    using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using RazorPagesPizza.Areas.Identity.Data;
var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("RazorPagesPizzaAuthConnection"); 
builder.Services.AddDbContext<RazorPagesPizzaAuth>(options => options.UseSqlServer(connectionString)); 
builder.Services.AddDefaultIdentity<IdentityUser>(options => options.SignIn.RequireConfirmedAccount = true)
      .AddEntityFrameworkStores<RazorPagesPizzaAuth>();
      
// Add services to the container.
builder.Services.AddRazorPages();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error");
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();

app.MapRazorPages();

app.Run();

    Dans le code précédent :

    • La chaîne de connexion RazorPagesPizzaAuthConnection est lue à partir d’appsettings.json.
    • La classe de contexte de base de données EF Core, appelée RazorPagesPizzaAuth, est configurée avec la chaîne de connexion.
    • Les services Identity sont inscrits, notamment l’interface utilisateur par défaut, les fournisseurs de jetons et l’authentification basée sur les cookies.
      • .AddDefaultIdentity<IdentityUser> indique aux services Identity d’utiliser le modèle utilisateur par défaut.
      • L’expression lambda options => options.SignIn.RequireConfirmedAccount = true spécifie que les utilisateurs doivent confirmer leurs comptes e-mail.
      • .AddEntityFrameworkStores<RazorPagesPizzaAuth>() spécifie qu’Identity utilise le magasin Entity Framework Core par défaut pour sa base de données. La classe RazorPagesPizzaAuthDbContext est utilisée.
    • app.UseAuthentication(); active les fonctionnalités d’authentification. Plus précisément, une instance du middleware d’authentification ASP.NET Core est ajoutée au pipeline de gestion des requêtes HTTP de l’application.

Configurer la connexion à la base de données

La section ConnectionStrings dans appsettings.json doit être semblable au code JSON suivant :

"ConnectionStrings": {
    "RazorPagesPizzaAuthConnection": "Server=(localdb)\\mssqllocaldb;Database=RazorPagesPizza;Trusted_Connection=True;MultipleActiveResultSets=true"
}

Cette chaîne de connexion pointe vers une instance de SQL Server Express LocalDB par défaut. Si vous utilisez .devcontainer, vous devez changer la chaîne de connexion comme suit. Enregistrez vos modifications.

"ConnectionStrings": {
    "RazorPagesPizzaAuthConnection": "Data Source=localhost;Initial Catalog=RazorPagesPizza;Integrated Security=False;User Id=sa;Password=P@ssw0rd;MultipleActiveResultSets=True"
}

Cela met à jour la chaîne de connexion pour se connecter à l’instance de SQL Server dans le conteneur.

Mettre à jour la base de données

Maintenant que vous avez vérifié la chaîne de connexion, vous pouvez générer et exécuter une migration pour créer la base de données.

  1. Exécutez la commande suivante pour générer l’application :

    dotnet build

    La génération réussit sans avertissements. Si la génération échoue, consultez la sortie pour des informations de dépannage.

  2. Installez l’outil de migration Entity Framework Core :

    dotnet tool install dotnet-ef --version 6.0.3 --global

    L’outil de migration est un outil .NET qui :

    • Génère du code appelé migration pour créer et mettre à jour la base de données qui prend en charge le modèle d’entité Identity.
    • Exécute des migrations sur une base de données existante.
    • Est appelé via dotnet ef dans ce module.

  3. Créez et exécutez une migration EF Core pour mettre à jour la base de données :

    dotnet ef migrations add CreateIdentitySchema
dotnet ef database update

    La migration EF Core CreateIdentitySchema a appliqué un script de changement DDL (Data Definition Language) pour créer les tables prenant en charge Identity. Par exemple, la sortie suivante représente une instruction CREATE TABLE générée par la migration :

    info: Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (98ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      CREATE TABLE [AspNetUsers] (
          [Id] nvarchar(450) NOT NULL,
          [UserName] nvarchar(256) NULL,
          [NormalizedUserName] nvarchar(256) NULL,
          [Email] nvarchar(256) NULL,
          [NormalizedEmail] nvarchar(256) NULL,
          [EmailConfirmed] bit NOT NULL,
          [PasswordHash] nvarchar(max) NULL,
          [SecurityStamp] nvarchar(max) NULL,
          [ConcurrencyStamp] nvarchar(max) NULL,
          [PhoneNumber] nvarchar(max) NULL,
          [PhoneNumberConfirmed] bit NOT NULL,
          [TwoFactorEnabled] bit NOT NULL,
          [LockoutEnd] datetimeoffset NULL,
          [LockoutEnabled] bit NOT NULL,
          [AccessFailedCount] int NOT NULL,
          CONSTRAINT [PK_AspNetUsers] PRIMARY KEY ([Id])
      );

    Conseil

    La commande ef a-t-elle levé une erreur indiquant que LocalDb n’est pas pris en charge ? Vérifiez que vous avez défini votre chaîne de connexion, comme décrit dans la section « Configurer la connexion à la base de données » !

  4. L’extension SQL Server a été ajoutée à Visual Studio Code, si nécessaire, quand vous avez accepté les extensions recommandées. Appuyez sur Ctrl+Alt+D pour basculer dans le volet SQL Server.

  5. Développez les nœuds sous la connexion de base de données existante. Développez le nœud Bases de données, le nœud RazorPagesPizza et enfin le nœud Tables. Notez la liste des tables. Cela confirme que la migration a réussi.

    Base de données RazorPagesPizza avec les tables récemment créées.

    Notes

    L’image précédente montre un exemple utilisant SQL Server Express LocalDB. Lorsque vous utilisez .devcontainer, la connexion est nommée mssql-container.

Revenez au volet Explorateur. Dans Pages/Shared/_Layout.cshtml, remplacez le commentaire @* Add the _LoginPartial partial view *@ par ce qui suit.

<partial name="_LoginPartial" />

Le balisage précédent affiche la vue partielle _LoginPartial dans l’en-tête d’une page qui utilise la disposition par défaut. _LoginPartial a été ajouté par la structure d’Identity. Cette vue partielle présente à l’utilisateur les liens Connexion et Inscription si celui-ci n’est pas connecté.

Tester la fonctionnalité Identity

C’est tout ce qu’il faut pour ajouter l’implémentation d’Identity par défaut. Il est temps de la tester !

  1. Vérifiez que vous avez enregistré tous vos changements.

  2. Dans le volet du terminal, générez le projet et exécutez l’application :

    dotnet run

  3. Accédez à l’application dans votre navigateur comme avant.

  4. Sélectionnez le lien S’inscrire dans l’en-tête de l’application. Renseignez le formulaire pour créer un nouveau compte.

    La page Confirmation d’inscription s’affiche. Étant donné que l’application n’a pas encore été configurée pour envoyer des e-mails de confirmation, le lien de confirmation est fourni dans cette page.

  5. Sélectionnez le lien de confirmation. Un message de confirmation s’affiche.

  6. Sélectionnez le lien Connexion dans l’en-tête de l’application et connectez-vous.

    Une fois que la connexion a réussi :

    • Vous êtes redirigé vers la page d’accueil.
    • L’en-tête de l’application affiche Bonjour [adresse e-mail] ! et un lien Déconnexion.
    • Un cookie appelé .AspNetCore.Identity.Application est créé. Identity conserve les sessions utilisateur avec l’authentification basée sur les cookies.

  7. Sélectionnez le lien Se déconnecter dans l’en-tête de l’application.

    Une fois la déconnexion réussie, le cookie .AspNetCore.Identity.Application est supprimé pour arrêter la session utilisateur.

  8. Appuyez sur Ctrl+C dans le volet du terminal pour arrêter l’application.

Résumé

Dans cette unité, vous avez ajouté l’implémentation d’Identity par défaut à une application web existante. Dans la prochaine unité, vous allez découvrir comment étendre et personnaliser Identity.