Dans ce didacticiel, je vais vous apprendre à créer votre propre système de connexion PHP sécurisé. Un formulaire de connexion est ce que les visiteurs de votre site Web utiliseront pour se connecter à votre site Web afin d'accéder au contenu des utilisateurs connectés (comme une page de profil).
1. Mise en route
Nous devons suivre quelques étapes avant de créer notre système de connexion sécurisé. Nous devons configurer notre environnement de serveur Web et nous assurer que les extensions requises sont activées.
1.1. Exigences
- Si vous n'avez pas configuré de serveur Web local, je vous recommande de télécharger et d'installer XAMPP .
- XAMPP est un package de serveur Web multiplateforme qui comprend l'essentiel pour les développeurs back-end. Il comprend PHP, MySQL, Apache, phpMyAdmin, etc. Il n'est pas nécessaire d'installer tous les logiciels séparément avec XAMPP.
1.2. Ce que vous apprendrez dans ce tutoriel
- Conception de formulaire — Concevez un formulaire de connexion avec HTML5 et CSS3.
- Requêtes SQL préparées — Comment préparer correctement les requêtes SQL pour empêcher l'injection SQL et empêcher ainsi l'exposition de votre base de données.
- Validation de base — Validation des données de formulaire envoyées au serveur à l'aide de requêtes GET et POST (nom d'utilisateur, mot de passe, e-mail, etc.).
- Gestion des sessions — Initialisez les sessions et stockez les résultats de la base de données récupérés. Les sessions sont enregistrées sur le serveur et sont associées à un identifiant unique qui est enregistré dans le navigateur.
1.3. Structure et configuration des fichiers
Nous pouvons maintenant démarrer notre serveur Web et créer les fichiers et répertoires que nous allons utiliser pour notre système de connexion.
- Ouvrez le panneau de configuration XAMPP
- À côté du module Apache, cliquez sur Démarrer
- À côté du module MySQL, cliquez sur Démarrer
- Accédez au répertoire d'installation de XAMPP ( C:\xampp )
- Ouvrez le répertoire htdocs
- Créez les répertoires et fichiers suivants :
Chaque dossier sera composé des éléments suivants :
- index.html — Le formulaire de connexion créé avec HTML5 et CSS3. Nous n'avons pas besoin d'utiliser PHP dans ce fichier. Par conséquent, nous pouvons l'enregistrer au format HTML brut.
- style.css — La feuille de style (CSS3) de notre système de connexion sécurisé.
- authentication.php — Authentifiez les utilisateurs, connectez-vous à la base de données, validez les données du formulaire, récupérez les résultats de la base de données et créez de nouvelles sessions.
- logout.php — Détruit les sessions connectées et redirige l'utilisateur vers la page de connexion.
- home.php — Page d'accueil de base pour les utilisateurs connectés.
- profile.php — Récupérez les détails du compte de l'utilisateur à partir de notre base de données MySQL et remplissez les détails du compte avec PHP et HTML.
2. Création de la conception du formulaire de connexion
Nous allons maintenant créer un formulaire que nos utilisateurs pourront utiliser pour saisir leurs coordonnées et les soumettre pour traitement. Nous utiliserons HTML et CSS pour cette partie du didacticiel car PHP ne sera pas nécessaire sur cette page.
Modifiez le fichier index.html avec votre éditeur de code préféré et ajoutez le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div class="login">
<h1>Login</h1>
<form action="authenticate.php" method="post">
<label for="username">
<i class="fas fa-user"></i>
</label>
<input type="text" name="username" placeholder="Username" id="username" required>
<label for="password">
<i class="fas fa-lock"></i>
</label>
<input type="password" name="password" placeholder="Password" id="password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>Si nous naviguons vers la page d'index dans notre navigateur Web, cela ressemblera à ceci :
Plutôt basique non ? Modifions notre fichier style.css et implémentons le code qui améliorera l'apparence du formulaire.
Ajoutez le code suivant au fichier style.css :
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"] {
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}Nous devons inclure notre feuille de style dans notre fichier index.html et nous devons donc ajouter le code suivant à la section head :
<link href="style.css" rel="stylesheet" type="text/css">Et maintenant, si nous actualisons la page index.html dans notre navigateur Web, notre formulaire de connexion sera plus attrayant :
Ça a l'air bien mieux ! Affinons les éléments de formulaire, afin que nous puissions mieux comprendre ce qui se passe.
- Formulaire — Nous devons utiliser à la fois leactionetPostles attributs. leactionsera défini sur le fichier d'authentification. Lorsque le formulaire est soumis, les données du formulaire seront envoyées au fichier d'authentification pour traitement. De plus, lemethodest déclaré commepostcar cela nous permettra de traiter les données du formulaire en utilisant la méthode de requête POST.
- Entrée (texte/mot de passe) — Nous devons nommer nos champs de formulaire afin que le serveur puisse les reconnaître. La valeur de l'attributnameon peut déclarer commeusername, que nous pouvons utiliser pour récupérer la variable post dans notre fichier d'authentification afin d'obtenir les données, par exemple :$_POST['nom d'utilisateur'].
- Entrée (soumettre) — Lors de la soumission du formulaire, les données seront envoyées à notre fichier d'authentification pour traitement.
3. Création de la base de données et configuration des tables
Pour cette partie, vous devrez accéder à votre base de données MySQL, soit en utilisant phpMyAdmin , soit votre application de gestion de base de données MySQL préférée.
Suivez les instructions ci-dessous si vous utilisez phpMyAdmin .
- Accédez à : http://localhost/phpmyadmin/
- Cliquez sur l' onglet Bases de données en haut
- Sous Créer une base de données , entrez phplogin dans la zone de texte
- Sélectionnez utf8_general_ci comme classement
- Cliquez sur Créer
Vous pouvez utiliser votre propre nom de base de données, mais pour ce tutoriel, nous utiliserons phplogin .
Ce dont nous avons besoin maintenant, c'est d'une table de comptes car elle stockera tous les comptes (noms d'utilisateur, mots de passe, e-mails, etc.) enregistrés dans le système.
Cliquez sur la base de données dans le panneau de gauche ( phplogin ) et exécutez l'instruction SQL suivante :
CREATE TABLE IF NOT EXISTS `accounts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
INSERT INTO `accounts` (`id`, `username`, `password`, `email`) VALUES (1, 'test', '$2y$10$SfhYIDtn.iOuCW7zfoFLuuZHX6lja4lF4XA4JqNmpiH/.P3zB8JCa', 'test@test.com');Sur phpMyAdmin , cela devrait ressembler à :
Le code d'instruction SQL ci-dessus créera la table des comptes avec les colonnesid, username, password, etemail.
L'instruction SQL insérera un compte de test avec le nom d'utilisateur :test, et le mot de passe :test. Le compte de test sera utilisé à des fins de test pour s'assurer que notre système de connexion fonctionne correctement.
4. Authentification des utilisateurs avec PHP
Maintenant que nous avons configuré notre base de données, nous pouvons continuer et commencer à coder avec PHP. Nous allons commencer par le fichier d'authentification, qui traitera et validera les données de formulaire que nous enverrons à partir de notre fichier index.html .
Modifiez le fichier authentication.php et ajoutez ce qui suit :
<?php
session_start();
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
// If there is an error with the connection, stop the script and display the error.
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}Initialement, le code démarrera la session car cela nous permet de conserver les détails du compte sur le serveur et sera utilisé plus tard pour mémoriser les utilisateurs connectés.
La connexion à la base de données est indispensable. Sans cela, comment pouvons-nous récupérer et stocker les informations relatives à nos utilisateurs ? Par conséquent, nous devons nous assurer de mettre à jour les variables pour refléter nos informations d'identification de base de données MySQL.
Ajouter ci-dessous :
// Now we check if the data from the login form was submitted, isset() will check if the data exists.
if ( !isset($_POST['username'], $_POST['password']) ) {
// Could not get the data that should have been sent.
exit('Please fill both the username and password fields!');
}Le code ci-dessus s'assurera que les données du formulaire existent, alors que si l'utilisateur essaie d'accéder au fichier sans soumettre le formulaire, il produira une simple erreur.
Ajouter ci-dessous :
// Prepare our SQL, preparing the SQL statement will prevent SQL injection.
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
// Bind parameters (s = string, i = int, b = blob, etc), in our case the username is a string so we use "s"
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
// Store the result so we can check if the account exists in the database.
$stmt->store_result();
$stmt->close();
}
?>Le code ci-dessus préparera l'instruction SQL qui sélectionnera leidetpasswordcolonnes de la table des comptes. De plus, il liera leusernameà l'instruction SQL, exécutez, puis stockez le résultat.
Après la ligne suivante :
$stmt->store_result();Ajouter:
if ($stmt->num_rows > 0) {
$stmt->bind_result($id, $password);
$stmt->fetch();
// Account exists, now we verify the password.
// Note: remember to use password_hash in your registration file to store the hashed passwords.
if (password_verify($_POST['password'], $password)) {
// Verification success! User has logged-in!
// Create sessions, so we know the user is logged in, they basically act like cookies but remember the data on the server.
session_regenerate_id();
$_SESSION['loggedin'] = TRUE;
$_SESSION['name'] = $_POST['username'];
$_SESSION['id'] = $id;
echo 'Welcome ' . $_SESSION['name'] . '!';
} else {
// Incorrect password
echo 'Incorrect username and/or password!';
}
} else {
// Incorrect username
echo 'Incorrect username and/or password!';
}Tout d'abord, nous devons vérifier si la requête a renvoyé des résultats. Si lausernamen'existe pas dans la base de données, il n'y aurait alors aucun résultat.
Si le nom d'utilisateur existe, nous pouvons lier les résultats à la fois au$idet$mot de passevariables.
Par la suite, nous procédons à la vérification du mot de passe avec lepassword_verifyune fonction. Seuls les mots de passe qui ont été créés avec lepassword_hashfonction fonctionnera.
Si vous ne souhaitez utiliser aucune méthode de chiffrement de mot de passe, vous pouvez simplement remplacer le code suivant :
if (password_verify($_POST['password'], $password)) {Avec:
if ($_POST['password'] === $password) {Cependant, je ne recommande pas de supprimer les fonctions de hachage, car si votre base de données est exposée d'une manière ou d'une autre, tous les mots de passe stockés dans la table des comptes seront également exposés. De plus, l'utilisateur aura un sentiment d'intimité sachant que son mot de passe est crypté.
Une fois l'authentification réussie de l'utilisateur, les variables de session seront initialisées et mémorisées jusqu'à ce qu'elles soient détruites par la déconnexion ou l'expiration de la session. Ces variables de session sont stockées sur le serveur et sont associées à un identifiant de session stocké dans le navigateur de l'utilisateur. Nous utiliserons ces variables pour déterminer si l'utilisateur est connecté ou non, et pour associer les variables de session à nos résultats de base de données MySQL récupérés.
L'utilisateur ne peut pas modifier les variables de session dans son navigateur et vous n'avez donc pas à vous en préoccuper. La seule variable qu'ils peuvent modifier est l'ID de session crypté, qui est utilisé pour associer l'utilisateur aux sessions du serveur.
Nous pouvons maintenant tester le système de connexion et nous assurer que l'authentification fonctionne correctement. Accédez à http://localhost/phplogin/index.html dans votre navigateur.
Tapez un nom d'utilisateur et un mot de passe aléatoires, puis cliquez sur le bouton de connexion. Il devrait générer une erreur qui devrait ressembler à ce qui suit :
Ne vous inquiétez pas, il n'est pas cassé ! Si nous revenons à notre formulaire de connexion et entrons test pour les champs nom d'utilisateur et mot de passe, la page d'authentification ressemblera à ceci :
Si vous recevez une erreur, assurez-vous de revérifier votre code pour vous assurer que vous n'avez rien manqué ou vérifiez si le compte de test existe dans votre base de données.
5. Création de la page d'accueil
La page d'accueil sera la première page que nos utilisateurs verront lorsqu'ils seront connectés. La seule façon dont ils peuvent accéder à cette page est s'ils sont connectés, alors que s'ils ne le sont pas, ils seront redirigés vers la page de connexion.
Modifiez le fichier home.php et ajoutez le code suivant :
<?php
// We need to use sessions, so you should always start sessions using the below code.
session_start();
// If the user is not logged in redirect to the login page...
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit;
}
?>Fondamentalement, le code ci-dessus vérifiera si l'utilisateur est connecté, s'il ne l'est pas, il sera redirigé vers la page de connexion. Se souvenir du$_SESSION['loggedin']variable que nous avons définie dans le fichier authentication.php ? C'est ce que nous pouvons utiliser pour déterminer si les utilisateurs sont connectés ou non.
Nous pouvons maintenant ajouter du HTML à notre page d'accueil. Sous la balise de fermeture, ajoutez le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body class="loggedin">
<nav class="navtop">
<div>
<h1>Website Title</h1>
<a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a>
<a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
</div>
</nav>
<div class="content">
<h2>Home Page</h2>
<p>Welcome back, <?=$_SESSION['name']?>!</p>
</div>
</body>
</html>Le code ci-dessus est le modèle de notre page d'accueil. Sur cette page, l'utilisateur rencontrera un message de bienvenue avec son nom affiché.
Nous devons ajouter CSS pour la page d'accueil. Ajoutez le code suivant au fichier style.css :
.navtop {
background-color: #2f3947;
height: 60px;
width: 100%;
border: 0;
}
.navtop div {
display: flex;
margin: 0 auto;
width: 1000px;
height: 100%;
}
.navtop div h1, .navtop div a {
display: inline-flex;
align-items: center;
}
.navtop div h1 {
flex: 1;
font-size: 24px;
padding: 0;
margin: 0;
color: #eaebed;
font-weight: normal;
}
.navtop div a {
padding: 0 20px;
text-decoration: none;
color: #c1c4c8;
font-weight: bold;
}
.navtop div a i {
padding: 2px 8px 0 0;
}
.navtop div a:hover {
color: #eaebed;
}
body.loggedin {
background-color: #f3f4f7;
}
.content {
width: 1000px;
margin: 0 auto;
}
.content h2 {
margin: 0;
padding: 25px 0;
font-size: 22px;
border-bottom: 1px solid #e0e0e3;
color: #4a536e;
}
.content > p, .content > div {
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
margin: 25px 0;
padding: 25px;
background-color: #fff;
}
.content > p table td, .content > div table td {
padding: 5px;
}
.content > p table td:first-child, .content > div table td:first-child {
font-weight: bold;
color: #4a536e;
padding-right: 15px;
}
.content > div p {
padding: 5px;
margin: 0 0 10px 0;
}Maintenant que nous avons configuré notre page d'accueil, nous pouvons rediriger nos utilisateurs du fichier authentication.php vers notre page d'accueil, modifier authentication.php et remplacer la ligne de code suivante :
echo 'Welcome ' . $_SESSION['name'] . '!';Avec:
header('Location: home.php');Si vous vous connectez avec le compte de test, vous devriez voir quelque chose comme ceci :
Il s'agit d'une page d'accueil assez basique. Vous pouvez le personnaliser comme vous le souhaitez maintenant que vous comprenez comment cela fonctionne.
6. Création de la page de profil
La page de profil affichera les informations de compte de l'utilisateur connecté.
Modifiez le fichier profile.php et ajoutez le code suivant :
<?php
// We need to use sessions, so you should always start sessions using the below code.
session_start();
// If the user is not logged in redirect to the login page...
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit;
}
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER, $DATABASE_PASS, $DATABASE_NAME);
if (mysqli_connect_errno()) {
exit('Failed to connect to MySQL: ' . mysqli_connect_error());
}
// We don't have the password or email info stored in sessions so instead we can get the results from the database.
$stmt = $con->prepare('SELECT password, email FROM accounts WHERE id = ?');
// In this case we can use the account ID to get the account info.
$stmt->bind_param('i', $_SESSION['id']);
$stmt->execute();
$stmt->bind_result($password, $email);
$stmt->fetch();
$stmt->close();
?>Le code ci-dessus récupère des informations de compte supplémentaires à partir de la base de données, comme auparavant avec la page d'accueil, nous n'avions pas besoin de nous connecter à la base de données car nous utilisions les données stockées dans les sessions.
On va renseigner toutes les informations du compte de l'utilisateur et donc il faut récupérer leusername ou idcolonnes de la base de données. Nous n'avons pas besoin de récupérer lepassword et emailcolonnes parce que nous les avons stockées dans des variables de session qui ont été déclarées dans le fichier authentication.php .
Après la balise de fermeture, ajoutez le code suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Profile Page</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body class="loggedin">
<nav class="navtop">
<div>
<h1>Website Title</h1>
<a href="profile.php"><i class="fas fa-user-circle"></i>Profile</a>
<a href="logout.php"><i class="fas fa-sign-out-alt"></i>Logout</a>
</div>
</nav>
<div class="content">
<h2>Profile Page</h2>
<div>
<p>Your account details are below:</p>
<table>
<tr>
<td>Username:</td>
<td><?=$_SESSION['name']?></td>
</tr>
<tr>
<td>Password:</td>
<td><?=$password?></td>
</tr>
<tr>
<td>Email:</td>
<td><?=$email?></td>
</tr>
</table>
</div>
</div>
</body>
</html>Une mise en page simple qui remplira les informations de compte. Si vous accédez au fichier profile.php , il ressemblera à ceci :
N'oubliez pas que les mots de passe sont cryptés, vous ne pouvez donc pas voir le mot de passe décrypté à moins de créer une nouvelle variable de session et de stocker le mot de passe dans le fichier authentication.php .
7. Création du script de déconnexion
La création du script de déconnexion est simple. Tout ce que vous avez à faire est de détruire les sessions qui ont été déclarées dans le fichier d'authentification.
Modifiez le fichier logout.php et ajoutez le code suivant :
<?php
session_start();
session_destroy();
// Redirect to the login page:
header('Location: index.html');
?>Initialisez les sessions, détruisez-les et redirigez l'utilisateur vers la page de connexion. Nous utilisons des sessions pour déterminer si l'utilisateur est connecté ou non, donc en les supprimant, l'utilisateur ne sera pas connecté.
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 d'utiliser le code source et de l'incorporer dans vos propres projets.
La prochaine étape consiste à créer un système d'inscription qui permettra aux visiteurs de s'inscrire.
N'oubliez pas de nous suivre et de partager l'article car il nous aidera à créer de futurs tutoriels et à mettre à jour le contenu existant avec de nouvelles fonctionnalités.