Dans cette séance de TP vous allez faire des exercices sur la manipulation de bases de données avec PHP. Vous apprendrez aussi à chiffrer les mots de passe et à déboguer vos requêtes SQL préparées.
Liens utiles : TD #1
Dans le répertoire r213 que vous avez déjà créé, ajoutez un répertoire nommé r213-tp4 pour sauvegarder les exercices de cette séance (TP #4).
Dans ce répertoire r213-tp4, créez un répertoire appelé exo1 pour le premier exercice, exo2 pour le deuxième, etc. Vos exercices ne seront pas corrigés si vous ne respectez pas ces instructions.
À la fin de la séance, vous devez compresser (en format ZIP ou RAR) le répertoire r213-tp4 avec tous vos exercices et le soumettre sur AMeTICE.
Seuls les exercices marqués avec une étoile (*) seront évalués. La date limite pour rendre vos exercices est visible sur AMeTICE, et aucun travail ne sera accepté après. Le corrigé sera affiché après l'évaluation des exercices.
Dans les exercices d'aujourd'hui nous allons protéger un site web avec un mot de passe, en augmentant de plus en plus la flexibilité et la sécurité.
Dans cet exercice vous allez faire un site web qui affiche une page seulement si l'utilisateur connaît le mot de passe.
Vous avez un fichier appelé index.html avec un formulaire pour entrer le mot de passe (remarquez la façon alternative d'utiliser l'élément <label>) :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>R213</title>
</head>
<body>
<form method="post" action="traitement.php">
<label>
Mot de passe : <input type="password" name="mdp">
</label>
<input type="submit" value="Envoyer">
</form>
</body>
</html>Le fichier traitement.php doit vérifier si le mot de passe entré est « abc123 ». Si oui, on renvoie l'utilisateur vers la page secret.html. Sinon, on affiche un message d'erreur avec un lien vers le formulaire. Ce vous qui allez faire cette page.
Le code pour la page secret.html est :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>R213</title>
</head>
<body>
<p>
Mes codes de connexion sont :
</p>
<ul>
<li>Netflix : azerty@gmail.com - 8KQxpPFTibtf</li>
<li>Canal+ : azerty@gmail.com - hucAf9G2BqDE</li>
<li>Amazon Prime : azerty@gmail.com - PtkHRDFcwex5</li>
</ul>
</body>
</html>Vous allez maintenant modifier l'exercice 1 pour utiliser une base de données.
La page avec les codes de connexion est protégée par une liste de mots de passe qui sont enregistrés dans une base de données. Si un utilisateur rentre un de ses mots de passe dans le formulaire, il est redirigé vers secret.html. Vous devez donc vérifier si le mot de passe écrit dans le formulaire correspond à un des mots de passe dans la base de données.
Vous trouverez une base de données déjà remplie ici. Vous pouvez l'importer sur votre serveur de base de données avec phpMyAdmin.
La requête SQL doit être à peu près comme celle-ci :
SELECT * FROM motdepasse WHERE mdp = 'abc123'Astuce : si vous avez des erreurs de PHP avec votre requête SQL, insérez cette instruction après l'exécution de la requête :
$sth->debugDumpParams();
Elle permet de voir la requête finie, après avoir remplacé les marqueurs nominatifs par les valeurs du tableau $values. Vous trouverez plus d'informations sur cette instruction dans la documentation.
Nous continuons le travail sur cet exercice en ajoutant maintenant la possibilité d'enregistrer de nouveaux utilisateurs.
Dans cet exercice vous allez continuer l'exercice 2 en ajoutant un formulaire pour enregistrer un nouveau mot de passe dans la base de données.
Dans votre fichier secret.html, ajoutez un formulaire comme ceci après la liste des informations confidentielles :
<form method="post" action="ajouter_mdp.php">
<p>
Souhaitez-vous ajouter un nouveau mot de passe ?
</p>
<label>
Nouveau mot de passe : <input type="password" name="mdp">
</label>
<input type="submit" value="Envoyer">
</form>Faites maintenant un fichier ajouter_mdp.php qui ajoute le nouveau mot de passe dans la base de données et renvoie l'utilisateur vers la page d'accueil.
Vérifiez que votre site web marche correctement : les nouveaux mots de passe apparaissent dans la base de données et on peut les utiliser pour se connecter.
Pour le exercice suivant, nous allons chiffrer les mots de passe dans la base de données pour éviter qu'ils puissent être volés. Pour cela, nous utiliserons la fonction md5() [doc]. Cette fonction prend une chaîne de caractères comme paramètre et renvoie une chaîne avec 32 caractères.
<?php
$str = 'abc123';
echo md5($str); ∕∕ affiche 'e99a18c428cb38d5f260853678922e03'
La fonction md5 est une fonction de hachage : elle transforme une chaîne de caractères dans une chaîne qui semble aléatoire, mais elle ne l'est pas : si on l'exécute deux fois sur la même chaîne de caractères, on obtient le même résultat. L’intérêt d'une fonction de hachage est qu'il est difficile de savoir quelle était la chaîne de caractères originale.
Dans cet exercice vous allez continuer l'exercice 3 en ajoutant un chiffrement des mots de passe de la base de données.
Pour cet exercice, utilisez cette base de données. Elle contient les trois mots de passe « abc123 », « def456 » et « ghu789 » chiffrés.
Il y a peu de choses à modifier :
md5($_POST['mdp']) au lieu de $_POST['mdp']. Ainsi, le mot de passe ne sera pas lisible sur la base de données, seulement son hachage.
md5($_POST['mdp']) est dans la base de données.
Les mots de passe des utilisateurs seront maintenant chiffrés et protégés des hackers.
S'il vous reste du temps, faites l'exercice suivant.
Dans cet exercice vous allez continuer l'exercice 4 pour mettre tous les codes confidentiels dans une base de données, afin de pouvoir en ajouter plus.
Utilisez cette base de données. Elle contient la table pour les mots de passe, mais aussi une table « codes » avec les codes confidentiels. Regardez son contenu sur phpMyAdmin pour comprendre sa structure.
Vous avez trois choses à faire :
<form method="post" action="ajouter_code.php">
<p>
Souhaitez-vous ajouter un nouveau code ?
</p>
<label>
Site : <input type="text" name="site">
</label>
<label>
Identifiant : <input type="text" name="login">
</label>
<label>
Mot de passe : <input type="text" name="mdp">
</label>
<input type="submit" value="Envoyer">
</form>Vérifiez que la nouvelle fonctionnalité marche : vous pouvez ajouter de nouveaux codes et les voir. Vous avez fini votre propre gestionnaire de mots de passe !