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.

Ouvrir le projet de démarrage

Si vous souhaitez utiliser le codespace GitHub recommandé, accédez à vos codespaces pour le dépôt MicrosoftDocs/mslearn-secure-aspnet-core-identity. Créez un codespace en tirant parti de la branche main, puis passez à Explorer l’application.

Pour utiliser un conteneur de développement local, suivez ces étapes :

Dans une fenêtre Visual Studio Code, appuyez sur la touche F1 pour ouvrir la palette de commandes. Recherchez, puis sélectionnez Conteneurs de développement : Clone Repository in Container Volume....
Entrez l’URL de dépôt suivante : https://github.com/MicrosoftDocs/mslearn-secure-aspnet-core-identity. Sélectionnez la branche main. Visual Studio Code crée le conteneur de développement. Acceptez toutes les invites pour installer les extensions recommandées.
Passez à Explorer l’application.

Pour utiliser un environnement de développement local, suivez ces étapes :

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
```
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, mais NE sélectionnez PAS Rouvrir dans le conteneur si vous y êtes invité. Poursuivez les étapes suivantes.

Explorer l’application

Une fois le projet chargé, appuyez sur Ctrl+Maj+` pour ouvrir un nouveau volet de terminal.
Dans le nouveau volet de terminal, définissez votre emplacement sur le répertoire RazorPagesPizza :
```
cd RazorPagesPizza
```
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.

Nous allons exécuter l’application pour avoir une introduction rapide.
Dans le volet du terminal, générez le projet et exécutez l’application :
```
dotnet run
```
Notez l’URL affichée dans la sortie du terminal. Par exemple : https://localhost:7192.
Ouvrez l’application dans votre navigateur en sélectionnant l’URL avec Ctrl+clic.
Important

Si vous utilisez le Conteneur de développeur dans Docker en local, 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.
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.
Pour arrêter l’application, appuyez sur Ctrl+C dans le volet du terminal.

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.

Installez le générateur automatique (scaffolder) de code ASP.NET Core :
```
dotnet tool install dotnet-aspnet-codegenerator --version 8.0.* --global
```
Le générateur de modèle automatique est un outil .NET 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.
Ajoutez les packages NuGet suivants au projet :
```
dotnet add package Microsoft.VisualStudio.Web.CodeGeneration.Design --version 8.0.*
dotnet add package Microsoft.AspNetCore.Identity.EntityFrameworkCore --version 8.0.*
dotnet add package Microsoft.AspNetCore.Identity.UI --version 8.0.*
dotnet add package Microsoft.EntityFrameworkCore.Design --version 8.0.*
dotnet add package Microsoft.EntityFrameworkCore.SqlServer --version 8.0.*
dotnet add package Microsoft.EntityFrameworkCore.Tools --version 8.0.*
```
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.
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 --userClass RazorPagesPizzaUser
```
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.
- L’option --userClass spécifie le nom de la classe utilisateur à générer. La classe utilisateur par défaut est IdentityUser, mais étant donné que la classe utilisateur est développée dans une unité ultérieure, une classe utilisateur personnalisée nommée RazorPagesPizzaUser est spécifiée. La classe RazorPagesPizzaUser est dérivée de IdentityUser.
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
      - RazorPagesPizzaUser.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") 
    ?? throw new InvalidOperationException("Connection string 'RazorPagesPizzaAuthConnection' not found.");

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.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 RazorPagesPizzaAuth DbContext est utilisée.

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 développez en local, ne faites rien. Il s’agit de la chaîne de connexion appropriée.

Dans les Codespaces ou Conteneurs de développement, la chaîne de connexion est incorrecte. Si vous utilisez le Codespace ou Conteneur de développement, vous devez modifier la chaîne de connexion comme suit. Veillez à enregistrer vos modifications.

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

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.

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.
Installez l’outil de migration Entity Framework Core :
```
dotnet tool install dotnet-ef --version 8.0.* --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.

Pour mettre à jour la base de données, créez et exécutez une migration EF Core :

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

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

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 Identité. 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 !

Veillez à enregistrer toutes vos modifications.
Dans le volet du terminal, générez le projet et exécutez l’application :
```
dotnet run
```
Accédez à l’application dans votre navigateur comme avant.
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 été configurée pour envoyer des e-mails de confirmation, le lien de confirmation est fourni dans cette page.
Sélectionnez le lien de confirmation. Un message de confirmation s’affiche.
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.
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.
Pour arrêter l’application, appuyez sur Ctrl+C dans le volet du terminal.

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.