Système d'inscription sécurisé avec PHP et MySQL

Author - freetemplatezone
February 12, 2022
2

Système d'enregistrement sécurisé avec PHP et MySQL




 Ce didacticiel fait suite à notre précédent didacticiel Système de connexion sécurisée avec PHP et MySQL . Dans ce didacticiel, nous allons créer un formulaire d'inscription sécurisé et implémenter une validation de base.

Un formulaire d'inscription est ce que les visiteurs de votre site Web peuvent utiliser pour enregistrer leurs coordonnées, qui seront ensuite stockées dans une base de données MySQL.


Contenu

  1. Commencer
    1. Exigences
    2. Ce que vous apprendrez dans ce tutoriel
    3. Structure et configuration des fichiers
  2. Création de la conception du formulaire d'inscription
  3. Création de la base de données et configuration des tables
  4. Enregistrement d'utilisateurs avec PHP et MySQL
  5. Validation des données de formulaire
  6. Mise en œuvre de l'activation de compte

1. Mise en route

Nous devons suivre quelques étapes avant de créer notre système d'inscription sécurisé. Nous devons configurer notre environnement de serveur Web et nous assurer que les extensions requises sont activées (ignorer si vous avez suivi le didacticiel du système de connexion sécurisée) .

1.1. Exigences

  • Si vous n'avez pas configuré de serveur Web local, vous devrez télécharger et installer XAMPP . XAMPP est un environnement de développement Web côté serveur qui comprend l'essentiel pour les développeurs Web back-end.

1.2. Ce que vous apprendrez dans ce tutoriel

  • Conception de formulaire — Concevez un formulaire d'inscription avec HTML5 et CSS3.
  • Requêtes SQL préparées — Comment préparer les requêtes SQL pour empêcher l'injection SQL et insérer de nouveaux enregistrements dans une base de données MySQL.
  • Validation de base — Validation des données de formulaire envoyées au serveur (nom d'utilisateur, mot de passe et e-mail).

1.3. Structure et configuration des fichiers

Nous devons maintenant démarrer notre serveur Web et créer les fichiers et répertoires que nous allons utiliser pour notre système d'enregistrement.

  • 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 dossier d'installation de XAMPP ( C:\xampp )
  • Ouvrez le dossier htdocs
  • Créez les dossiers et fichiers suivants :

Structure du fichier

\-- phplogin
    |-- register.html
    |-- style.css
    |-- register.php
    |-- activate.php (facultatif)

Chaque fichier contiendra les éléments suivants :

  • register.html — Formulaire d'inscription créé avec HTML5 et CSS3. Comme ce fichier ne nous oblige pas à utiliser PHP, nous l'enregistrerons en HTML brut.
  • style.css — La feuille de style (CSS3) pour notre formulaire d'inscription sécurisé.
  • register.php — Valide les données du formulaire et insère un nouveau compte dans la base de données MySQL.
  • activate.php — Activez le compte de l'utilisateur avec un code unique (activation par e-mail).

2. Création de la conception du formulaire d'inscription

Le formulaire d'inscription sera utilisé par les visiteurs de nos sites Web. Ils peuvent l'utiliser pour saisir les informations de leur compte. Nous allons créer le formulaire d'inscription avec HTML et CSS.

Modifiez le fichier register.html et ajoutez le code suivant :

HTMLCopie
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Register</title>
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
	</head>
	<body>
		<div class="register">
			<h1>Register</h1>
			<form action="register.php" method="post" autocomplete="off">
				<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>
				<label for="email">
					<i class="fas fa-envelope"></i>
				</label>
				<input type="email" name="email" placeholder="Email" id="email" required>
				<input type="submit" value="Register">
			</form>
		</div>
	</body>
</html>

Accédez à http://localhost/phplogin/register.html , notre formulaire d'inscription ressemblera à ceci :

http://localhost/phplogin/register.html
Disposition de base du formulaire d'inscription HTML

Assez basique pour un formulaire d'inscription, ajoutons maintenant du CSS, éditons le fichier style.css et ajoutons ce qui suit :

CSSCopie
* {
  	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;
  	margin: 0;
}
.register {
  	width: 400px;
  	background-color: #ffffff;
  	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
  	margin: 100px auto;
}
.register h1 {
  	text-align: center;
  	color: #5b6574;
  	font-size: 24px;
  	padding: 20px 0 20px 0;
  	border-bottom: 1px solid #dee0e4;
}
.register form {
  	display: flex;
  	flex-wrap: wrap;
  	justify-content: center;
  	padding-top: 20px;
}
.register form label {
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	width: 50px;
 	height: 50px;
  	background-color: #3274d6;
  	color: #ffffff;
}
.register form input[type="password"], .register form input[type="text"], .register form input[type="email"] {
  	width: 310px;
  	height: 50px;
  	border: 1px solid #dee0e4;
  	margin-bottom: 20px;
  	padding: 0 15px;
}
.register 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;
}
.register form input[type="submit"]:hover {
	background-color: #2868c7;
  	transition: background-color 0.2s;
}

Nous devons inclure notre feuille de style dans notre fichier register.html , copier et coller le code suivant dans la section head :

HTMLCopie
<link href="style.css" rel="stylesheet" type="text/css">

Et maintenant, notre formulaire d'inscription sera plus attrayant :

http://localhost/phplogin/register.html
Superbe mise en page du formulaire d'inscription HTML

Affinons le formulaire afin que nous puissions mieux comprendre ce qui se passe.

  • Formulaire - nous devons utiliser à la fois leactionetPostattributs, lesactionsera défini sur le fichier d'enregistrement. Lorsque le formulaire est soumis, les données du formulaire seront envoyées au fichier d'inscription pour traitement. lemethodeest depost, cela nous permettra de traiter les données du formulaire.
    • Entrée (texte/mot de passe/e-mail) — Nous devons nommer nos champs de formulaire afin que le serveur puisse les reconnaître, donc si nous définissons la valeur de l'attributnameà lausername, nous pouvons utiliser la variable post dans notre fichier d'enregistrement pour obtenir les données, comme ceci :$_POST['username'].
    • Entrée (soumettre) — Au clic, les données du formulaire seront envoyées à notre fichier d'inscription.

C'est essentiellement tout ce que nous devons faire côté client, la prochaine étape consiste à configurer la base de données et à créer le fichier d'enregistrement avec PHP.

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.

Si vous utilisez phpMyAdmin , suivez ces instructions :

  • Accédez à : http://localhost/phpmyadmin/
  • Cliquez sur l' onglet Bases de données en haut
  • Sous Créer une base de données , tapez 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 qui stockera tous nos comptes (noms d'utilisateur, mots de passe, e-mails, etc.).

Cliquez sur la base de données dans le panneau de gauche ( phplogin ) et exécutez l'instruction SQL suivante :

SQLCopie
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;

Sur phpMyAdmin , cela devrait ressembler à :

http://localhost/phpmyadmin/
Tableau des comptes phpMyAdmin

Le code d'instruction SQL ci-dessus créera la table des comptes avec les colonnesid,username,password, etemail.

4. Enregistrement d'utilisateurs avec PHP et MySQL

Nous devons maintenant créer le fichier d'inscription qui traitera les champs du formulaire, vérifier la validation de base et insérer le nouveau compte dans notre base de données.

La page d'inscription nécessitera une connexion à notre base de données et nous devons donc inclure les variables et les fonctions MySQL nécessaires. Modifiez le fichier register.php et ajoutez le code suivant :

PHPCopie
<?php
// 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());
}

N'oubliez pas de mettre à jour les variables MySQL si vos informations d'identification MySQL ne reflètent pas les valeurs déclarées.

Ensuite, nous pouvons ajouter une validation de base pour nous assurer que l'utilisateur a saisi ses coordonnées et vérifier les variables vides.

PHPCopie
// Now we check if the data was submitted, isset() function will check if the data exists.
if (!isset($_POST['username'], $_POST['password'], $_POST['email'])) {
	// Could not get the data that should have been sent.
	exit('Please complete the registration form!');
}
// Make sure the submitted registration values are not empty.
if (empty($_POST['username']) || empty($_POST['password']) || empty($_POST['email'])) {
	// One or more values are empty.
	exit('Please complete the registration form');
}

Nous devons maintenant vérifier si le compte existe déjà dans la base de données. Nous pouvons vérifier cela en sélectionnant un enregistrement de notre table de comptes avec le mêmeusernameque l'utilisateur a fourni.

Ajouter après :

PHPCopie
// We need to check if the account with that username exists.
if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {
	// Bind parameters (s = string, i = int, b = blob, etc), hash the password using the PHP password_hash function.
	$stmt->bind_param('s', $_POST['username']);
	$stmt->execute();
	$stmt->store_result();
	// Store the result so we can check if the account exists in the database.
	if ($stmt->num_rows > 0) {
		// Username already exists
		echo 'Username exists, please choose another!';
	} else {
		// Insert new account
	}
	$stmt->close();
} else {
	// Something is wrong with the sql statement, check to make sure accounts table exists with all 3 fields.
	echo 'Could not prepare statement!';
}
$con->close();
?>

Remplacer:

// Insert new account

Avec:

PHPCopie
// Username doesnt exists, insert new account
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email) VALUES (?, ?, ?)')) {
	// We do not want to expose passwords in our database, so hash the password and use password_verify when a user logs in.
	$password = password_hash($_POST['password'], PASSWORD_DEFAULT);
	$stmt->bind_param('sss', $_POST['username'], $password, $_POST['email']);
	$stmt->execute();
	echo 'You have successfully registered, you can now login!';
} else {
	// Something is wrong with the sql statement, check to make sure accounts table exists with all 3 fields.
	echo 'Could not prepare statement!';
}

Cela va insérer un nouveau compte dans notre table de comptes.

N'oubliez pas que dans notre système de connexion, nous avons utilisé lepassword_verifyune fonction? Comme vous pouvez le voir dans le code ci-dessus, nous utilisons lepassword_hashfonction, cela cryptera le mot de passe de l'utilisateur à l'aide de l'algorithme à sens unique - cela empêchera les mots de passe de vos utilisateurs d'être exposés si, pour une raison quelconque, votre base de données devient vulnérable.

C'est essentiellement tout ce que nous devons faire pour enregistrer des comptes sur notre site Web.

5. Validation des données du formulaire

Nous avons déjà une validation de base dans notre script PHP, mais que se passe-t-il si nous voulons vérifier si l'e-mail est réellement un e-mail ou si le nom d'utilisateur et le mot de passe doivent contenir un certain nombre de caractères, vous pouvez le faire avec les codes ci-dessous, ajoutez-les dans laregister.phpfichier avant la ligne suivante :

if ($stmt = $con->prepare('SELECT id, password FROM accounts WHERE username = ?')) {

Validation par e-mail

PHPCopie
if (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
	exit('Email is not valid!');
}

Validation des caractères invalides

PHPCopie
if (preg_match('/^[a-zA-Z0-9]+$/', $_POST['username']) == 0) {
    exit('Username is not valid!');
}

Vérification de la longueur des caractères

PHPCopie
if (strlen($_POST['password']) > 20 || strlen($_POST['password']) < 5) {
	exit('Password must be between 5 and 20 characters long!');
}

Vous devez toujours implémenter votre propre validation, ce ne sont que des exemples de base.

6. Mise en œuvre de l'activation de compte

Le système d'activation de compte enverra un e-mail à l'utilisateur avec le lien d'activation lorsque l'utilisateur s'est enregistré.

La première chose que nous devons faire est d'aller dans phpMyAdmin et de sélectionner notre base de données, dans notre cas ce serait phplogin , vous pouvez soit ajouter la colonneactivation_codeà la table des comptes ou exécutez l'instruction SQL ci-dessous.

SQLCopie
ALTER TABLE accounts ADD activation_code varchar(50) DEFAULT ''

Nous devons maintenant éditer notre fichier register.php , recherchez cette ligne de code :

if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email) VALUES (?, ?, ?)')) {

Remplacer par:

PHPCopie
if ($stmt = $con->prepare('INSERT INTO accounts (username, password, email, activation_code) VALUES (?, ?, ?, ?)')) {

Rechercher:

$stmt->bind_param('sss', $_POST['username'], $password, $_POST['email']);

Remplacer par:

PHPCopie
$uniqid = uniqid();
$stmt->bind_param('ssss', $_POST['username'], $password, $_POST['email'], $uniqid);

le$uniqudgénérera un identifiant unique que nous utiliserons pour notre code d'activation, celui-ci sera envoyé à l'adresse e-mail de l'utilisateur.

Rechercher:

echo 'You have successfully registered, you can now login!';

Remplacer par:

PHPCopie
$from    = 'noreply@yourdomain.com';
$subject = 'Account Activation Required';
$headers = 'From: ' . $from . "\r\n" . 'Reply-To: ' . $from . "\r\n" . 'X-Mailer: PHP/' . phpversion() . "\r\n" . 'MIME-Version: 1.0' . "\r\n" . 'Content-Type: text/html; charset=UTF-8' . "\r\n";
// Update the activation variable below
$activate_link = 'http://yourdomain.com/phplogin/activate.php?email=' . $_POST['email'] . '&code=' . $uniqid;
$message = '<p>Please click the following link to activate your account: <a href="' . $activate_link . '">' . $activate_link . '</a></p>';
mail($_POST['email'], $subject, $message, $headers);
echo 'Please check your email to activate your account!';

Lors de l'enregistrement du compte, l'utilisateur devra activer son compte en utilisant le lien d'activation qui est envoyé à son adresse e-mail. Vous devez mettre à jour à la fois le$fromet$activate_linkvariables.

Nous pouvons maintenant procéder à la création du fichier d'activation. Le fichier d'activation traitera les paramètres GET et vérifiera l'e-mail et le code. Le compte de l'utilisateur sera activé si le code est valide.

Modifiez/créez le fichier activate.php et ajoutez le code suivant :

PHPCopie
<?php
// 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());
}
// First we check if the email and code exists...
if (isset($_GET['email'], $_GET['code'])) {
	if ($stmt = $con->prepare('SELECT * FROM accounts WHERE email = ? AND activation_code = ?')) {
		$stmt->bind_param('ss', $_GET['email'], $_GET['code']);
		$stmt->execute();
		// Store the result so we can check if the account exists in the database.
		$stmt->store_result();
		if ($stmt->num_rows > 0) {
			// Account exists with the requested email and code.
			if ($stmt = $con->prepare('UPDATE accounts SET activation_code = ? WHERE email = ? AND activation_code = ?')) {
				// Set the new activation code to 'activated', this is how we can check if the user has activated their account.
				$newcode = 'activated';
				$stmt->bind_param('sss', $newcode, $_GET['email'], $_GET['code']);
				$stmt->execute();
				echo 'Your account is now activated! You can now <a href="index.html">login</a>!';
			}
		} else {
			echo 'The account is already activated or doesn\'t exist!';
		}
	}
}
?>

Si le code reflète celui de la base de données qui est associé au compte de l'utilisateur, la valeur duactivation_codela colonne sera mise à jour pouractivated.

Si nous voulons vérifier si l'utilisateur a activé son compte, nous pouvons ajouter le code suivant aux pages que nous voulons restreindre les utilisateurs non activés :

PHPCopie
if ($account['activation_code'] == 'activated') {
	// account is activated
	// Display home page etc
} else {
	// account is not activated
	// redirect user or display an error
}

Pour que le code ci-dessus fonctionne, vous devrez vous connecter à votre base de données MySQL et sélectionner le compte de l'utilisateur.

Notez également que la fonction de messagerie PHP ne fonctionnera que si votre ordinateur ou votre serveur la prend en charge. S'il n'envoie pas d'e-mail, vérifiez votre configuration ou installez un serveur de messagerie tel que Postfix .

Conclusion

Toutes nos félicitations! Vous avez créé avec succès un système de connexion (si vous avez suivi le tutoriel précédent) et un système d'enregistrement avec PHP et MySQL. Vous êtes libre d'utiliser le code de ce tutoriel et de l'adapter à vos propres projets.

N'oubliez pas qu'il ne s'agit que d'une base sécurisée à partir de laquelle vous devez travailler. Envisagez de modifier ou d'implémenter votre propre validation, et implémentez vos propres fonctionnalités.

Si vous souhaitez plus de cette série de tutoriels, n'hésitez pas à laisser un commentaire et à nous suggérer ce que nous pourrions créer ensuite.

Profitez du codage !

Tags

You may like these posts

Show more

Post a Comment

2Comments
  1. AnonymousMarch 25, 2023 at 10:35 PM

    merci pour ce tutoriel grâce à vous je parviens à comprendre comment créer une base de donnée avec php et sql

    ReplyDelete
Post a Comment
Share to other apps
Copy Post Link