Récupérer un mot de passe oublié en PHP
À propos de ce tutoriel
Dans cet article je vais vous montrer comment réaliser un système de récupération de mot de passe en PHP.
Deux solutions vont êtres mises en œuvre :
- Récupération de mot de passe généré aléatoirement par e-mail
- Récupération de mot de passe avec un jeton
Création de l’environnement de travail
Pour commencer vous allez créer votre environnement de travail, il doit ressembler à celui-ci :
Création de la base de données
Puis il va falloir créer une base de données ainsi que la table que nous utiliserons pour ce projet :
CREATE DATABASE tutoriel;
USE tutoriel;
CREATE TABLE users
{
id INT PRIMARY KEY NOT NULL,
email VARCHAR(255),
password VARCHAR(255),
token VARCHAR(255)
};Création du formulaire de connexion
Vous allez maintenant ajouter dans le fichier index.php le contenu suivant :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Login Form</h2>
<form method="post">
<div class="container">
<label for="email"><b>Email</b></label>
<input type="email" name="email" required>
<label for="password"><b>Mot de passe</b></label>
<input type="password" name="password" required>
<button type="submit">Connexion</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Annuler</button>
<span class="psw"><a href="forgot_password.php">Mot de passe oublié ?</a></span>
</div>
</form>
</body>
</html>Il s’agit tout simplement d’une page HTML5 classique contenant un titre suivi d’un formulaire de connexion avec un bouton « Mot de passe oublié » qui lors d’un clic sur celui-ci nous redirigera vers le fichier forgot_password.php.
Ajout du style
Bon là c’est pas vraiment présentable donc on va ajouter du CSS dans le fichier style.css :
body {font-family: Arial, Helvetica, sans-serif; width: 50%; margin: auto;}
form {border: 3px solid #f1f1f1;}
input[type=email], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
C’est quand même plus sympa maintenant !
Connexion à la base de données
Et si on passait au PHP ? On va donc ouvrir le fichier db.php et coder la connexion à notre base de données :
<?php
try
{
$db = new PDO('mysql:host=localhost;dbname=tutoriel', 'USER', 'PASS');
}
catch (PDOException $e)
{
print('Erreur : ' . $e->getMessage() . "<br/>");
}On créée un nouvel objet PDO et on passe en paramètre une chaîne de connexion (ici MySQL), le nom d’utilisateur et le mot de passe du compte de la base de données. Le tout est englobé par un try catch pour gérer les exceptions et comprendre pourquoi une erreur est survenue.
Soumission du formulaire
On va désormais retourner sur le fichier index.php afin d’ajouter la vérification du mot de passe lors de la soumission du formulaire :
<?php
include 'db.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h2>Login Form</h2>
<form method="post">
<div class="container">
<label for="email"><b>Email</b></label>
<input type="email" name="email" required>
<label for="password"><b>Mot de passe</b></label>
<input type="password" name="password" required>
<button type="submit">Connexion</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<button type="button" class="cancelbtn">Annuler</button>
<span class="psw"><a href="forgot_password.php">Mot de passe oublié ?</a></span>
</div>
</form>
</body>
</html>
<?php
if (isset($_POST['email'], $_POST['password'])) {
$stmt = $db->prepare('SELECT password FROM users WHERE email = ?');
$stmt->execute($_POST['email']);
$hashedPassword = $stmt->fetchColumn();
if (password_verify($_POST['password'], $hashedPassword)) {
echo "Connexion réussie";
} else {
echo "Mot de passe incorrect";
}
}
?>Au tout début du fichier on ajoute l’inclusion du fichier db.php pour pouvoir utiliser notre objet PDO est interroger notre base de données.
A la fin du fichier nous vérifions si le formulaire a été soumis et si c’est le cas nous allons récupérer le mot de passe hashé de l’utilisateur afin de le comparer avec celui envoyé par le formulaire.
Réinitialisation du mot de passe
Ajoutez le code suivant dans le fichier forgot_password.php
<?php
include 'db.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Site web</title>
</head>
<body>
<h2>Forgot password</h2>
<form method="post">
<div class="container">
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter Email" name="email" required>
<button type="submit">Send me a random password</button>
</div>
</form>
</body>
</html>
<?php
if (isset($_POST['email'])) {
$password = uniqid();
$hashedPassword = password_hash($password, PASSWORD_DEFAULT);
$subject = 'Mot de passe oublié';
$message = "Bonjour, voici votre nouveau mot de passe : $password";
$headers = 'Content-Type: text/plain; charset="UTF-8"';
if (mail($_POST['email'], $subject, $message, $headers)) {
$stmt = $db->prepare("UPDATE users SET password = ? WHERE email = ?");
$stmt->execute([$hashedPassword, $_POST['email']]);
echo "E-mail envoyé";
} else {
echo "Une erreur est survenue";
}
}
Le code ci-dessus nous permet de réinitialiser le mot de passe d’un utilisateur lors de la soumission du formulaire grâce à l’envoie d’un e-mail contenant le mot de passe généré en PHP.
