Sécurisez votre application .NET

La base de données peut-elle être personnalisée ?

Vous venez de créer une application Web .NET Core et avez utilisé le générateur automatique de modèles pour Identity. En l'état, l'application est déjà capable d'authentifier les utilisateurs avec Entity Framework. Elle n'a besoin de rien d'autre pour effectuer ce processus. Toutefois, intéressons-nous de plus près à la base de données créée pour stocker les données des utilisateurs de votre application et sur la marche à suivre pour la personnaliser et l'adapter à une application spécifique.

Exécutez votre application et inscrivez un nouvel utilisateur. Ensuite, faites ceci :

1. Dans Visual Studio, cliquez sur le menu Affichage, puis sélectionnez Explorateur d'objets SQL Server.

2. Sous SQL Server dans l'explorateur d'objets SQL Server, trouvez la base de données locale, (localdb)\MSSQLLocalDB.

3. Développez-la ainsi que le dossier Bases de données qu'elle contient.

4. Recherchez votre projet, puis développez le dossier Tables.

5. Vous y trouverez plusieurs tables créées par Identity et Entity Framework pour votre application. Chacune de ces tables commence par le préfixe AspNet. Nous les examinerons en détail plus tard, mais commençons par nous intéresser à AspNetUsers. Cette table contient les comptes que vous avez inscrits. Faites un clic droit sur AspNetUsers et choisissez Afficher les données dans le menu contextuel. 

Une fois que vous avez choisi Afficher les données dans le menu contextuel, une fenêtre similaire à celle-ci s'affiche : 

Elle présente le contenu de la table AspNetUsers. L'utilisateur que j'ai inscrit avec l'adresse e-mail myclass@openclassrooms.com est affiché. Cette table et toutes les entrées qu'elle contient sont créées par Entity Framework et Identity pour assurer une gestion sécurisée des comptes d'utilisateurs.

6. Retournez sur l'explorateur d'objets SQL Server. Développez la table AspNetUsers, puis le dossier Colonnes qu'elle contient. 

Vous pouvez voir une liste de toutes les définitions des colonnes de la table AspNetUsers. Il s'agit des propriétés standard de chaque compte utilisateur créé de cette façon. Mais nous avons parlé de personnaliser ces comptes, n'est-ce pas ?

Personnalisez les données utilisateur

Vous vous souvenez de ces deux classes que nous avons générées automatiquement à la fin du chapitre précédent ? On a dit qu'on y reviendrait plus tard. Le moment est venu !

Ajoutez des données personnelles à la classe utilisateur

Cliquez sur Areas > Identity > Data, comme illustré ci-dessous :

Vous verrez alors deux classes :  MonAppliSecuriseeContext et MonAppliSecuriseeUser .

La classe du contexte des données n'a pour le moment rien de spécial. Elle est tout à fait générique. Regardons plutôt la classe  MonAppliSecuriseeUser . Double-cliquez dessus pour l'ouvrir dans l'éditeur. Votre fichier devrait ressembler à ceci :

Voici une version accessible du code que vous devriez voir dans le fichier :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Identity;

namespace MonAppliSecurisee.Areas.Identity.Data
{
   // Add profile data for application users by adding properties to the MySecureAppUser class
   // 66 references
   public class MonAppliSecuriseeUser : IdentityUser
   {
   }
}

Pas grand-chose à voir, n'est-ce pas ? Il s'agit simplement d'une classe vide. La caractéristique essentielle de cette classe réside dans le fait qu'elle étend la classe IdentityUser, la classe de base utilisée par Identity et Entity Framework pour créer les comptes d'utilisateurs sécurisés. Il est maintenant temps de personnaliser ces comptes. C'est dans cette classe qu'on le fait. Allons-y.

Par défaut, vos utilisateurs n'ont pas de nom. Nous ne souhaitons pas qu'ils soient entièrement anonymes. Ajoutez donc des propriétés pour les noms et prénoms.

Une fois que vous aurez terminé, votre nouvelle classe devrait se présenter comme suit :

Voici une version accessible du code que vous devriez voir dans le fichier :

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Identity;

namespace MonAppliSecurisee.Areas.Identity.Data
{
   // Add profile data for application users by adding properties to the MySecureAppUser class
   // 66 references
   public class MonAppliSecuriseeUser : IdentityUser
   {
      // 0 references | 0 exceptions
 public string Prenom { get; set; }
      // 0 references | 0 exceptions
 public string Nom { get; set; }
      |
   }
}

Maintenant, revenez en arrière et ajoutez l'attribut  [PersonalData]  au-dessus de chacune de ces propriétés.

À quoi sert exactement l'ajout de l'attribut  [PersonalData]  ? Les propriétés associées à cet attribut sont l'objet d'un traitement spécifique. Elles sont :

• supprimées lorsque la page Razor Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml appelle UserManager.Delete ;

• incluses dans les données téléchargées par la page Razor Areas/Identity/Pages/Account/Manage/DownloadPersonalData.cshtml.

Modifiez les pages et actions pour les adapter aux nouvelles données

Tout d'abord, vous devez mettre à jour la classeInputModel dans Areas/Identity/Pages/Account/Manage/Index.cshtml.cs. 

1. Recherchez le fichier et ouvrez-le.

2. Faites-le défiler jusqu'à la classe InputModel (autour de la ligne 44).

3. Ajoutez au modèle des propriétés correspondant aux propriétés de nom et prénom que vous avez ajoutées à la classe utilisateur. 

Voici une version accessible du code que vous devriez voir dans le fichier :

      public class InputModel
      {
         [Required]
         [EmailAddress]
         // 3 references | 0 exceptions
 public string Email { get; set; }

         [Phone]
         [Display(Name = "Numéro de téléphone")]
         // 3 references | 0 exceptions
 public string PhoneNumber { get; set; }

         [Display(Name = "Prénom")]
         // 0 references | 0 exceptions
 public string Prenom { get; set; }

         [Display(Name= "Nom")]
         // 0 references | 0 exceptions
 public string Nom { get; set; }
      }

4. Faites défiler le fichier et recherchez l'endroit où la classeInputModel reçoit les données des utilisateurs avec la méthode  OnGetAsync . Ajoutez le code permettant d'affecter les valeurs de la classe utilisateur aux propriétés de la classe  InputModel . 

Voici une version accessible du code que vous devriez voir dans le fichier :

 var userName = await _userManager.GetUserNameAsync(user);
 var email = await _userManager.GetEmailAsync(user);
 var numeroTelephone = await _userManager.GetPhoneNumberAsync(user);

         Username = userName;

         Input = new InputModel
         {
            Email = email,
            PhoneNumber = numeroTelephone
            Prenom = user.Prenom,
            Nom = user.Nom
         };

         IsEmailConfirmed = await _userManager.IsEmailConfirmedAsync(user);

         return Page();
      }    

5. Faites maintenant défiler l'écran jusqu'à la méthode OnPostAsync et cherchez à quel endroit l'objet utilisateur est récupéré auprès deUserManager.

6. Ajoutez-y du code permettant d'affecter les valeurs du modèle publié aux propriétés correspondantes dans l'objet utilisateur.

 if (!ModelState.IsValid)
         {
            return Page();
         }

 var user = await _userManager.GetUserAsync(User);
         if (user == null)
         {
 return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
         }
 if (Input.Prenom != user.Prenom)
         {
            user.Prenom = Input.Prenom;
         }
 if (Input.Nom != user.Nom)
         {
            user.Nom = Input.Nom;
         }

7. Vous devez encore apporter une dernière modification. À la fin de la méthode, juste avant l'actualisation de la connexion de l'utilisateur, vous devez mettre à jour l'objet utilisateur. Pour ce faire, appelez UserManager :  await _userManager.UpdateAsync(user); . Ajoutez cette ligne, comme indiqué ci-dessous : 

Voici une version accessible du code que vous devriez voir dans le fichier :

 var numeroTelephone = await _userManager.GetPhoneNumberAsync(user);
 if (Input.PhoneNumber != numeroTelephone)
         {
 var setPhoneResult = await _userManager.SetPhoneNumberAsync(user, Input.PhoneNumber);
 if (!setPhoneResult.Succeeded)
            {
 var userId = await _userManager.GetUserIdAsync(user);
               throw new InvalidOperationException($"Unexpected error occurred setting phone number.");
            }
         }

         await _userManager.UpdateAsync(user);

         await _signInManager.RefreshSignInAsync(user);
         StatusMessage = "Your profile has been updated";
         return RedirectToPage();

Vous devez ensuite ajouter les champs de formulaire aux pages qui utilisent la classe InputModel. Ouvrez la page Areas/Identity/Pages/Account/Manage/Index.cshtml et faites-la défiler jusqu'à l'élément de groupe de formulaire qui reçoit le numéro de téléphone de l'utilisateur. Insérez les éléments de formulaire dans le groupe du formulaire comme illustré ci-dessous : 

Voici une version accessible du code que vous devriez voir dans le fichier :

         <div class="form-group">
            <label asp-for="Input.Prenom"></label>
            <input asp-for="Input.Prenom" class="form-control" />
            <label asp-for="Input.Nom"></label>
            <input asp-for="Input.Nom" class="form-control" />
            <label asp-for="Input.PhoneNumber"></label>
            <input asp-for="Input.PhoneNumber" class="form-control" />
            <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
         </div>

Exercice de code : mettez à jour la page Account/Register.cshtml

Vous venez d'apporter les modifications nécessaires à la classe InputModel et à la page Areas/Identity/Pages/Account/Manage/Index.cshtml. En vous appuyant sur ce que vous venez d'apprendre, mettez à jour la page Register et son modèle de saisie pour qu'elle accepte les deux champs de nom que vous avez ajoutés à l'objet utilisateur.

Exercice de code : mettez à jour la base de données et testez votre nouveau code

Une fois que vous avez terminé le premier exercice, ouvrez la console du gestionnaire de packages et ajoutez une nouvelle migration à l'aide de la commande suivante :

Add-Migration CustomUserData

Mettez ensuite à jour la base de données :

Update-Database

Une fois la mise à jour terminée, testez votre application.

1. Inscrivez un nouvel utilisateur.

2. Vérifiez les données du nouvel utilisateur sur la page /Identity/Account/Manage.

3. Consultez les données personnelles de l'utilisateur sur la page /Identity/Account/Manage/PersonalData.

Dans la section suivante, nous allons voir comment utiliser des comptes externes tiers pour inscrire et authentifier des utilisateurs.

En résumé 

Voici les choses que vous avez appris à faire dans ce chapitre :

1. Personnaliser une classe utilisateur pour y inclure des données personnelles.

2. Modifier des vues et contrôleurs pour s'adapter aux évolutions des modèles de données utilisateur.

3. Inscrire et authentifier des utilisateurs dans une application MVC avec Entity Framework.

Maintenant que vous comprenez bien comment fonctionne l'authentification avec Entity Framework dans une application MVC, voyons comment vous pouvez authentifier des utilisateurs en utilisant des comptes externes.