Avoir un espace connecté sur un site internet n’est pas très compliqué et peut être très pratique. Nous allons donc voir les différentes étapes de création en se basant sur les sessions.
Fonctionnement
Le principe est simple, nous allons nous appuyer sur les sessions PHP afin de suivre l’utilisateur à travers sa navigation sur le site. Grâce à la super-globale $_SESSION, nous allons pouvoir sauvegarder une variable dans laquelle nous indiquerons si l’utilisateur est connecté ou non. En fonction de cet état, nous lui donnerons accès à certaines parties du site.
En plus de sauvegarder l’état connecté/déconnecté, nous ajouterons des sécurisations pour éviter le vol de session et d’autres problèmes que vous pourriez rencontrer.
Nous allons également faire un tour du coté des bases de données pour stocker nos différents utilisateurs.
Formulaire de connexion HTML
La première étape consiste en la création d’un formulaire de connexion ainsi qu’un formulaire de déconnexion.
Fonctionnement
Avant de vous dévoiler le code du formulaire, je dois vous présenter le mode de fonctionnement d’un formulaire et comment ses données sont traitées.
Un formulaire est donc une suite de champs pouvant être complétés par l’utilisateur (ou non d’ailleurs).
Un bouton permet de valider le formulaire. La validation à le même effet qu’un lien, l’utilisateur est alors envoyé avec les données du formulaire vers une page qui va s’occuper du traitement des données du formulaire. Cette page peut tout à faire être la page sur laquelle le formulaire se trouve (vous comprendrez tout cela une fois le tutoriel fini).
L’envoi des données peut être fait de deux façons différentes :
La méthode GET : les données sont ajoutées dans l’URL de la page de destination, vous vous retrouvez donc avec une URL de type :http://arthurbazin.com/ma_page.php?champ_1=valeur_1&champ_2=valeur_2
La méthode POST : les données sont envoyées via une requête et le transfert est donc (presque) invisible pour l’utilisateur.
Les données sont ensuite disponible via la variable $_GET ou $_POST selon la méthode utilisée. Le script PHP s’occupera alors de traiter ces données.
Formulaire de connexion
Un formulaire se compose d’un élément HTML de type form qui va englober chaque champ ainsi que le bouton de validation du formulaire.
En détail
<form action="page_de_traitement.php" method="method"> [...] </form>Le formulaire. Il faut indiquer la page de traitement ainsi que la méthode qui sera utilisée pour envoyer les informations.<label for="id_du_champ">Libellé du champ</label>Le titre de votre champ qui permettra à l’utilisateur de voir ce qu’il doit remplir. Il faut veillé à renseigner l’identifiant du champ lié à ce label.<input id="id_du_champ" type="type_de_champ" name="nom_du_champ" />Un champ que l’utilisateur complètera. Le type de champ est à choisir parmi « text », « password » et tout un tas d’autres. Le nom permet de récupérer la donnée dans la variable : $_POST[‘nom_du_champ’]<input id="id_du_champ" type="hidden" name="nom_du_champ" value="ma valeur" />Il s’agit d’un champ caché pour envoyer d’autres informations à votre traitement.<input type="submit" value="Envoyer" />Il s’agit du bouton du formulaire.
Un formulaire se construit ainsi de la façon suivante :
<form id="form_authentification" action="auth.php" method="post">
<label for="auth_user_id" >Votre identifiant</label>
<input id="auth_user_id" type="text" name="auth_user_id" />
<label for="auth_user_pwd">Votre mot de passe</label>
<input id="auth_user_pwd" type="password" name="auth_user_pwd" />
<input type="hidden" name="post_action" value="Authentification - Connexion" />
<input type="submit" value="Se connecter" />
</form>
Vous pouvez donc en déduire que la validation du formulaire va renvoyer l’utilisateur vers la page auth.php et envoyer les données via une requête de type POST ce qui nous permettra d’obtenir les variables suivante :
$_SESSION['auth_user_id']= identifiant$_SESSION['auth_user_pwd']= mot de passe$_SESSION['post_action']= « Authentification – Connexion »
La page sur laquelle se trouve le formulaire est également la page auth.php. Ainsi, la validation du formulaire ne change pas l’utilisateur de page, la page est simplement rechargée afin de traiter les données du formulaire.
Formulaire de déconnexion
Ce formulaire est encore plus simple. En reprenant les éléments vu précédemment, voici à quoi ressemble le formulaire de déconnexion :
<form id="form_authentification" action="auth.php" method="post">
<input type="hidden" name="post_action" value="Authentification - Deconnexion" />
<input type="submit" value="Se déconnecter" />
</form>
L’utilisateur va donc voir uniquement un bouton pour se déconnecter. Le formulaire contient en plus un champ caché qui envoi une donnée indiquant que l’on souhaite se déconnecter. C’est donc notre traitement qui va effectuer la tâche correspondante.
Base de données utilisateur
Pour se connecter, il faut un identifiant et un mot de passe. Nous allons donc créer une table dans une base de données MySQL pour stocker ces informations. Ça permettra une gestion aisée de ceux-ci. Vous pouvez utiliser d’autre SGBD (PostgreSQL, Oracle…) il faudra cependant adapter les fonctions de connexion à la BDD définies plus bas.
Voici donc le script qui vous permet de créer la table qui stockera les utilisateurs :
CREATE TABLE `utilisateur` ( `identifiant` varchar(1024) COLLATE utf8_unicode_ci NOT NULL, `mdp` varchar(1024) COLLATE utf8_unicode_ci DEFAULT NULL, `derniere_connexion` datetime DEFAULT NULL, `nom` varchar(1024) COLLATE utf8_unicode_ci DEFAULT NULL, `prenom` varchar(1024) COLLATE utf8_unicode_ci DEFAULT NULL, `email` varchar(1024) COLLATE utf8_unicode_ci DEFAULT NULL, PRIMARY KEY (`identifiant`) )
Cette table contient donc les champs suivants :
- identifiant : l’identifiant de l’utilisateur
- mdp : le mot de passe crypté ou en clair de l’utilisateur
- dernière_connexion : la date et l’heure de l’a dernière connexion
- nom : le nom de l’utilisateur
- prénom : le prénom de l’utilisateur
- email : l’email de l’utilisateur
N’hésitez pas à ajouter votre propres colonnes.
Dans l’article sur les sessions (par ici) j’avais créé une table pour stocker les sessions en BDD.
J’aime bien lier les différentes informations pour mieux superviser mes serveurs. Voici donc une version modifiée de la table de stockage des sessions :
CREATE TABLE `php_session` (
`id_session` varchar(1024) COLLATE utf8_unicode_ci NOT NULL,
`data` varchar(10000) COLLATE utf8_unicode_ci DEFAULT NULL,
`creation` datetime DEFAULT CURRENT_TIMESTAMP,
`update` datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
`utilisateur` varchar(1024) COLLATE utf8_unicode_ci DEFAULT NULL,
PRIMARY KEY (`id_session`)
);
J’ai simplement ajouté un champ « utilisateur » pour noter l’identifiant de l’utilisateur si la session est utilisée par un utilisateur connecté.
Fonctions
Maintenant que nos formulaire de connexion et de déconnexion sont en place et que notre BDD est prête nous allons créer le système qui va traiter les données et construire l’environnement « connecté ».
Créons donc un fichier nommé login.php dans lequel nous allons ajouter les différentes fonctions suivantes.
Connexion
La connexion se déroule en deux étapes : l’authentification puis la création du contexte de connexion.
Authentification
L’authentification est ici le processus de validation du couple identifiant/mot de passe. Voici une fonction qui permet de le faire.
Cette fonction reçoit en paramètre l’identifiant et le mot de passe de l’utilisateur à authentifier.
// Fonction d'authentification
//////////////////////////////
function auth_authentification($user_id, $user_mdp) {
// Connexion à la BDD
$Connexion_BDD = general_connexion_bdd($GLOBALS['AUTH']['type_bdd'], $GLOBALS['AUTH']['bdd']);
// Vérification des identifiants
$requete = $Connexion_BDD->prepare("SELECT mdp FROM utilisateur WHERE `identifiant` = ?");
// Execution de la requête
$requete->execute([$user_id]);
// Récupération des résultats
$resultat = $requete->fetch(PDO::FETCH_ASSOC);
// On vérifie si le mot de passe fournit correspond à la valeur en base
if ( $resultat['mdp'] == $user_mdp ) {
// Si oui, le mot de passe n'est donc pas crypté en BDD.
// On met à jour le mot de passe avec une version cryptée grâce à la fonction disponible dans le chapitre "fonctions annexes".
account_update_pwd($user_mdp, $user_id);
// On renvoi la valeur "vrai" car le mot de passe correspond.
return true;
}
// Sinon, on vérifie si le mot de passe fournit correspond a une version cryptée du mot de passe stocké en base
elseif ( password_verify($user_mdp, $resultat['mdp']) ) {
// Si oui, on vérifie que le cryptage correspond toujours à l'algorithme utilisé actuellement
if ( password_needs_rehash($resultat['mdp'], PASSWORD_BCRYPT, ['cost' => 10]) ) {
// S'il doit être mis à jour, on met à jour le mot de passe
account_update_pwd($user_mdp, $user_id);
}
// On renvoi la valeur "vrai" car le mot de passe correspond.
return true;
};
// Si quelque chose ne fonctionne pas, on ne valide pas l'authentification.
return false;
};
Création du contexte
Lorsque l’utilisateur est authentifié, il faut valider la connexion et créer le contexte. Voici donc une fonction qui utilise l’authentification lors de la connexion :
// Fonction de connexion
////////////////////////
function auth_login($user_id, $user_pwd) {
// Si l'authentification réussi, on lance la connexion
if ( auth_authentification($user_id, $user_pwd) ) {
// Définition des variables de session
// Identifiant
$_SESSION['USER']['id'] = $user_id;
// Clé de validation (voir le chapitre "fonctions annexes")
$_SESSION['AUTH']['validation_key'] = auth_validation_key();
// Délais d'expiration de la session (4h)
$_SESSION['AUTH']['expiration'] = time()+(3600*4);
// Statut de la connexion
$_SESSION['AUTH']['statut'] = 'Connecté';
// Connexion à la BDD pour mise à jour de certains éléments
$Connexion_BDD = general_connexion_bdd($GLOBALS['AUTH']['type_bdd'], $GLOBALS['AUTH']['bdd']);
// Association du login avec la session (pour suivi)
// Création de la requête
$requete = $Connexion_BDD->prepare("UPDATE php_session SET `utilisateur` = ? WHERE `id_session` = ?");
// Execution de la requête
$requete->execute([$user_id, session_id()]);
// Mise à jour de la date de dernière connexion
// Création d'un date_time actuel
$datetime_actuel = new DateTime("now", new DateTimeZone('Europe/Paris'));
// Création de la requête
$requete = $Connexion_BDD->prepare("UPDATE utilisateur SET `derniere_connexion` = ? WHERE `identifiant` = ?");
// Execution de la requête
$requete->execute([($datetime_actuel->format('Y-m-d H:i:s')), $user_id]);
// Récupération des infos de l'utilisateur
// Création de la requête
$requete = $Connexion_BDD->prepare("SELECT nom, prenom, email FROM utilisateur WHERE `identifiant` = ?");
// Execution de la requête
$requete->execute([$user_id]);
// Récupération des résultats
$resultat = $requete->fetch(PDO::FETCH_ASSOC);
// Définition des variables de session
$_SESSION['USER']['nom'] = $resultat['nom'];
$_SESSION['USER']['prenom'] = $resultat['prenom'];
$_SESSION['USER']['email'] = $resultat['email'];
// On renvoi "vrai" pour valider la connexion
return TRUE;
}
else {
// Si l'authentification échoue, on créé un statut d'échec de la connexion
$_SESSION['AUTH']['status'] = 'Echec_login';
// On renvoi "faux".
return FALSE;
};
};
Déconnexion
Après la connexion, voici la fonction qui permet de se déconnecter. En paramètre, vous pouvez indiquer le type de déconnexion :
crash: toutes les variables de sessions sont réinitialisées""(rien) : seules les variables de connexion sont supprimées. Cela permet de conserver quelques informations associées à l’utilisateur pour lui apporter une meilleur expérience.
// Fonction de déconnexion
//////////////////////////
function auth_logout($param) {
// Détachement de l'ID et de la session
// Connexion à la BDD
$Connexion_BDD = general_connexion_bdd($GLOBALS['AUTH']['type_bdd'], $GLOBALS['AUTH']['bdd']);
// Dissociation du login avec la session
$requete = $Connexion_BDD->prepare("UPDATE php_session SET `utilisateur` = NULL WHERE `id_session` = ?");
// Execution de la requête
$requete->execute([session_id()]);
// Suppression des variables de session
if ( $param == 'crash' ) {
// Si on utilise le paramètre "crash" alors la suppression est totale
$_SESSION=array();
}
else {
// Sinon, la suppression n'est que partielle (on conserve les nom/prenom/id de l'utilisateur)
unset(
$_SESSION['AUTH']['expiration'],
$_SESSION['AUTH']['validation_key'],
$_SESSION['USER']['email']
);
};
// Définition du status de la session
$_SESSION['AUTH']['status'] = 'Déconnecté';
// Redirection vers la page de connexion à la suite de la déconnexion
header('Location:auth.php');
};
Vérification de l’authentification
Une fois l’utilisateur connecté, il peut accéder à certaines parties du site qui lui sont réservées. Voici donc une fonction qui permet de vérifier si l’utilisateur est bien connecté. Si l’utilisateur n’est pas connecté ou qu’il se passe un problème, la procédure de déconnexion est automatiquement lancée ce qui entrainera un renvoi de l’utilisateur vers la page de connexion.
// Fonction de validation de la connexion
/////////////////////////////////////////
function auth_check() {
if (// La variable authentification_status existe
isset($_SESSION['AUTH']['status'])
AND
// Le statut est "Connecté"
$_SESSION['AUTH']['status'] == 'Connecté'
AND
// La clé de validation est valide
auth_validation_key() == $_SESSION['AUTH']['validation_key']
AND
// La session n'est pas expirée
time() < $_SESSION['AUTH']['expiration'] ) {
// Mise à jour de l'expiration de la session (4h)
$_SESSION['AUTH']['expiration']=time()+(3600*4);
// On retourne "vrai"
return TRUE;
}
else {
// On lance une procédure de déconnexion
auth_logout('echec');
};
};
Annexes
Voici quelques fonctions annexes qui sont utilisées dans les fonctions vues précédemment.
Connexion
D’abord une fonction de connexion à la base de données et qui nous permettra de l’interroger.
// Fonction de connexion à la BDD
/////////////////////////////////
function general_connexion_bdd() {
// Les éléments de connexion à la BDD
$bdd_dns='mysql:host=127.0.0.1;port=3306;dbname=ma_bdd;charset=utf8';
// Quelques options de PDO
$bdd_option['PDO::ATTR_EMULATE_PREPARES']='FALSE';
$bdd_option['PDO::ATTR_ERRMODE']='PDO::ERRMODE_EXCEPTION';
$bdd_option['PDO::ATTR_DEFAULT_FETCH_MODE']='PDO::FETCH_ASSOC';
// Instantiation de la BDD
try {
$Connexion_BDD = new PDO($bdd_dns, 'username', 'password', $bdd_option);
}
catch (PDOException $e) {
print "Erreur de connexion à la BDD ! Message : " . $e->getMessage() . "<br/>";
die();
}
return $Connexion_BDD;
};
Nettoyage des données
Voici une fonction qui permet de nettoyer les données qui lui sont fournies sous forme de tableau. C’est notamment le cas des variable $_POST et $_GET qui peuvent contenir des codes qui pourraient mettre en danger votre site.
// Fonction de nettoyage des variables tableau
//////////////////////////////////////////////
function general_clean_array($tableau) {
// Pour chaque valeur du tableau
foreach ($tableau as $key => $valeur) {
// On retire les espaces surnuméraires et on échappe le HTML
$tableau[$key] = trim(htmlspecialchars($valeur));
};
return $tableau;
};
Génération de clé unique
Voici une fonction qui nous sera utilise pour sécuriser nos connexions. Le but est de générer une clé unique à partir des information que nous fournit le visiteur. A chaque page visitée, nous contrôlerons que cette clé est valide afin de valider que l’utilisateur est toujours le même et qu’on ne lui à pas volé sa session.
// Fonction de création d'une clé de validation
///////////////////////////////////////////////
function auth_validation_key() {
// Création de la valeur primaire de validation de l'utilisateur
// Cette valeur repose sur :
// - Un code unique pour tout le site que j'ai créé aléatoirement (à ne jamais divulguer)
// - L'adresse IP du client
// - Le user agent du client
$v_valeur_primaire = 'dhzsufd34ftzs@fzef!ve'.$_SERVER['REMOTE_ADDR'].$_SERVER['HTTP_USER_AGENT'];
// On renvoie la valeur finale : le hash de la valeur primaire de validation
return hash('sha512', $v_valeur_primaire, FALSE);
};
Mise à jour du mot de passe
Voici une fonction à laquelle vous fournissez un identifiant, un nouveau mot de passe et elle va automatiquement mettre à jour le mot de passe de cet identifiant dans la BDD.
En plus, elle hash le mot de passe pour ne pas qu’il soit récupérable (ce que je vous recommande largement).
function account_update_pwd($new_pwd, $user_id) {
// Connexion BDD
// Connexion à la BDD pour mise à jour de certains éléments
$Connexion_BDD = general_connexion_bdd();
// Création du hash du mot de passe
// La fonction password_hash possède plusieurs options pour lesquelles je vous recommande de vous renseigner
$new_pwd_hash = password_hash($new_pwd, PASSWORD_BCRYPT, ['cost' => 10]);
// Sauvegarde des données
// Préparation de la requête
$requete = $Connexion_BDD->prepare("UPDATE utilisateur SET mdp=? WHERE identifiant=?");
// Execution de la requête
$resultat = $requete->execute([$new_pwd_hash,$user_id]);
// Vérification
if ( $resultat == TRUE ) {
// Si ça fonctionne, on retourne "vrai"
return TRUE;
}
// Si quelque chose ne fonctionne pas on retourne "faux".
return FALSE;
};
Mise en place des actions
Maintenant que nous avons toutes ces fonctions, nous devons les faire travailler ensemble.
Ajoutez ces différents éléments dans votre fichier login.php, à la suite des fonctions que nous avons vu précédemment.
Traitement des requêtes POST
Dans un premier temps, nous allons traiter les données envoyées par le formulaire de connexion vu plus haut.
On utilisera la fonction general_clean_array() pour nettoyer les données envoyées par le formulaire.
// Traitement des requêtes POST
// Nettoyage des données POST
$clean_POST = general_clean_array($_POST);
// Si la variable $clean_POST['post_action'] existe
if ( isset($clean_POST['post_action']) ) {
// Si la variable demande la connexion utilisateur
if ( $clean_POST['post_action'] == 'Authentification - Connexion' ) {
// Alors on teste si la fonction de connexion réussi
if ( auth_login($clean_POST['auth_user_id'], $clean_POST['auth_user_pwd']) ) {
// Dans ce cas, on redirige vers la page d'accueil
// On aurai pu choisir de ne rien faire et de rester sur la page du formulaire
header('Location: index.php');
}
else {
// Sinon, on redirige vers la page de connexion
header('Location: auth.php');
};
}
// Si la variable demande la déconnexion utilisateur
elseif ( $clean_POST['post_action'] == 'Authentification - Déconnexion' ) {
// Alors on lance la fonction de déconnexion
auth_logout('legitime');
}
// Dans tous les autres cas, on ne fait rien (quand il n'y a pas de requête POST ou quand celle-ci ne correspond pas aux "if".
};
Pages à accès restreint
Sur chaque page à accès restreint, il faudra vérifier que l’utilisateur soit bien connecté.
Le script suivant permet de vérifier l’authentification sur les pages qui ne sont pas dans la liste $page_publique.
// Vérification de l'authentification
// Définition d'une liste de pages publiques
$page_publique = ['index.php','auth.php'];
// Si la page actuelle n'est pas dans la liste de pages publiques
if ( !in_array($_SERVER['PHP_SELF'], $page_publique) ) {
// On vérifie l'authentification
auth_check();
};
Utilisation
Pour utiliser le script, il suffit de l’inclure sur toutes les pages de votre site, juste après avoir démarré la session (vous pouvez d’ailleurs gérer votre session avec le code présenté dans cet article : Session PHP – Principes et stockage en BDD). Voici le code :
// Démarrage de la session session_start(); // Appel du fichier de gestion de l'authentification require_once 'auth.php';
Comme ce code est inclut sur chaque page, le traitement des requêtes POST peut être fait depuis chaque page. Vous pouvez donc avec un formulaire d’authentification dans un menu présent sur chaque page publique.
Bonus
Formulaire de connexion uniquement en mode déconnecté
Voici un bonus pour ne proposer le formulaire de connexion que si l’utilisateur est déconnecté. S’il est connecté, alors on lui propose le formulaire de déconnexion.
En plus, on affiche un message d’erreur si la connexion échoue.
Voici le code HTML à inclure dans votre page.
<div id="formulaire">
<?php
// Affichage du formulaire correspondant
////////////////////////////////////////
if (
!isset($_SESSION['AUTH']['status'])
OR $_SESSION['AUTH']['status'] != 'Connecté' ) {
// Affichage du message d'échec de l'authentification
if (
isset($_SESSION['AUTH']['status'])
AND $_SESSION['AUTH']['status'] == 'Echec_login' ) {
echo '<p>L\'authentification à échouée, veuillez réessayer. </p>';
};
// Affichage du formulaire de connexion
echo '<form id="form_authentification" action="auth.php" method="post">[...]</form>';
}
elseif (
isset($_SESSION['AUTH']['status'])
AND $_SESSION['AUTH']['status'] == 'Connecté' ) {
// Affichage du formulaire de déconnexion
echo '<form id="form_deconnexion" action="auth.php" method="post">[...]</form>';
};
?>
</div>
Connexion automatique via requête GET
Voici un petit bonus pour vous connecter via une requête GET.
Comme expliqué plus haut, les requêtes GET fonctionnent selon le modèle suivant. On appel la page qui va traiter notre requête via son url à laquelle on ajoute les paramètres à traiter :
// Requête GET de connexion https://arthurbazin.com/auth.php?get_action=authentification-connexion&auth_user_id=mon_identifiant&auth_user_pwd=mon_mot_de_passe
Avec cette requête, on se rend donc sur la page https://arthurbazin.com/auth.php
Dans cette page, PHP va mettre à disposition une super-globale $_GET possédant les variables suivantes :
- $_GET[‘get_action’] = authentification-connexion
- $_GET[‘auth_user_id’] = mon_identifiant
- $_GET[‘auth_user_pwd’] = mon_mot_de_passe
Comme précédemment avec les requêtes POST, il suffit de traiter ces données avec le code suivant par exemple :
// Traitement des requêtes GET
// Nettoyage des données GET
$clean_GET = general_clean_array($_GET);
// Si la variable $clean_GET['get_action'] existe
if ( isset($clean_GET['get_action']) ) {
// Si l'action demandée est l'authentification
if ( $clean_GET['get_action'] == 'authentification-connexion' ) {
// Alors on teste si la fonction de connexion réussi
if ( auth_login($clean_GET['auth_user_id'], $clean_GET['auth_user_pwd']) ) {
// Dans ce cas, on redirige vers la page d'accueil
// On aurai pu choisir de ne rien faire et de rester sur la page du formulaire (auth.php)
header('Location: index.php');
}
else {
// Sinon, on redirige vers la page de connexion
header('Location: auth.php');
};
}
// Si la variable demande la déconnexion utilisateur
elseif ( $clean_GET['get_action'] == 'authentification-deconnexion' ) {
// On vérifie si la requête demande une déconnexion totale
if ( isset($clean_GET['crash'])
AND $clean_GET['crash'] == 1 ) {
// Si oui, on déconnecte façon "crash"
auth_logout('crash');
}
else {
// Sinon on déconnecte façon "légitime"
auth_logout('legitime');
};
};
};
Vous aurez remarqué que vous pouvez également utiliser ces deux requêtes :
-- Requête GET de déconnexion standard : http://arthurbazin.com/auth.php?get_action=authentification-deconnexion
-- Requête GET de déconnexion totale : http://arthurbazin.com/auth.php?get_action=authentification-deconnexion&crash=1
Afficher, masquer le mot de passe
Par défaut, les champs de formulaire de type « password » n’affichent pas les lettre qui y sont tapées. Il peut cependant être pratique de pouvoir afficher le texte afin de vérifier que le mot de passe entré est bien le bon. Voici comment faire.
Tout d’abord, il faut modifier le formulaire pour avoir un bouton :
<form id="form_authentification" action="auth.php" method="post">
<label for="auth_user_id" >Votre identifiant</label>
<input id="auth_user_id" type="text" name="auth_user_id" />
<label for="auth_user_pwd">Votre mot de passe</label>
<input id="auth_user_pwd" type="password" name="auth_user_pwd" /><span id="input_pwd_view" class="far fa-eye" title="Afficher/cacher le mot de passe" onclick="form_input_pwd_view('auth_user_pwd','input_pwd_view')"></span>
<input type="hidden" name="post_action" value="Authentification - Connexion" />
<input type="submit" value="Se connecter" />
</form>
Juste après le mot de passe, j’ai ajouté un objet de type « span ». Cet objet affiche une icône « œil » grâce à la classe « far fa-eye ». Cette classe découle de l’utilisation de la bibliothèque Font Awesome qui permet d’afficher des icônes simplement.
Voici le code CSS associé au span afin de le placer correctement (il faudra surement l’adapter car celui-ci correspond au style de mon formulaire).
form.form_standard > div.form_input_password_view > span {
position: relative;
width: 0px;
left: -30px;
color: #a8cfdd;
font-size: 13px;
cursor: pointer;
}
form.form_standard > div.form_input_password_view > span:hover {
color: #a0bec9;
transition: 0.2s;
}
Ce code place l’icône dans le champ, à la fin de celui-ci et permet d’avoir un effet de couleur et de forme du curseur lors du passage de la souris dessus.
Une fois ce bouton en place, il faut lui associer une action. Celle-ci est en JavaScript :
function form_input_pwd_view(id_input_pwd, id_input_pwd_view) {
/* Ciblage du champ de mot de passe */
var v_id_input_pwd = document.getElementById(id_input_pwd);
/* Ciblage du bouton de changement d'état */
var v_id_input_pwd_view = document.getElementById(id_input_pwd_view);
/* Si le champ est de type "password" */
if( v_id_input_pwd.type === "password" ){
/* Alors on le change en type texte */
v_id_input_pwd.type = "text";
}
else {
/* Sinon on le change en type password */
v_id_input_pwd.type = "password";
}
/* Si le bouton contient la classe "fa-eye" : "oeil ouvert" */
if($(v_id_input_pwd_view).hasClass("fa-eye")){
/* Alors on retire la classe et on la remplace par "fa-eye-slash" : "oeil fermé" */
$(v_id_input_pwd_view).removeClass("fa-eye");
$(v_id_input_pwd_view).addClass("fa-eye-slash");
}
else {
/* Sinon on remet l'oeil fermé */
$(v_id_input_pwd_view).removeClass("fa-eye-slash");
$(v_id_input_pwd_view).addClass("fa-eye");
}
};
Pour activer cette action, on ajoute un déclencheur « onclick » sur le span afin de déclencher la fonction :
-- Action sur le span
onclick="form_input_pwd_view('auth_user_pwd','input_pwd_view')"
Cet article vous a plu ?
N'hésitez pas à le partager, il interessera surement certains de vos contacts.
Les thèmes suivants contiennent des articles en lien avec celui-ci, allez faire un tour :
HTML et CSSPHPProgrammation authentificationformulairerequête GETrequête POST
