TP : PAGE PROTÉGÉE PAR MOT DE PASSE

Bienvenue dans votre premier TP !
Ce qui suit n'est pas un chapitre comme les autres, vous n'allez rien apprendre de nouveau. Mais pour la première fois, vous allez pratiquer pour de bon et réaliser votre premier script PHP !

Le but de chacun des TP est de vous montrer à quoi peut servir tout ce que vous venez d'apprendre. Quand vous lisez un chapitre, vous êtes parfois dans le flou, vous vous dites : « Ok, j'ai compris ce que tu veux me dire, mais je ne vois vraiment pas où tu veux en venir : comment je peux faire un site web avec tout ça ? ». Maintenant, place au concret !

Et − bonne surprise − vous avez déjà le niveau pour protéger le contenu d'une page par mot de passe ! C'est ce que je vais vous apprendre à faire dans ce chapitre.

Comme c'est votre premier TP, il est probable que vous vous plantiez lamentablement (vous voyez, je ne vous cache rien). Vous aurez envie de vous pendre ou de vous jeter par la fenêtre, c'est tout à fait normal.
Je connais peu de monde qui peut se vanter d'avoir réussi du premier coup son premier script PHP. Ne vous découragez donc pas, essayez de suivre et de comprendre le fonctionnement de ce TP, et ça ira déjà mieux au prochain. :-)

Instructions pour réaliser le TP

Les prérequis

En règle générale, il faut avoir lu tous les chapitres qui précèdent le TP pour bien le comprendre. Voici la liste des connaissances dont vous aurez besoin pour réaliser ce TP :

• afficher du texte avec echo ;
• utiliser les variables (affectation, affichage…) ;
• transmettre des variables via une zone de texte d'un formulaire ;
• utiliser des conditions simples (if, else).

Si l'un de ces points est un peu flou pour vous (vous avez peut-être oublié), n'hésitez pas à relire le chapitre correspondant, vous en aurez besoin pour traiter convenablement le TP. Vous verrez, il ne vous sera pas demandé de faire des choses compliquées. Le but est simplement d'assembler toutes vos connaissances pour répondre à un problème précis.

Votre objectif

Voici le scénario : vous voulez mettre en ligne une page web pour donner des informations confidentielles à certaines personnes. Cependant, pour limiter l'accès à cette page, il faudra connaître un mot de passe.

Dans notre cas, les données confidentielles seront les codes d'accès au serveur central de la NASA (soyons fous !). Le mot de passe pour pouvoir visualiser les codes d'accès sera kangourou.

Sauriez-vous réaliser une page qui n'affiche ces codes secrets que si l'on a rentré le bon mot de passe ?

Comment procéder ?

Pour coder correctement, je recommande toujours de travailler d'abord au brouillon (vous savez, avec un stylo et une feuille de papier !). Ça peut bien souvent paraître une perte de temps, mais c'est tout à fait le contraire. Si vous vous mettez à écrire des lignes de code au fur et à mesure, ça va être à coup sûr le bazar. À l'inverse, si vous prenez cinq minutes pour y réfléchir devant une feuille de papier, votre code sera mieux structuré et vous éviterez de nombreuses erreurs (qui font, elles, perdre du temps).

À quoi doit-on réfléchir sur notre brouillon ?

1. Au problème que vous vous posez (qu'est-ce que je veux arriver à faire ?).
2. Au schéma du code, c'est-à-dire que vous allez commencer à le découper en plusieurs morceaux, eux-mêmes découpés en petits morceaux (c'est plus facile à avaler).
3. Aux fonctions et aux connaissances en PHP dont vous allez avoir besoin (pour être sûrs que vous les utilisez convenablement).

Et pour montrer l'exemple, nous allons suivre cette liste pour notre TP.

Problème posé

On doit protéger l'accès à une page par un mot de passe. La page ne doit pas s'afficher si l'on n'a pas le mot de passe.

Schéma du code

Pour que l'utilisateur puisse entrer le mot de passe, le plus simple est de créer un formulaire. Celui-ci appellera la page protégée et lui enverra le mot de passe. Un exemple de ce type de page est représenté à la figure suivante.
L'accès au contenu de la page ne sera autorisé que si le mot de passe fourni par l'utilisateur est kangourou.

Page protégée par mot de passe

Vous devez donc créer deux pages web :

• formulaire.php : contient un simple formulaire comme vous savez les faire ;
• secret.php : contient les « codes secrets » mais ne les affiche que si on lui donne le mot de passe.

Connaissances requises

Nous avons détaillé les connaissances requises au début de ce chapitre. Vous allez voir que ce TP n'est qu'une simple application pratique de ce que vous connaissez déjà, mais cela sera une bonne occasion de vous entraîner. ;-)

À vous de jouer !

On a préparé le terrain ensemble ; maintenant, vous savez tout ce qu'il faut pour réaliser le script !

Vous êtes normalement capables de trouver le code à taper par vous-mêmes, et c'est ce que je vous invite à faire. Ça ne marchera probablement pas du premier coup, mais ne vous en faites pas : ça ne marche jamais du premier coup !

Bon code !

Correction

Maintenant, on corrige !
Vous ne devriez lire cette partie que si vous avez terminé votre travail (pour le comparer au mien), ou si vous êtes complètement bloqués. Si jamais vous êtes bloqués, ne regardez pas toute la correction d'un coup. Regardez juste la section qui vous pose problème et essayez de continuer sans la correction.

Comme vous le savez, il y a deux pages à créer. Commençons par la plus simple, formulaire.php :

<!DOCTYPE html>


<html>


    <head>


        <meta charset="utf-8" />


        <title>Page protégée par mot de passe</title>


    </head>


    <body>


        <p>Veuillez entrer le mot de passe pour obtenir les codes d'accès au serveur central de la NASA :</p>


        <form action="secret.php" method="post">


            <p>


            <input type="password" name="mot_de_passe" />


            <input type="submit" value="Valider" />


            </p>


        </form>


        <p>Cette page est réservée au personnel de la NASA. Si vous ne travaillez pas à la NASA, inutile d'insister vous ne trouverez jamais le mot de passe ! ;-)</p>


    </body>


</html>

Si vous avez bien suivi le chapitre sur les formulaires, vous ne devriez avoir eu aucun mal à réaliser ce formulaire. J'ai choisi un champ de type password puisqu'il s'agit d'un mot de passe. À part ça, rien de bien particulier.

Maintenant, intéressons-nous à la page secret.php qui est appelée par le formulaire.

<!DOCTYPE html>


<html>


    <head>


        <meta charset="utf-8" />


        <title>Codes d'accès au serveur central de la NASA</title>


    </head>


    <body>


    


        <?php


    if (isset($_POST['mot_de_passe']) AND $_POST['mot_de_passe'] ==  "kangourou") // Si le mot de passe est bon


    {


    // On affiche les codes


    ?>


        <h1>Voici les codes d'accès :</h1>


        <p><strong>CRD5-GTFT-CK65-JOPM-V29N-24G1-HH28-LLFV</strong></p>   


        


        <p>


        Cette page est réservée au personnel de la NASA. N'oubliez pas de la visiter régulièrement car les codes d'accès sont changés toutes les semaines.<br />


        La NASA vous remercie de votre visite.


        </p>


        <?php


    }


    else // Sinon, on affiche un message d'erreur


    {


        echo '<p>Mot de passe incorrect</p>';


    }


    ?>


    


        


    </body>


</html>

Dans la page secrète, on vérifie d'abord si l'on a envoyé un mot de passe (avec isset) et si ce mot de passe correspond bien à celui que l'on attendait (kangourou). Si ces deux conditions sont remplies, on affiche alors les codes d'accès.

Comme vous le voyez, je n'ai pas inséré de echo pour afficher tout ce texte. Quand il y a beaucoup de texte à afficher, il est préférable de fermer les balises PHP après l'accolade du if, c'est plus simple et plus lisible.
En revanche, pour le cas du else, comme il n'y avait qu'une seule petite phrase à afficher, j'ai choisi de l'afficher avec un echo.

Résultat

Alors, ça vous plaît ? 

Vous aurez beau chercher, on ne peut pas afficher la page cachée tant qu'on n'a pas entré le bon mot de passe. Vous n'avez qu'à mettre au défi un ami ou un membre de votre famille, il pourra chercher des heures mais il ne verra pas la page cachée s'il n'a pas le bon mot de passe !

Cette protection est-elle vraiment efficace ?

Oui, honnêtement elle l'est. Du moins, elle est efficace si vous mettez un mot de passe compliqué (pas simplement « kangourou »).
Pour moi, un bon mot de passe c'est long, avec plein de caractères bizarres, des majuscules, des minuscules, des chiffres, etc. Par exemple, k7hYTe40Lm8Mf est un bon mot de passe qui a peu de chances d'être trouvé « par hasard ».

Aller plus loin

Si vous le souhaitez, sachez qu'il est possible de réaliser ce TP en une seule page au lieu de deux.

Imaginez pour cela que le formulaire, sur la page formulaire.php, s'appelle lui-même. En clair, l'attributaction du formulaire serait action="formulaire.php". Cela voudrait dire que les données seraient envoyées sur la même page, comme sur la figure suivante.

La page se renvoie les données

Dans ce mode de fonctionnement, la page formulaire.php contiendrait à la fois le formulaire et le message secret.

Comment peut-on faire ça ? Ce n'est pas dangereux ? Ce ne serait pas très sécurisé, si ?

On peut très bien faire cela de façon tout à fait sécurisée, c'est juste un peu plus « difficile » à imaginer.

Il faut construire le code de votre page formulaire.php en deux grandes parties :

• si aucun mot de passe n'a été envoyé (ou s'il est faux) : afficher le formulaire ;
• si le mot de passe a été envoyé et qu'il est bon : afficher les codes secrets.

Toute votre page PHP sera donc construite autour d'un grand if qui pourrait ressembler à quelque chose comme ceci :

<?php





// Le mot de passe n'a pas été envoyé ou n'est pas bon


if (!isset($_POST['mot_de_passe']) OR $_POST['mot_de_passe'] != "kangourou")


{


    // Afficher le formulaire de saisie du mot de passe


}


// Le mot de passe a été envoyé et il est bon


else


{


    // Afficher les codes secrets


}





?>

Voilà dans les grandes lignes comment on ferait. Chaque fois que la page formulaire.php est appelée, elle détermine (grâce au if) si on l'appelle pour afficher la partie secrète ou si on l'appelle pour afficher le formulaire de saisie du mot de passe.

Voici alors ce qui se passera :

1. La première fois que le visiteur charge la page formulaire.php, aucune donnée POST n'est envoyée à la page. C'est donc le formulaire qui s'affiche.
2. Une fois qu'on a envoyé le formulaire, la page formulaire.php est rechargée et cette fois, elle reçoit les données POST qu'on vient d'envoyer. Elle peut donc les analyser et, si le mot de passe est bon, elle affiche les codes secrets.

Sauriez-vous refaire ce TP en une seule page en vous basant sur mes indices ? Essayez ! Ce sera un très bon exercice ! 
Et si vous avez des difficultés, n'hésitez pas à demander de l'aide sur le forum PHP du Site du Zéro.

Vous pourriez même aller plus loin, car dans mon schéma de code précédent, je n'ai pas prévu de cas pour afficher « Mot de passe incorrect ». Cela peut se faire facilement en découpant votre page en trois à l'aide d'un elseif : formulaire, mot de passe incorrect, codes secrets.

Source: OpenClassrooms