Formulaire d'identification en programmation PHP

Pour partager cette vidéo sur les réseaux sociaux ou sur un site, voici son url :


Sujets que vous pourriez aussi aimer :


Formulaire d'identification en Php

Dans les précédentes formations, nous avons appris à créer une première base de données MySql, composée d'une table avec des champs explicitement nommés et typés. Et puis, sur la base d'un formulaire d'inscription, nous avons appris à insérer les données saisies par l'internaute, dans cette table de la base de données.

Aujourd'hui, nous souhaitons réaliser l'identification. L'internaute désormais inscrit, renseigne sa paire identifiant / Mot passe. Si elle est trouvée dans la base de données, un état de session lui est ouvert. Cette session doit lui permettre de naviguer au travers de rubriques désormais autorisées. Nous lui proposerons notamment d'accéder à ses informations de compte pour les modifier à loisir.



Nous débutons les travaux depuis le formulaire d'authentification sécurisé que nous avions conçu lors d'une formation Javascript.

Vous le constaterez, en cliquant sur le bouton Valider, les informations d'identification étant erronées ou manquantes, l'authentification échoue. Pour preuve, un message d'alerte s'inscrit dans le calque inférieur de la page Web.

Sources et présentation de la problématique
Nous proposons de récupérer des sources très complètes et abouties. Il s'agit du formulaire d'identification, du formulaire d'inscription mais aussi du formulaire pour le compte utilisateur authentifié. Les structures Html et codes Javascript sont opérationnels. Les codes Php sont à développer sauf pour le formulaire d'inscription qui a fait l'objet d'une formation.

• Télécharger le fichier formulaire-identification-php.rar en cliquant sur son lien,
• Puis, le décompresser dans le dossier de votre choix,

Comme vous le remarquez, ces sources sont nombreuses. Nous devons aborder les notions d'identification, d'état de session, de récupération et de mise à jour des données. La décompression conduit au fichier de la page Web principale pour l'identification. Il est nommé index.php. A la racine, il est accompagné des pages d'inscription et de compte utilisateur. Les ressources externes sont placées dans les sous dossiers.

Tout d'abord, nous poursuivons notre construction en pièces de puzzle en imbriquant les éléments communs. Et ces sections communes de codes Php sont situées dans le sous dossier commun.

Le sous dossier js propose les fonctions Javascript permettant les contrôles des saisies sur le formulaire d'inscription. Bien sûr, ce script externe est déclaré en référence dans le code Html de la page concernée. De fait, ces fonctions sont reconnues et peuvent être appelées.

Comme nous l'avons appris et démontré à maintes reprises, ce projet doit être référencé dans EasyPhp. Ainsi il pourra être émulé. Tout d'abord, les deux serveurs Http et Database doivent être démarrés. Ensuite, après avoir cliqué sur le bouton add directory, le projet doit être référencé. Pour cela, un nom doit lui être attribué dans la zone working directory name. Et puis, l'adresse issue du dossier Windows doit être collée dans la zone working directory path.



Après avoir cliqué sur le bouton Save, le projet apparaît dans la liste des applications serveur émulées par EasyPhp. Les pages de ce projet font toutes appel à un fichier initialisant la connexion à la base de données bd_gestion. Il exploite les identifiants que nous avions définis ensemble. Si cette base de données MySql n'existe pas dans votre interface PhpMyAdmin, vous devez la créer en suivant les étapes de la formation consistant à créer une première base MySql. Si les identifiants ne correspondent pas, vous devez les ajuster, soit depuis PhpMyAdmin, soit dans le fichier ouvrir.php, situé dans le sous dossier commun.

• A la racine du dossier de décompression, double cliquer sur le dossier commun pour l'ouvrir,
• Cliquer avec le bouton droit de la souris sur le fichier ouvrir.php,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

<?php
// Initialisation de la connexion
$liaison = mysqli_connect("127.0.0.1", "moimeme", "mm127eM") or die ("Accès à la base de donnée impossible !!!");
mysqli_select_db($liaison, "bd_gestion") or die ("Accès à la base de donnée impossible !!!");
...

Comme vous le savez, c'est l'instruction mysqli_connect qui permet d'initialiser la chaîne de connexion. Elle requiert trois paramètres qui sont dans l'ordre : l'adresse de l'hôte (Serveur), le nom d'utilisateur et le mot de passe.

• Fermer ce fichier et revenir sur l'interface d'EasyPhp,
• Cliquer sur le lien du projet désormais référencé pour accéder à sa page d'accueil,

Il s'agit de la page d'identification que nous avons brièvement présentée en préambule de cette formation. En pied de page, vous notez la présence de trois icônes permettant d'atteindre trois rubriques liées : la page d'inscription, la page du compte utilisateur authentifié et la page d'identification déjà active.



Par défaut, les informations personnelles de l'utilisateur ne sont pas accessibles. L'icône barrée d'un sens interdit rouge en atteste. Tant que l'identification n'a pas réussi, l'internaute est considéré comme inconnu. Il ne peut donc pas accéder à ses données pour les consulter et les modifier. Nous devrons être en mesure de créer un état de session pour changer ce statut et le porter d'une page Web à une autre.

• Cliquer sur la deuxième des trois icônes, celle du centre,

Nous accédons au formulaire d'inscription de la formation précédente. Tous les contrôles de saisie sont réalisés côté client, en temps réel, par le code Javascript. Une fois les données validées par ce dernier, c'est un code Php qui les réceptionne après soumission du formulaire, pour réaliser leur inscription en base de données.

Nous y avons néanmoins apporté une petite modification, comme l'illustre la capture ci-dessus. Désormais le mot de passe doit être strictement numérique pour les besoins du formulaire d'identification sécurisé. Pour vérifier cette donnée côté client, nous avons exploité une fonction Javascript que nous avions développée pour vérifier les nombres.

• Revenir sur l'interface d'EasyPhp,
• Puis, cliquer sur le bouton Open du module MySql,

Nous accédons à l'interface d'administration PhpMyAdmin. Dans le volet de gauche, nous y retrouvons notre base de données bd_gestion.

• Cliquer sur le lien de la base bd_gestion pour déployer son arborescence,
• Cliquer sur le lien de sa table inscr pour accéder à son contenu,

Nous avons entre temps ajouté quelques utilisateurs, tous référencés par un mail et un mot de passe numérique, comme vous le constatez.



Réception des données d'identification
Nous devons désormais centrer notre attention sur le code du formulaire d'identification.

• A la racine du dossier de décompression, cliquer droit sur le fichier index.php,
• Dans le menu contextuel, choisir de l'ouvrir dans un éditeur comme le Notepad++,

En début comme en fin de code, vous notez l'imbrication des pages communes réalisée grâce à la fonction Php include. Les pages entete.php et pied.php sont respectivement appelées. Elles imbriquent elles-mêmes les fichiers ouvrir.php et fermer.php. Le premier permet d'initialiser les informations de connexion à la base de données. Nous l'avons en effet constaté. Le second permet de fermer ces connexions, une fois toutes les transactions réalisées.

A partir de la ligne 57 pour un éditeur Notepad, vous notez la présence du formulaire Html. Il est reconnu sous l'identifiant et le nom identification. C'est ainsi que nous le piloterons. Il encapsule les contrôles de formulaire. Il s'agit de la zone de saisie de l'identifiant, de la zone de réception du code numérique et du bouton de validation.

...
</div>
<form id="identification" name="identification" method="post" action="index.php">
<input type="text" id="identifiant" name="identifiant" maxlength="50" value="Votre identifiant" onClick="init_saisie('1')" onMouseOut="init_saisie('2')"/>
<input type="password" id="motPasse" name="motPasse" maxlength="10" value=""   readOnly   />
<input type="button" class="bouton" value="Valider" onClick="validation()" />
<input type="button" class="bouton" value="Generer" onClick="generation()" />
</form>
<br />
...

A ce stade, ce bouton appelle la fonction Javascript validation pour le contrôle de conformité côté client. Nous l'avions bâtie lors d'une formation Javascript. Désormais, elle n'est plus d'actualité. Le formulaire doit être soumis, certes si des données ont bien été renseignées. Nous proposons donc d'adapter le code de cette fonction. Ensuite, nous nous chargerons de réceptionner les données soumises.

A ce titre, vous remarquez que la méthode du formulaire est post et que la page d'action est la page en cours, soit index.php. Comme nous l'avions appris, nous exploiterons donc l'instruction Php $_POST sur cette même page pour réceptionner les données.

• Atteindre la ligne 119 pour un éditeur Notepad afin d'accéder à la fonction validation,
• Supprimer le code présent entre ses accolades,
• A la place, saisir le code Javascript suivant :

function validation()
{
if(document.getElementById("identifiant").value != "" && document.getElementById("motPasse").value != "")
document.getElementById("identification").submit();
else
document.getElementById("apercu").innerText = "Vous devez renseigner les informations d'identification";
}

Nous vérifions à la fois, par le code Javascript, que les zones de l'identifiant et du mot de passe sont bien renseignées (!=""). Si ce double critère est validé, nous soumettons les informations du formulaire grâce à la méthode submit, comme nous l'avons appris. Dans le cas contraire (else), nous informons l'internaute du défaut qu'il doit corriger, dans le calque d'identifiant apercu situé en bas de page.

• Enregistrer les modifications (CTRL + S) et basculer sur le navigateur Web,
• Rafraîchir (F5) la page du formulaire d'identification,
• Cliquer sur le bouton Valider sans renseigner les champs,

Le message d'alerte apparaîten effet.

• Désormais, taper un identifiant arbitraire dans la première zone numérique,
• Puis, inscrire un mot de passe numérique en cliquant sur les chiffres des boutons,
• Enfin, cliquer sur le bouton Valider pour soumettre ces informations de formulaire,

Le message d'alerte disparaît et un PostBack est bien généré. Mais à ce stade certes, les données ne sont pas encore traitées. Nous devons les réceptionner comme nous l'avons appris.

• Revenir dans le code de la page index.php,
• En entête de page, dans la section Php après l'instruction include, ajouter le code de réception suivant :

<?php
include("commun/entete.php");

if(isset($_POST["identifiant"]) && $_POST["identifiant"]!="")
{
$lid = $_POST["identifiant"];
$le_mp = $_POST["motPasse"];
}
?>
<script language="javascript" src="js/paire_id.js"></script>

<div style="width:100%; display:block; text-align:center;">
</div>
...

L'instruction $_POST permet de désigner un contrôle de formulaire par son attribut name pour réceptionner la donnée transmise. Nous vérifions que la valeur existe grâce à la fonction Php isset et qu'elle n'est pas vide. Dans ce cas, nous initialisons les deux variables sur les valeurs dont il s'agira de tester la présence en base de données.

A titre de vérification, nous souhaitons restituer temporairement ces valeurs dans le calque d'identifiant apercu.

• Atteindre la ligne 73 pour un éditeur Notepad afin d'afficher le code du calque apercu,
• Ajouter la section Php suivante entre ses balises :

...
<div class="centre">
<div class="titre_centre" id="apercu">
<?php
if(isset($_POST["identifiant"]) && $_POST["identifiant"]!="")
echo $lid."-".$le_mp;
?>
</div>
</div>
...

Nous réalisons tout d'abord le même test pour vérifier l'existence des valeurs. Puis, nous les concaténons et les affichons en lieu et place grâce à la fonction Php echo.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Recharger la page en validant sa barre d'adresse,

Précédemment nous avons en effet réalisé un PostBack.

• Saisir l'identifiant suivant : tatouille@free.fr,
• Puis, construire le code numérique suivant : 122333 à l'aide des boutons chiffrés,

Il s'agit d'une paire valide archivée en base de données.

• Enfin, cliquer sur le bouton Valider pour soumettre ces informations,

Comme vous le constatez et comme l'illustre la capture ci-dessus, nous confirmons la bonne réception des valeurs côté serveur. Il s'agit de les exploiter pour vérifier l'existence de la paire en base de données.

Vérification des données - Requêtes sélection
Nous devons bâtir une requête Sql avec clause Where vérifiant les deux égalités par rapport aux champs respectifs de la table. Cette requête Sql doit être exécutée par le code Php, comme nous l'avons appris dans la formation précédente sur l'inscription des données.

• Passer en commentaires les lignes Php de test à l'intérieur du calque d'identifiant apercu,

<?php
/*
if(isset($_POST["identifiant"]) && $_POST["identifiant"]!="")
echo $lid."-".$le_mp;
*/
?>

Si l'authentification réussit, nous devons ouvrir à l'internaute l'accès à ses informations de compte. Vous avez noté la présence d'une icône barrée en pied de page. Elle pointe sur l'actuel formulaire d'identification. Elle doit permettre d'accéder à la page compte.php en cas de succès.

• Afficher le contenu du sous dossier commun depuis l'explorateur Windows,
• Cliquer droit sur le fichier pied.php,
• Dans le menu contextuel, choisir de l'ouvrir avec un éditeur comme le Notepad ++,

Comme vous le constatez, c'est un état de session qui permet de verrouiller ou déverrouiller cet accès.

...
<?php
if(isset($_SESSION["utilisateur"]) && $_SESSION["utilisateur"]!="")
{
$img_compte = "images/compte.png";
$lien_compte = "compte.php";
}
else
{
$img_compte = "images/compte_nok.png";
$lien_compte = ".";
}
?>
<a href="<?php echo $lien_compte; ?>" target="_self" title="Accédez à vos informations de compte">
<img src="<?php echo $img_compte;?>" style="width:40px;border:none;" alt="" />
</a>
</div>
...

Un état de session permet de définir une valeur de variable qui suit l'utilisateur durant sa navigation. Ici, nous cherchons à savoir si l'état de session pour le paramètre utilisateur existe. Si tel est le cas, nous en déduisons que l'identification a réussi et nous ouvrons l'accès. Dans le cas contraire, nous le maintenons fermé.

A réception des données de la requête que nous allons initier, nous devrons donc créer cet état de session. Il est important de savoir que la fonction Php session_start() est nécessaire pour initialiser la manipulation de ces états de session.

• Accéder au code du fichier ouvrir.php situé dans le sous dossier commun,

Vous y remarquez la présence de cette instruction. Le fichier ouvrir.php est celui qui intervient en tête de la chronologie dans la construction.

... $url_en_cours = strtoupper(substr($url_en_cours, 0, 1)).substr($url_en_cours, 1);

session_start();
?>

• En entête de la page index.php, adapter le code de l'instruction conditionnelle comme suit :

<?php
include("commun/entete.php");

if(isset($_POST["identifiant"]) && $_POST["identifiant"]!="")
{
$_SESSION["utilisateur"]="";
$lid = $_POST["identifiant"];
$le_mp = $_POST["motPasse"];

$requete = "SELECT inscr_num FROM inscr WHERE inscr_mail='".$lid."' AND inscr_mp='".$le_mp."'";
$retours = mysqli_query($liaison, $requete) or die ("problème avc la requète ".$requete);
$retour = mysqli_fetch_assoc($retours);

if($retour["inscr_num"]!="")
$_SESSION["utilisateur"] = $retour["inscr_num"];
}
?>
<script language="javascript" src="js/paire_id.js"></script>
...

Nous commençons par réinitialiser le potentiel état de session puisqu'un PostBack est confirmé ($_SESSION["utilisateur"]=""). Nous stockons la syntaxe de la requête Sql dans la variable requete. Comme nous l'avons appris, il s'agit d'une requête sélection classique. Elle récupère l'information du champ inscr_num (SELECT inscr_num) dans la table inscr (FROM inscr) pour lequel (WHERE) le champ inscr_mail vaut l'identifiant saisi (inscr_mail='".$lid."') et pour lequel (AND) le champ inscr_mp vaut le mot de passe construit (inscr_mp='".$le_mp."'").

Nous exécutons cette requête grâce à l'instruction mysqli_query comme dans la formation précédente. En premier paramètre, nous lui passons la chaîne de connexion qui renseigne notamment sur la base de données à attaquer. Souvenez-vous, cette chaîne est initialisée dans le fichier ouvrir.php. En deuxième paramètre, nous lui passons la requête à exécuter. La fonction Php mysqli_fetch_assoc sur la variable de retour, permet alors de découper l'information résultante en tableau de variables. Nous n'avons plus qu'à y accéder par les noms de champs en paramètre : if($retour["inscr_num"]!=""). Si donc la valeur du champ inscr_num pour le double critère de la clause Where dans la requête n'est pas vide, cela signifie que la correspondance a été trouvée. Dans ce cas, nous initialisons et affectons l'état de session de l'internaute désormais connecté.

Cette affectation a lieu sur l'ID de l'internaute enregistré en base de données ($_SESSION["utilisateur"] = $retour["inscr_num"]). Nous exploiterons cet identifiant pour porter sa session et lui proposer ses informations personnelles.

• Enregistrer les modifications et basculer sur le navigateur Internet,
• Recharger la page en validant sa barre d'adresse,
• Saisir l'identifiant : tatouille@free.fr,
• Puis, construire le code numérique: 122333, à l'aide des boutons chiffrés,
• Soumettre ces informations en cliquant sur le bouton Valider,

L'identification est un succès. L'état de session est amorcé. L'internaute peut désormais naviguer au travers de ses informations de compte. La modification de l'icône et de son lien en bas de page en atteste. Nous développerons ce formulaire de compte dans les prochaines formations. Il s'agira notamment de permettre la modification des informations personnelles.



En cas d'échec, il convient d'en alerter l'internaute et de reverrouiller les accès.

• Dans la section Php du calque apercu, ajouter le code suivant:

...
<div class="titre_centre" id="apercu">
<?php
/*
if(isset($_POST["identifiant"]) && $_POST["identifiant"]!="")
echo $lid."-".$le_mp;
*/

if((!isset($retour["inscr_num"]) || $retour["inscr_num"]=="") && isset($_POST["identifiant"]))
{
echo "L'identification a échoué";
$_SESSION["utilisateur"]="";
}
?>
</div>
...

Si l'identifiant a bien été transmis (isset($_POST["identifiant"])) et que dans le même temps la valeur du champ inscr_num est vide ou non connue, nous en déduisons que l'identification a échoué. Nous inscrivons le message et supprimons l'état de session en le réinitialisant à vide ("").

• Enregistrer les modifications et basculer sur le navigateur Web,
• Recharger le formulaire d'identification en validant sa barre d'adresse,
• Renseigner une paire inconnue comme : aaaaaa / 545454,
• Puis, soumettre les données en cliquant sur le bouton Valider,

Comme la requête Sql côté Php ne trouve pas de correspondance dans la base de données, l'identification échoue. Le message apparaît en effet dans le calque inférieur. Et comme vous le remarquez en pied de page, l'accès aux informations de compte est de nouveau verrouillé.