Démonstration 3: Les états des sessions
dans l’[Link] Core
Ce document résume les code snippets utiliser dans DOTNET_DEMO3:
Démonstration 3: Les états des sessions dans l’[Link] Core
Etape 2: Vérification de la connexion avec la base de données
Création de la table Utilisateurs:
Insertion des données dans la table utilisateurs:
Etape 3 : Préparation des pages Authentification / Inscription
Le formulaire du Login :
Le formulaire Register :
Le lien d'authentification:
Etape 4 : Installation et configuration des état de sessions
Configuration de la session
Activer l'utilisation des sessions
Etape 5 : Configuration du formulaire d’Authentification
La bibliothéque des session
La classe users
Les attributs de la class LoginModel
Lire les données a partir du formulaire
Vérification des données saisies
La méthode VerifierUtilisateurExiste()
La méthode VerifierPw()
La méthode AjouterUtilisateur()
Etape 6 : Utilisation des sessions pour Controller et Sauvegarder les données des utilisateurs
Sessions pour le contrôle (OnPost)
Initialisation des sessions (OnGet)
Sessions pour enregistrer les données des utilisateurs et redirection
Afficher les données des utilisateurs
Modifier le contenu d'une page à l'aide des sessions
Redirection vers la page d'authentification à l'aide des sessions
Etape Additionnel 1: Déconnexion d'un utilisateur
Etape Additionnel 2: Inscription d'un utilisateur
NB: Etape 1 et 7 sont réalisés à l'aide de la GUI de l'[Link]
Etape 2: Vérification de la connexion avec la base de
données
Création de la table Utilisateurs:
CREATE TABLE users(
id INT NOT NULL PRIMARY KEY IDENTITY,
firstName VARCHAR (100) NOT NULL,
lastName VARCHAR(100) NOT NULL,
userLogin VARCHAR(100) NOT NULL UNIQUE,
userPw VARCHAR (150) NOT NULL,
userType VARCHAR(20) NOT NULL );
Insertion des données dans la table utilisateurs:
INSERT INTO users(firstName,lastName,userLogin,userPw, userType) VALUES
('Jhon','Doe','admin@emsi','123456','admin');
INSERT INTO users(firstName,lastName,userLogin,userPw, userType) VALUES
('Jane','Doe','Jane@emsi','123456','user');
Etape 3 : Préparation des pages Authentification /
Inscription
Le formulaire du Login :
Dans un nouveau fichier nommée : pages/utilisateur/[Link], Modifier le code pour
Ajouter un titre de la page Login:
@page
@model DOTNET_DEMO.[Link]
@{
ViewData["Title"] = "Authentification";
}
<br />
<h2 class="text-center">Authentification</h2>
<hr />
//Formulaire ..
Ajout du formulaire:
<!--Titre-->
<form method="post" class="border rounded p-4">
<div class="form-outline mb-4">
<label class="form-label" for="email">Adresse electronique</label>
<input class="form-control" type="email" id="email" name="email"/>
</div>
<div class="form-outline">
<label class="form-label" for="pw">Mot de passe</label>
<input class="form-control" type="password" id="pw" name="pw" />
</div>
<div class="row mb-4">
<div class="col">
<a href="#!">Mot de passe oublié?</a>
</div>
</div>
<div class="form-row text-center">
<input class="col-md-10 btn btn-primary btn-block m-1" type="submit"
value="Se connecter" />
</div>
<div class="text-center">
<p>Créer un compte? <a asp-area="" asp-
page="/Utilisateur/Register">S'inscrire</a></p>
</div>
</form>
Le formulaire Register :
Dans le nouveau fichier crée pages/utilisateur/[Link]. Modifier le code pour Ajouter
un titre de la page Register, et après ajouter le forumlaire:
<!--Titre-->
<form method="post" class="border rounded p-4">
<div class="form-row mb-4 d-flex flex-row">
<div class="form-group col-md-6 m-1">
<label for="firstName">Nom </label>
<input class="form-control" type="text" id="firstName"
name="firstName" />
</div>
<div class="form-group col-md-6 m-1">
<label for="lastName">Prenom </label>
<input class="form-control" type="text" id="lastName"
name="lastName" />
</div>
</div>
<div class="form-row mb-4 d-flex flex-row">
<div class="form-group col-md-8 m-1">
<label class="form-label" for="email">Adresse electronique</label>
<input class="form-control" type="email" id="email" name="email" />
</div>
<div class="form-group col-md-4 m-1">
<label class="form-label" for="pw">Mot de passe </label>
<input class="form-control" type="password" id="pw" name="pw" />
</div>
</div>
<div class="form-row text-center">
<button type="submit" class="col-md-10 btn btn-primary btn-block m-1">
S'inscrire</button>
</div>
</form>
Le lien d'authentification:
Dans le nouveau fichier crée pages/shared/_Layout.cshtml:
<header>
...
<!--Les autres liens-->
<ul class="navbar-nav navbar-right">
<li class="nav-item">
<p class="nav-link">
<a class="text-dark" asp-area="" asp-page="/Utilisateur/Logout">
Se deconnecter</a>
</p>
</li>
</ul>
...
</header>
Etape 4 : Installation et configuration des état de sessions
Configuration de la session
Ce service doit être ajouter dans le fichier [Link] avant le build de l'application:
// Add services to the container.
[Link]();
[Link]();
[Link]();
[Link](options =>
{
[Link] = ".[Link]";
[Link] = [Link](10);
[Link] = true;
});
var app = [Link]();
Activer l'utilisation des sessions
Avant l'ajout des pages Razor:
//...
[Link]();
[Link]();
//...
Vous pouvez ici Exécuter pour vérifier vos modifications
Etape 5 : Configuration du formulaire d’Authentification
La bibliothéque des session
Ajouter cette bibliothéque dans tous les modéles ".[Link]" où on vas utiliser ou appeler
les valeurs sauvegarder dans les sessions:
using [Link];
La classe users
Après la classe LoginModel, dans le même name space DOTNET_DEMO.[Link]
ajouter la classe users:
public class Utilisateur {
public int id;
public string firstName = "";
public string lastName = "";
public string userLogin = "";
public string userPw = "";
public string userType = "";
}
Les attributs de la class LoginModel
Dans la classe LoginModel, avant la méthode OnGet(), ajouter les attributs:
public class LoginModel : PageModel
{
public Utilisateur utilisateurData = new Utilisateur();
public string msgError = "";
//...
}
Lire les données a partir du formulaire
Dans la classe LoginModel, après la méthode OnGet(), crée la fonction OnPost() :
public void OnGet(){}
public void OnPost()
{
[Link] = [Link]["email"];
[Link]= [Link]["pw"];
}
Vérification des données saisies
Dans la méthode OnPost après la lecture des données ajouter la vérification des valeurs:
if ([Link] == "" || [Link] == "")
{
msgError = "Veuillez saisir Votre login et votre mot de passe";
return;
}
Dans la page [Link] ajouter cette condition avant le formulaire:
<div ...>
@if([Link]!="")
{
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<small>@[Link]</small>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-
label="Close"></button>
</div>
}
<form>
...
Dans l'attribut value de l'input de l'email, ajouter la valeur de l'objet:
<input class="form-control" type="email" id="email" name="email"
value="@[Link]"/>
Vous pouvez ici Exécuter pour vérifier le bon déroulement de vos modifications
La méthode VerifierUtilisateurExiste()
Dans la classe users, après les attributs, ajouter la méthode:
public bool VerifierUtilisateurExiste()
{
try
{
string connectionString = "votre chaine de connection;";
using (SqlConnection connection = new SqlConnection(connectionString))
{
[Link]();
String sql = "SELECT * FROM users WHERE userLogin=@Login";
using (SqlCommand cmd = new SqlCommand(sql, connection))
{
[Link]("@Login", [Link]);
using (SqlDataReader reader = [Link]())
{
if ([Link]())
return true;
}
}
}
return false;
}
catch (Exception ex)
{
[Link]("Exception: " + [Link]());
return false;
}
}
La méthode VerifierPw()
Dans la classe users, après la méthode VerifierUtilisateurExiste(), ajouter la méthode:
public bool VerifierPw()
{
try
{
string connectionString = "votre chaine de connection;";
using (SqlConnection connection = new SqlConnection(connectionString))
{
[Link]();
String sql = "SELECT * FROM users WHERE userLogin=@Login AND
userPw=@Pw";
using (SqlCommand cmd = new SqlCommand(sql, connection))
{
[Link]("@Login", [Link]);
[Link]("@Pw", [Link]);
using (SqlDataReader reader = [Link]())
{
if ([Link]())
{
[Link] = reader.GetInt32(0);
[Link] = [Link](1);
[Link] = [Link](2);
[Link] = [Link](5);
return true;
}
}
}
}
return false;
}
catch (Exception ex)
{
[Link]("Exception: " + [Link]());
return false;
}
}
La méthode AjouterUtilisateur()
Dans la classe users, après la méthode VerifierPw(), ajouter la méthode:
public bool AjouterUtilisateur()
{
try
{
string connectionString = "votre chaine de connection;";
using (SqlConnection connection = new SqlConnection(connectionString))
{
[Link]();
String sql = "INSERT INTO users "+
"(firstName,lastName,userLogin,userPw,userType)" +
"values(@firstName,@lastName,@userLogin,@userPw,@userType);";
using (SqlCommand cmd = new SqlCommand(sql, connection))
{
[Link]("@firstName", [Link]);
[Link]("@lastName", [Link]);
[Link]("@userLogin", [Link]);
[Link]("@userPw", [Link]);
[Link]("@userType", "user");
[Link]();
return true;
}
}
}
catch (Exception ex)
{
[Link]("Exception: " + [Link]());
return false;
}
}
Etape 6 : Utilisation des sessions pour Controller et
Sauvegarder les données des utilisateurs
Sessions pour le contrôle (OnPost)
Dans la méthode OnPost() du modèle LoginModel:
if (![Link]())
{
[Link]("userNotExist", "Cet utilisateur n'existe
pas");
return;
}
if (![Link]())
{
[Link]("userPwError", "Le mot de passe saisi est
incorrecte");
return;
}
Dans la page [Link] avant l'affichage du formulaire
...
//Utilisateur n'existe pas
@if ([Link]("userNotExist") != null)
{
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<small>@[Link]("userNotExist")</small>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-
label="Close"> </button>
</div>
}
//Utilisateur existe && erreur de mp
@if ([Link]("userPwError") != null)
{
<div class="alert alert-warning alert-dismissible fade show" role="alert"
<small>@[Link]("userPwError")</small>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-
label="Close"> </button>
</div>
}
<form>
Initialisation des sessions (OnGet)
Dans la méthode OnGet() de LoginModel on supprimer les initialisation des sessions:
public void OnGet()
{
[Link]("userNotExist");
[Link]("userPwError");
}
Vous pouvez ici Exécuter pour vérifier le bon déroulement de vos modifications
Sessions pour enregistrer les données des utilisateurs et redirection
Ajouter une section else{} si le retour de [Link]() est vraie:
if (![Link]())
{
//...
}
else
{
[Link]("userAuthenticated", "true");
[Link]("userId",
[Link]([Link]));
[Link]("userFirstName",
[Link]([Link]));
[Link]("userLastName",
[Link]([Link]));
[Link]("userLogin",
[Link]([Link]));
[Link]("userType",
[Link]([Link]));
[Link]("/Produit/Index");
}
Afficher les données des utilisateurs
Modifier le lien qu'on ajouter dans la page _layout.cshtml:
<ul class="navbar-nav navbar-right">
<li class="nav-item">
@if ([Link]("userAuthenticated") == null)
{
<a class="nav-link text-dark" asp-area=""
asp-page="/Utilisateur/Login"> Authentification </a>
}
else
{
<p class="nav-link">
@[Link]("userFirstName")
@[Link]("userLastName")
<a class="text-dark" asp-area="" asp-page="/Utilisateur/LogOut">
Se deconnecter
</a>
</p>
}
</li>
</ul>
Vous pouvez ici Exécuter pour vérifier le bon déroulement de vos modifications
Modifier le contenu d'une page à l'aide des sessions
Manipuler l'affichage des boutons des produits dans la page Produit/[Link]:
<h2 class="text-center">Liste des produits</h2>
@if ([Link]("userType") == "admin")
{
<a class="btn btn-primary btn-sm" asp-page="/Produit/Create">Nouveau
Produit</a>
}
....
<table class="table">
<thead>
<tr class="text-center">
...
<th>Prix</th>
@if ([Link]("userType") == "admin")
{
<th>Action</th>
}
</tr>
</thead>
<tbody>
...
<td>@item._prix</td>
@if ([Link]("userType") == "admin")
{
<td class="text-center">
<a class="btn btn-success btn-sm" href="/Produit/Edit?
id=@item._id">Modifier</a>
<a class="btn btn-danger btn-sm" href="/Produit/Delete?
id=@item._id">Supprimer</a>
</td>
}
</tr>
...
Vous pouvez ici Exécuter pour vérifier le bon déroulement de vos modification
Redirection vers la page d'authentification à l'aide des sessions
Dans le modèle Produit/[Link] de la page Produit/[Link] ajouter la condition
dans la méthode OnGet():
public void OnGet()
{
if([Link]("userAuthenticated") != "true")
[Link]("/Utilisateur/Login");
Vous pouvez ici Exécuter pour vérifier le bon déroulement de vos modification
Etape Additionnel 1: Déconnexion d'un utilisateur
Vider la session et ajouter une redirection dans la méthode OnGet() du modèle
[Link]:
public void OnGet()
{
[Link]();
[Link]("/Utilisateur/Login");
}
Vous pouvez ici Exécuter pour vérifier le bon déroulement de vos modification
Etape Additionnel 2: Inscription d'un utilisateur
Les attributs de la classe RegisterModel: Dans la classe RegisterModel, avant la méthode
OnGet(), ajouter les attributs:
public Utilisateur utilisateurData = new Utilisateur();
public string msgError = "";
Lire les données a partir du formulaire: Dans la classe RegisterModel, après la méthode
OnGet(), crée la fonction OnPost()
public void OnGet()
{}
public void OnPost()
{
[Link] = [Link]["firstName"];
[Link] = [Link]["lastName"];
[Link] = [Link]["email"];
[Link] = [Link]["pw"];
}
Vérification des données saisies: Dans la méthode OnPost() après la lecture des données
ajouter la vérification des valeurs:
if ([Link] ==""|| [Link]=="" ||
[Link] == "" || [Link] == "")
{
msgError = "Veuillez saisir vos données";
return;
}
Dans la page [Link] ajouter cette condition avant le formulaire:
@if ([Link] != "")
{
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<small>@[Link]</small>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-
label="Close"> </button>
</div>
}
<form/>
Sessions pour le contrôle (OnPost): Dans la méthode OnPost() du modèle LoginModel:
if (![Link]())
{
[Link]("userNotAdded", "Erreur d'inscription, Essayer
plus tard");
[Link]("/Utilisateur/Logout");
}
else
{
[Link]("/Utilisateur/Login");
}
Dans la page [Link] avant l'affichage du formulaire:
@if ([Link]("userNotAdded") != null)
{
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<small>@[Link]("userNotAdded") </small>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-
label="Close"> </button>
</div>
}
<form>
