Aller au menu - Aller au contenu

Icône TP : page protégée par mot de passe

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 03/04/2010
Difficulté : Facile Facile Creative Commons BY-NC-SA
133 390 visites depuis 7 jours, dont 2 622 sur ce chapitre classé 2/786
Bienvenue dans votre premier TP (Travaux pratiques) !
Ceci n'est pas un chapitre comme un autre, 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 ! :D

Le but de ces 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 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 s'être vanté d'avoir réussi du premier coup son premier script PHP. Ne vous découragez pas donc, essayez de suivre et de comprendre le fonctionnement de ce TP, et ça ira déjà mieux au prochain TP ;)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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 on a 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 un de ces points est un peu flou pour vous (vous avez peut-être oublié), n'hésitez pas à relire le chapitre qui correspond, vous en aurez besoin pour traiter convenablement le TP. Vous verrez, ce TP ne nous demandera pas 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 on a rentré le bon mot de passe ?

Comment procéder ?



Pour travailler correctement, je recommande toujours de travailler d'abord au brouillon (vous savez, avec un stylo et une feuille de papier ;) ). Ca peut paraître bien souvent 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. Tandis que si vous prenez 5 minutes pour y réfléchir devant une feuille de papier, votre code sera mieux structuré et vous éviterez de nombreuses erreurs (qui font perdre du temps :p ).

A 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 :lol: ).
  3. Aux fonctions et aux connaissances en PHP dont vous allez avoir besoin (pour être sûr 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 on n'a pas le mot de passe.

Schéma du code



Pour que l'utilisateur puisse rentrer 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.
L'accès au contenu de la page ne sera autorisé que si le mot de passe est kangourou.

Page protégée par mot de passe


Vous devez donc créer 2 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. ;)

A 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. Ca ne marchera probablement pas du premier coup, mais ne vous en faites pas : ça ne marche jamais du premier coup ! ;)

Bon code !
Retour en haut

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é. Si jamais vous êtes bloqué, 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 2 pages à créer. Commençons par la plus simple, formulaire.php :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Page protégée par mot de passe</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</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. A part ça, rien de bien particulier.

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

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Codes d'accès au serveur central de la NASA</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</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 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 2 conditions sont remplies, on affiche alors les codes d'accès.

Comme vous le voyez, je n'ai pas fait un 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 y avait une seule petite phrase à afficher, j'ai choisi de l'afficher avec un echo.


Essayer !



Alors, ça vous plaît ? :D
Vous aurez beau chercher, on ne peut pas afficher la page cachée tant qu'on n'a pas rentré 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 "kangourou" :D )
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".
Retour en haut

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'attribut action du formulaire serait action="formulaire.php". Cela voudrait dire que les données seraient renvoyées sur la même page :

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é non ?


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

Il faut construire le code de votre page formulaire.php en 2 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 architecturée autour d'un grand if qui pourrait ressembler à quelque chose comme ça :

Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<?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. A 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.

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 3 à l'aide d'un elseif : formulaire, mot de passe incorrect, codes secrets.

Retour en haut
Voilà qui devrait vous avoir permis de vous entraîner ! Que ce TP vous ait paru facile ou difficile, l'essentiel est de lui avoir accordé du temps. C'est dans les TP que vous apprenez en fait le plus de choses, donc n'hésitez pas à y revenir, à les relire et à refaire l'exercice !
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
89 commentaires pour "TP : page protégée par mot de passe"
Note moyenne : 3.61 / 4 (2518 votes)
Pseudo Commentaire
Hors ligne dark L # Posté le 09/04/2012 à 11:51:53
Avatar

Avis : Très bon

un jeu d'enfants ;)
Hors ligne Darlik # Posté le 09/04/2012 à 22:08:28
Avatar

 Citation : Tzimue

?>
{
<h1> texte </h1>

<p>
texte <strong> texte </strong>
</p>
}
<?php


En haut et en bas de cette partie de ton code, tu as mal placé tes balises <?php?> et tu as donc 2 accolades qui se promènent dans le html. Un simple petit décalage d'une accolade vers le haut et de l'autre vers le bas et ce code devrait être bon.

Bon courage pour la suite...
Hors ligne franki29 # Posté le 10/04/2012 à 04:29:34
quebecois de souche
Avatar

Avis : Très bon

@Tzimue
il faut que tu ouvre l'accolade du if et apres ferme la balise du php pas l'inverse et la ton mot de passe est texte et non kangourou.

ton code devrai etre:

<?php
if(isset($_POST['mot_de_passe']) AND $_POST['mot_de_passe'] == 'texte')
{
?>/* remarque j'ai ouvert l'accolade avant */
<p>voici les codes</p>
<?php
}
else
{
echo 'mauvais mot de passe';
}
?>
Hors ligne totoduzero # Posté le 16/04/2012 à 09:27:31
J'apprend j'apprend
Avatar

Avis : Très bon

J'ai trouver pour ajouter un nouveau mot de passe:
Code : PHP
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Codes d'accès au serveur central de la NASA</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	</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'acces :</h1>
		<p><strong>CRD5-GTFT-CK65-JOPM-V29N-24G1-HH28-LLFV</strong></p>   
		
		<p>
		Cette page est reservee au personnel de la NASA. N'oubliez pas de la visiter regulierement car les codes d'acces sont changes toutes les semaines.<br />
		La NASA vous remercie de votre visite.
		</p>
        <?php
	}
	elseif ($_POST['mot_de_passe'] == "admin") // sinon si mot de passe est admin afficher le lien.

	{
	?>
	<p>Bienvenue sur la page administrateur</p><br />
Nos partenaire secret: <a href="http://localhost/websiteone/index.php">cliquer pour afficher.</a>
<?php
	}


	
	
	else // Sinon, si aucun mot de passe et correcte affiche le message d'érreur.
	{
		echo "<p>Mot de passe incorrect</p>";
	}
	{
	?>
	<br /> <!-- Affiche sur toute les pages sauf le formulaire le lien de retour. --> 
Cliquer <a href="formulaire.php">ici</a> pour acceder au formulaire.
<?php
	}
	?>
        
	</body>
</html>

Je me penche sur le problème des utilisateur mais je pense que AND le permet.
Un idiot debout va plus loin que deux génie assis!
 
Hors ligne renji333 # Posté le 13/05/2012 à 19:14:33

Avis : Très bon

hum dite moi en gros je cliquer sur essayer je suis bien tomber
sur la page et quand j'ai afficher le code source il y avait
rajouter des balise script en plus donc
POURQUOI il en a pas parler

Voir tous les commentaires