Créa-blog

Ressources pour développeur web

Coder un formulaire de Login sécurisé en PHP | Tutoriel

Accueil → HTML5 → Coder un formulaire de Login sécurisé en PHP | Tutoriel

Créer un formulaire de connexion ou login sécurisé en PHP est une étape essentielle dans la plupart des projets web modernes.

Que vous développiez un site vitrine avec une zone d’administration, un blog ou une boutique en ligne, un système d’authentification permet de contrôler l’accès à certaines parties de votre site.

Préparation de l’environnement

✅ Prérequis

Avant de commencer, assurez-vous d’avoir :

  • Un serveur local comme XAMPP, Laragon, MAMP ou WampServer installé.
  • Un éditeur de code comme VS Code, Sublime Text ou PHPStorm.
  • Une connaissance très basique en HTML, PHP et SQL (mais pas d’inquiétude, on vous guide pas à pas !).
Visualisez la démo

Formulaire de login sécurisé en PHP

Étape 1 : Création de la base de données

Commençons par créer une base de données MySQL pour stocker les utilisateurs.

Script SQL à exécuter dans phpMyAdmin

CREATE DATABASE login_php CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

USE login_php;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(100) NOT NULL UNIQUE,
    email VARCHAR(255) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

✅ Explication

  • username : le pseudo de l’utilisateur.
  • email : adresse email unique.
  • password : sera haché pour ne pas être stocké en clair.
  • created_at : date de création automatique.

Étape 2 : Structure des fichiers

Voici l’architecture du projet que nous allons créer :

login-php/
│
├── index.php              → formulaire de login
├── register.php           → formulaire d'inscription
├── dashboard.php          → page privée après connexion
├── logout.php             → script de déconnexion
├── config.php             → connexion à la base de données
├── styles.css             → mise en page

Étape 3 : Connexion à la base de données (fichier config.php)

<?php
$host = 'localhost';
$dbname = 'login_php';
$user = 'root';
$pass = ''; // Mettez votre mot de passe si nécessaire

try {
    $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $user, $pass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Erreur de connexion à la base de données : " . $e->getMessage());
}
?>

🛡 Pourquoi utiliser PDO ?

  • Sécurisé contre les injections SQL.
  • Compatible avec plusieurs types de bases.
  • Permet les requêtes préparées (voir plus bas).

Étape 4 : Formulaire de connexion (index.php)

<?php session_start(); ?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Connexion</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h2>Connexion</h2>
        <?php
        if (isset($_SESSION['error'])) {
            echo "<p class='error'>{$_SESSION['error']}</p>";
            unset($_SESSION['error']);
        }
        ?>
        <form action="index.php" method="POST">
            <input type="text" name="username" placeholder="Nom d'utilisateur" required>
            <input type="password" name="password" placeholder="Mot de passe" required>
            <button type="submit" name="login">Se connecter</button>
        </form>
        <p>Pas encore de compte ? <a href="register.php">Inscription</a></p>
    </div>
</body>
</html>

Étape 5 : Vérification des identifiants (dans index.php)

Ajoutez ce code en haut du fichier index.php :

<?php
session_start();
require_once 'config.php';

if (isset($_POST['login'])) {
    $username = htmlspecialchars(trim($_POST['username']));
    $password = $_POST['password'];

    $stmt = $pdo->prepare("SELECT * FROM users WHERE username = ?");
    $stmt->execute([$username]);
    $user = $stmt->fetch();

    if ($user && password_verify($password, $user['password'])) {
        // Connexion réussie
        $_SESSION['user_id'] = $user['id'];
        $_SESSION['username'] = $user['username'];
        header("Location: dashboard.php");
        exit;
    } else {
        $_SESSION['error'] = "Identifiants incorrects.";
    }
}
?>

Explication

  • password_verify() compare un mot de passe en clair avec un mot de passe haché.
  • L’utilisateur est redirigé vers une page protégée après connexion.

Étape 6 : CSS de base (styles.css)

body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    width: 300px;
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

input {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    background: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background: #218838;
}

.error {
    color: red;
    text-align: center;
    margin-bottom: 10px;
}

🧠 Récapitulatif à mi-parcours

Nous avons vu :

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?
  • ✅ Comment créer une base de données sécurisée pour les utilisateurs.
  • ✅ Comment utiliser PDO pour se connecter à MySQL.
  • ✅ Comment créer un formulaire HTML + CSS simple pour la connexion.
  • ✅ Comment vérifier les identifiants en PHP avec password_verify().
  • ✅ Comment sécuriser les mots de passe avec un hachage moderne.

Étape 7 : Formulaire d’inscription (register.php)

Ce fichier permet à l’utilisateur de créer un compte. Comme pour index.php, on y inclura une structure HTML, du CSS commun et une logique PHP. Découvrez également Comment valider un formulaire en JS

HTML + PHP

<?php
session_start();
require_once 'config.php';

if (isset($_POST['register'])) {
    $username = htmlspecialchars(trim($_POST['username']));
    $email = trim($_POST['email']);
    $password = htmlspecialchars($_POST['password']);
    $confirm = htmlspecialchars($_POST['confirm']);

    // Validation simple
    if ($password !== $confirm) {
        $_SESSION['error'] = "Les mots de passe ne correspondent pas.";
    } else {
        // Vérifie si l'utilisateur existe déjà
        $check = $pdo->prepare("SELECT * FROM users WHERE username = ? OR email = ?");
        $check->execute([$username, $email]);

        if ($check->rowCount() > 0) {
            $_SESSION['error'] = "Nom d'utilisateur ou email déjà utilisé.";
        } else {
            // Hash du mot de passe
            $hashed = password_hash($password, PASSWORD_DEFAULT);

            // Insertion
            $stmt = $pdo->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)");
            $stmt->execute([$username, $email, $hashed]);

            $_SESSION['success'] = "Inscription réussie. Vous pouvez maintenant vous connecter.";
            header("Location: index.php");
            exit;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Inscription</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <h2>Inscription</h2>
    <?php
    if (isset($_SESSION['error'])) {
        echo "<p class='error'>{$_SESSION['error']}</p>";
        unset($_SESSION['error']);
    }
    ?>
    <form action="register.php" method="POST">
        <input type="text" name="username" placeholder="Nom d'utilisateur" required>
        <input type="email" name="email" placeholder="Email" required>
        <input type="password" name="password" placeholder="Mot de passe" required>
        <input type="password" name="confirm" placeholder="Confirmez le mot de passe" required>
        <button type="submit" name="register">Créer un compte</button>
    </form>
    <p>Déjà un compte ? <a href="index.php">Connexion</a></p>
</div>
</body>
</html>

Étape 8 : Tableau de bord privé (dashboard.php)

Cette page est accessible uniquement après connexion. On va donc vérifier la présence d’une session.

Code PHP + HTML

<?php
session_start();

if (!isset($_SESSION['user_id'])) {
    header("Location: index.php");
    exit;
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Tableau de bord</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
    <h2>Bienvenue, <?= htmlspecialchars($_SESSION['username']) ?> !</h2>
    <p>Vous êtes connecté.</p>
    <a href="logout.php" class="logout">Se déconnecter</a>
</div>
</body>
</html>

👮 Sécurité

On utilise htmlspecialchars() pour afficher les données utilisateur sans risque de XSS.

Étape 9 : Script de déconnexion (logout.php)

<?php
session_start();
session_unset();
session_destroy();
header("Location: index.php");
exit;

Étape 10 : Bonnes pratiques de sécurité à respecter

  1. Hachage des mots de passe : avec password_hash() et vérification avec password_verify() (déjà appliqué).
  2. Requêtes préparées : toujours utiliser prepare() pour éviter les injections SQL.
  3. Validation côté serveur : vérifier tous les champs, même si vous ajoutez une validation en JavaScript.
  4. Filtrage des entrées : utilisez trim(), htmlspecialchars(), filter_var() selon le cas.
  5. HTTPS obligatoire : sur un vrai serveur, utilisez un certificat SSL.
  6. Limiter les tentatives : vous pouvez enregistrer les échecs dans une base ou bloquer l’IP après 5 tentatives.

Bonus : idées d’améliorations

  • ✅ Ajouter une fonction « mot de passe oublié ».
  • ✅ Envoi d’email de confirmation ou de validation.
  • ✅ Afficher les erreurs plus élégamment avec JavaScript.
  • ✅ Ajouter une pagination et gestion de rôles pour un espace admin.
  • ✅ Enregistrement des connexions (logs).
Formulaire de connexion en PHP

Vous disposez maintenant d’un système de login sécurisé en PHP, avec :

  • Un formulaire d’inscription.
  • Un formulaire de connexion.
  • Une page protégée.
  • Une déconnexion propre.
  • Du code sécurisé (sessions, hachage, PDO).
  • Une mise en page en CSS simple et propre.
  • Des bases de référencement SEO.

Allez plus loin en HTML, CSS et PHP :

Live on Twitch
  • 🔥 Vendredi 25 Avril 2025 >19h00

    HTML & SémantiqueStructure d'une page HTML

Articles relatifs

  1. String PHP : 40 fonctions essentielles pour les manipuler
    Dans cet article, nous allons découvrir les fonctions permettant de manipuler les chaîne de caractères ou String PHP les plus populaires et vous fournir des exemples simples. Bonne lecture ! Principaux…
  2. Comment envoyé un mail avec CodeIgniter 4 : Le guide complet
    Envoyé un mail avec CodeIgniter 4 est une tâche incontournable dans le développement d’applications web modernes. Que ce soit pour la confirmation d’inscription, la réinitialisation de mot de passe, l’envoi…
  3. Comment créer un formulaire de connexion avec CodeIgniter 4
    Lorsque l’on développe une application web, il est essentiel de mettre en place un système d’authentification fiable depuis un formulaire de connexion pour protéger l’accès aux données sensibles. Que ce…
  4. PDO en PHP : Un tutoriel complet avec des exemples concrets
    1. Introduction à la POO 2. Classe et objet 3. Méthode et propriété 4. Encapsulation et héritage 5. Le polymorphisme 6. Abstraction et interface 7. Les traits 8. Autoload et…