Formulaire d’authentification login + mot de passe avec PHP et MySQL
L’authentification des utilisateurs est très fréquente dans les applications Web modernes. Il s’agit d’un mécanisme de sécurité utilisé pour restreindre l’accès non autorisé aux outils réservés aux membres sur un site.
Dans ce tutoriel, nous allons créer un système de connexion simple en utilisant PHP et MySQL. Ce tutoriel se compose de deux parties: dans la première partie, nous allons créer un formulaire d’inscription, et dans la deuxième partie, nous allons créer un formulaire de connexion, ainsi qu’une page d’accueil et un script de déconnexion.
La première chose à faire est de mettre en place notre base de données.
Créer une base de données appelée « registration ». Dans la base de données « registration », ajoutez une table appelée « users ». La table users prendra les quatre champs suivants.
- id
- username
- password
Vous pouvez créer ceci en utilisant un client MySQL comme PHPMyAdmin.
Ou vous pouvez le créer sur l’invite de commande MySQL en utilisant le script SQL suivant :
CREATE TABLE `users` ( `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `password` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Créer un formulaire d’inscription
Dans cette partie, nous allons créer un formulaire d’inscription qui permet aux utilisateurs de créer un nouveau compte en remplissant un formulaire web.
Créez maintenant un dossier appelé « registration » dans un répertoire accessible à notre serveur. Créez le dossier à l’intérieur de htdocs (si vous utilisez le serveur XAMPP) ou à l’intérieur de www (si vous utilisez le serveur wampp).
Après avoir créé la table, nous devons créer un script PHP afin de nous connecter au serveur de base de données MySQL. Créons un fichier nommé « config.php » et mettons le code suivant à l’intérieur.
<?php
// Informations d'identification
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'registration');
// Connexion à la base de données MySQL
$conn = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Vérifier la connexion
if($conn === false){
die("ERREUR : Impossible de se connecter. " . mysqli_connect_error());
}
?>
Créons un autre fichier PHP appelé « register.php » et y mettons le code d’exemple suivant. Cet exemple de code va créer un formulaire web qui permet aux utilisateurs de s’inscrire.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
require('config.php');
if (isset($_REQUEST['username'], $_REQUEST['email'], $_REQUEST['password'])){
// récupérer le nom d'utilisateur et supprimer les antislashes ajoutés par le formulaire
$username = stripslashes($_REQUEST['username']);
$username = mysqli_real_escape_string($conn, $username);
// récupérer l'email et supprimer les antislashes ajoutés par le formulaire
$email = stripslashes($_REQUEST['email']);
$email = mysqli_real_escape_string($conn, $email);
// récupérer le mot de passe et supprimer les antislashes ajoutés par le formulaire
$password = stripslashes($_REQUEST['password']);
$password = mysqli_real_escape_string($conn, $password);
//requéte SQL + mot de passe crypté
$query = "INSERT into `users` (username, email, password)
VALUES ('$username', '$email', '".hash('sha256', $password)."')";
// Exécuter la requête sur la base de données
$res = mysqli_query($conn, $query);
if($res){
echo "<div class='sucess'>
<h3>Vous êtes inscrit avec succès.</h3>
<p>Cliquez ici pour vous <a href='login.php'>connecter</a></p>
</div>";
}
}else{
?>
<form class="box" action="" method="post">
<h1 class="box-logo box-title"><a href="https://waytolearnx.com/">WayToLearnX.com</a></h1>
<h1 class="box-title">S'inscrire</h1>
<input type="text" class="box-input" name="username" placeholder="Nom d'utilisateur" required />
<input type="text" class="box-input" name="email" placeholder="Email" required />
<input type="password" class="box-input" name="password" placeholder="Mot de passe" required />
<input type="submit" name="submit" value="S'inscrire" class="box-button" />
<p class="box-register">Déjà inscrit? <a href="login.php">Connectez-vous ici</a></p>
</form>
<?php } ?>
</body>
</html>
Dans l’exemple ci-dessus, nous avons utilisé la fonction PHP hash() pour hacher le mot de passe entrée par l’utilisateur. Cette fonction hache le mot de passe en utilisant l’algorithme de hachage sha256. Elle génère et applique aussi une chaîne aléatoire (le sel) automatiquement lors du hachage du mot de passe; cela signifie que même si deux utilisateurs ont les mêmes mots de passe, leurs hachages de mots de passe seront différents.
Créer la page de connexion PHP
Dans cette partie, nous allons créer une page de connexion où l’utilisateur peut entrer son nom d’utilisateur et son mot de passe. Lorsque l’utilisateur soumettra le formulaire, ces entrées seront vérifiées par rapport aux informations d’identification stockées dans la base de données. Si le nom d’utilisateur et le mot de passe correspondent, l’utilisateur est autorisé et se voit accorder l’accès au site, sinon la tentative de connexion sera rejetée.
Créons un fichier nommé « login.php » et plaçons le code suivant à l’intérieur.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<?php
require('config.php');
session_start();
if (isset($_POST['username'])){
$username = stripslashes($_REQUEST['username']);
$username = mysqli_real_escape_string($conn, $username);
$password = stripslashes($_REQUEST['password']);
$password = mysqli_real_escape_string($conn, $password);
$query = "SELECT * FROM `users` WHERE username='$username' and password='".hash('sha256', $password)."'";
$result = mysqli_query($conn,$query) or die(mysql_error());
$rows = mysqli_num_rows($result);
if($rows==1){
$_SESSION['username'] = $username;
header("Location: index.php");
}else{
$message = "Le nom d'utilisateur ou le mot de passe est incorrect.";
}
}
?>
<form class="box" action="" method="post" name="login">
<h1 class="box-logo box-title"><a href="https://waytolearnx.com/">WayToLearnX.com</a></h1>
<h1 class="box-title">Connexion</h1>
<input type="text" class="box-input" name="username" placeholder="Nom d'utilisateur">
<input type="password" class="box-input" name="password" placeholder="Mot de passe">
<input type="submit" value="Connexion " name="submit" class="box-button">
<p class="box-register">Vous êtes nouveau ici? <a href="register.php">S'inscrire</a></p>
<?php if (! empty($message)) { ?>
<p class="errorMessage"><?php echo $message; ?></p>
<?php } ?>
</form>
</body>
</html>
Créer la page d’accueil
Voici le code de notre fichier « index.php », où l’utilisateur est redirigé après une connexion réussie.
<?php
// Initialiser la session
session_start();
// Vérifiez si l'utilisateur est connecté, sinon redirigez-le vers la page de connexion
if(!isset($_SESSION["username"])){
header("Location: login.php");
exit();
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="sucess">
<h1>Bienvenue <?php echo $_SESSION['username']; ?>!</h1>
<p>C'est votre tableau de bord.</p>
<a href="logout.php">Déconnexion</a>
</div>
</body>
</html>
Créer le script de déconnexion
Maintenant, créons le fichier « logout.php ». Lorsque l’utilisateur clique sur le lien de déconnexion, le script à l’intérieur de ce fichier détruit la session et redirige l’utilisateur vers la page de connexion.
<?php
// Initialiser la session
session_start();
// Détruire la session.
if(session_destroy())
{
// Redirection vers la page de connexion
header("Location: login.php");
}
?>
Créer un fichier de style CSS
La dernière chose à faire est de créer un fichier CSS pour donner du style à ce programme. Créez un fichier nommé « style.css » et collez le code suivant.
body {
background: #1c242d;
}
.box {
border: 1px solid #c4c4c4;
padding: 30px 25px 10px 25px;
background: white;
margin: 30px auto;
width: 360px;
}
h1.box-logo a {
text-decoration:none;
}
h1.box-title {
color: #AEAEAE;
background: #f8f8f8;
font-weight: 300;
padding: 15px 25px;
line-height: 30px;
font-size: 25px;
text-align:center;
margin: -27px -26px 26px;
}
.box-button {
border-radius: 5px;
background: #d2483c;
text-align: center;
cursor: pointer;
font-size: 19px;
width: 100%;
height: 51px;
padding: 0;
color: #fff;
border: 0;
outline:0;
}
.box-register
{
text-align:center;
margin-bottom:0px;
}
.box-register a
{
text-decoration:none;
font-size:12px;
color:#666;
}
.box-input {
font-size: 14px;
background: #fff;
border: 1px solid #ddd;
margin-bottom: 25px;
padding-left:10px;
border-radius: 5px;
width: 347px;
height: 50px;
}
.box-input:focus {
outline: none;
border-color:#5c7186;
}
.sucess{
text-align: center;
color: white;
}
.sucess a {
text-decoration: none;
color: #58aef7;
}
p.errorMessage {
background-color: #e66262;
border: #AA4502 1px solid;
padding: 5px 10px;
color: #FFFFFF;
border-radius: 3px;
}
Conclusion
Vous devriez maintenant avoir une compréhension de base du fonctionnement d’un système de connexion avec PHP et MySQL, vous êtes libre de copier le code source et de l’utiliser dans vos propres projets.
- Créer un système de notification avec PHP, MySQL et AJAX
- Créer un Espace Membre avec administration en PHP et MySQL
- Formulaire d’authentification login + mot de passe avec PHP et MySQL
- Formulaire de contact en PHP avec MySQL
- Récupérer les données d’un formulaire en PHP
- Comment faire un formulaire en PHP/MySQL?
- Formulaire avec captcha en PHP
- Générateur de code barre en PHP
- Liaison entre deux liste déroulante pays et ville en jQuery, Ajax et PHP
Merci pour cet application du PHP, ça m’a aidé.
Bonjour, merci beaucoup pour le code !
J’ai une question, j’ai installé tout les codes pour essayer or lorsque l’on se login on n’est pas redirigés vers la page index, on reste sur la page login. J’ai l’impression que le :
$_SESSION['username'] = $username; header("Location: index.php");ne marche pas et que comme il n’y pas d’username pour la session on retourne automatiquement sur le login.
En espérant que vous puissiez m’éclairer,
Bonen journée
Bonjour Amélie,
Dans le fichier « login.php » sur la ligne 18. Si la requête renvoie une ligne c’est-a-dire « $rows==1 » donc la variable de session $_SESSION[‘username’] aura automatiquement une valeur.
if($rows==1){ $_SESSION['username'] = $username; header("Location: index.php"); }else{ $message = "Le nom d'utilisateur ou le mot de passe est incorrect."; }Dans votre cas $rows==0 c’est pour cela il n’attribut aucune valeur à la variable de session $_SESSION[‘username’]
Veuillez vérifier si l’utilisateur existe bien dans votre base de données.
Bonjour Thomas,
Merci beaucoup pour votre réponse rapide !
J’ai vérifié sur la base de données et il existe bel et bien l’utilisateur. Et d’ailleurs lorsque je rentre un utilisateur qui n’existe pas je reçois bien le message « Le nom d’utilisateur ou le mot de passe est incorrect » ce qui suggère que lorsque $rows==0 le message d’erreur apparaît. Le problème ne pourrait-il pas venir d’ailleurs?
Encore merci,
Amélie
Ça y est j’ai trouvé ! Le script ne marchait pas car il y a la déclaration du header avant le php, j’ai mis le script php avant le DOCTYPE et ça a marché ! Merci beaucoup
Super, j’était entrain de rédiger la réponse, j’ai pensé que vous perdez la session après la redirection, mais en fait c’est juste une question d’ordre, normalement ça sera quelque chose comme ça:
<?php session_start(); // code... ?> <!DOCTYPE html>Bon courage pour la suite 🙂
Bonjour Thomas ,
Merci pour le code source , mais même problème qu’Amélie . J’ai pourtant essayé , (enfin je pense ) avoir mis le script php avant le DOCTYPE mais je reste sur la page du login . Les utilisateurs sont bien créés . Pouvez vous m’aidez ? , merci par avance .
Bonjour,
En fait la perte de session PHP après la redirection est un problème très courant:
Assurez-vous que session_start(); se trouve au début de votre script, juste après l’ouverture du balise
<?php. Assurez-vous également qu’il n’y a pas d’espaces / tabulations avant la déclaration d’ouverture <?php.
Si ne marche pas, ajouter « exit » après l’appel du header comme suit.
if($rows==1){ $_SESSION['username'] = $username; header("Location: index.php"); exit; }Bonjour à tous merci pour le code plus haut.
En ce qui me concerne, je ne sais rien de de la connexion à la base de données avec Mysqly , je me connecte avec le PDO.
Pouvez vous svp m’aider à mettre en place un formulaire d’inscription et de connexion?
Bonjour Tenemaga,
Ces tutos pourraient vous intéresser:
Comment faire un formulaire en PHP/MySQL?
Connexion à une base de données MySQL avec PHP PDO
Authentification d’un utilisateur à l’aide de PDO et password_verify()
Bon courage 🙂
merci énormément , maintenant cela fonctionne .
Bonjour,
Merci pour votre script.
une petite question, comment interdire le browsing… Car malgré le script d’authentification il est possible d’écrire l’url et d’y accéder sans être authentifié ?
merci.
Bonjour,
Ce cas est déjà traité dans le tuto, regardez le fichier login.php dans la ligne 20, si l’utilisateur s’est connecté avec succès, on a définit une variable de session
$_SESSION['username'] = $username;Ensuite, chaque page vérifie l’utilisateur connecté ou non par le code ci-dessous (regardez le fichier index.php):
<?php // Initialiser la session session_start(); /* Vérifiez si l'utilisateur est connecté, sinon redirigez-le vers la page de connexion*/ if(!isset($_SESSION["username"])){ header("Location: login.php"); exit(); } ?>Bon courage 🙂
bonjour,
j’ai suivi le tuto tout en creant des utilisateurs dans la base de donné, puis j’ai suivi la correction dans les commentaires mais je reste bloquer a la page de connexion me disant que c’est incorrect.
merci pour ce tuto
Peut être que vous utiliser une ancienne version PHP.
j’utilise la version php5 5.12 es ce que sa suffit ou il faut passer a une version superieur ?
ok c’est bon j’ai réussi a régler le problème qui venait de ma base de donné, le tuto explique très bien mais aurez vous de le documentation si il est possible de rediriger vers une page en particulier selon le compte utilisé ?
Cela pourrait vous intéresser.
Bonjour,
Merci, et félicitation pour tous ces tutos,
je cherche comment faire pour ouvrir une page index différente pour chaque membre
ex : membre Pierre ouvre une page 1
membre Paul ouvre une page 2
membre Jacques ouvre une page 3
C’est-à-dire après l’authentification, vous pouvez passez le nom d’utilisateur en utilisant une requête, comme ceci: http://www.exemple.com/index.php?user=username Et personnalisez cette page en fonction de chaque utilisateur.
Non la redirection chaque utilisateurs redirigés sur différentes pages
merci cordialement,
Bonjour, je pense avoir trouvé :
dans le fichier « index.php » j’ai modifier les premières ligne PHP et j’ai mis
if (session_id() == "") { session_start(); } if (!isset($_SESSION['username'])) { header('Location: login.php '); exit; } if ($_SESSION['username'] == 'jpg') { header('Location: jpg.php'); exit; } if ($_SESSION['username'] == 'moi') { header('Location: moi.php'); exit; }Ensuite j’ai crée des fichiers nommé par les nom des différents ‘location’
J’ai essayé tout ce que vous avez mentionné. mais j’ai toujours le même soucis. L’index en page blanche et sans redirection vers login.php. Et lorsque je me connecte, le compte existe bien mais il me renvoi à la page de connexion..
Je pense que la redirection faite par la fonction header() ne fonctionne probablement pas. Une page blanche signifie des erreurs. Vous pouvez vérifier les fichiers logs car ils contiennent toutes les erreurs pour voir quel est le problème. Il ne doit y avoir absolument aucun caractère envoyé au navigateur avant la redirection header(), sinon il échouera.
Je pense que ces quelques espaces avant <? dans votre script (s’il ne s’agit pas d’une erreur de copier / coller) pourrait interférer avec la redirection head().
Quoi qu’il en soit, vérifiez votre error.log et regardez ce que vous avez là.
J’ai pourtant essayé de supprimé tous les espaces pour être sûr mais toujours pareil. Je vais regarder à nouveau dans la journée. Je n’arrive pas à écrire de code en commentaire. Mais j’ai l’impression que c’est la balise écho plus bas qui pourrait poser problème ? La où il y a le du php, quand le membre est connecté (bienvenue « username ») je sais pas si vous voyez ce que je veux dire
J’ai oublié, je n’ai pas d’accès au fichier log. Ni sur mon FTP ni sur le site de mon hébergeur (j’utilise un hébergement gratuit donc avec options limités)
J’ai enfin trouvé ! Je partage la solution si quelqu’un est dans la même situation. C’était tellement simple.. J’ai édité index.php avec notepad++ et j’ai changé l’encodage qui était en UTF-8 (BOM). Je l’ai passé en UTF-8 standard. Tout simplement… Merci quand même pour le coup de main
Bonjour,
comment faire pour que la personne qui vient de s’inscrire sur le formulaire,
reçoive automatiquement un émail contenant les informations qu’il a renseignées
merci
cordialement
Dans le fichier register.php, juste après la condition if($res){ qui se trouve sur la ligne 24, qui signifie que l’utilisateur s’est inscrit avec succès, essayez d’intégrer le code qui se trouve dan ce tuto.
Des tuto qui pourraient vous intéresser:
Comment configurer WampServer pour envoyer un mail depuis localhost en PHP
Comment configurer XAMPP pour envoyer un mail depuis localhost en PHP
Bonjour,
Comment configurer « sendmail » avec une adresse email « gmx.fr »
après de multiple test je ne trouve pas
merci
cordialement
Avez-vous une autorité sur le domaine « gmx.fr » ?