---
title: 'Récupérer un mot de passe oublié en PHP'
description: 'Dans cet article je vais vous montrer comment réaliser un système de récupération de mot de passe en PHP.'
pubDate: 2020-01-31
family: 'php-symfony'
tags: []
heroImage: /images/recuperer-un-mot-de-passe-oublie-en-php.webp
videoUrl: 'https://www.youtube.com/watch?v=geOKaFhaD-4&list=PLkHw7J3J2iaoPo4M47sjpseUVotzobJNY&index=8'
---

## À 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 :

1. Récupération de mot de passe généré aléatoirement par e-mail

2. 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 :

![Structure des fichiers pour le système de récupération de mot de passe en PHP](/images/mot-de-passe-oublie-workspace.webp)

## 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**.

![Formulaire de connexion avec lien de récupération de mot de passe](/images/recuperer-mot-de-passe-oublie-01.webp)

## 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%;
  }
}
```

![Formulaire de connexion stylisé pour la récupération de mot de passe](/images/recuperer-mot-de-passe-oublie-02.webp)

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.