• 8 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

Ce cours existe en livre papier.

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 22/10/2021

Implémentez un système de connexion

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Croyez-le ou non, vous avez déjà le niveau pour protéger le contenu d'une page par mot de passe ! C'est ce que je vais vous apprendre à faire dans ce chapitre.

Voici la liste des connaissances que vous allez devoir mobiliser pour cela :

  • afficher du texte avec echo ;

  • utiliser les variables  ;

  • transmettre des variables via une zone de texte d'un formulaire ;

  • utiliser des conditions simples ( if , else  ) ;

  • utiliser les inclusions de fichiers avec include ou include_once .

Si l'un de ces points est un peu flou pour vous (vous avez peut-être oublié), n'hésitez pas à relire le chapitre correspondant.

Le but est de parvenir à assembler toutes vos connaissances pour répondre à un problème précis.

Protégez le contenu d'une page par un mot de passe

Vous voulez que les contributeurs et contributrices de recettes puissent se connecter sur votre site et être reconnus.

Pour faire simple, il y aura un formulaire de connexion avec e-mail et mot de passe et une fois la personne connectée, nous afficherons un message du type :

"Bonjour utilisateur@exemple.com et bienvenue sur le site !"

Et nous rajoutons une contrainte : la liste des recettes ne sera affichée que si l'utilisateur est connecté !

Les utilisateurs seront déjà disponibles sous forme d'un tableau associatif PHP. Ils ont :

  1. Une clé 'password' avec un mot de passe.

  2. Et une clé 'email' avec leur e-mail.

Travaillez d'abord au brouillon

Pour coder correctement, je recommande toujours de travailler d'abord au brouillon (vous savez, avec un stylo et une feuille de papier !). Ça peut bien souvent paraître une perte de temps, mais c'est tout à fait le contraire.

À quoi doit-on réfléchir sur notre brouillon ?

  1. Au problème que vous vous posez (qu'est-ce que je veux arriver à faire ?).

  2. Au schéma du code, c'est-à-dire que vous allez commencer à le découper en plusieurs morceaux, eux-mêmes découpés en petits morceaux (c'est plus facile à avaler).

  3. Aux fonctions et aux connaissances en PHP dont vous allez avoir besoin (pour être sûr que vous les utilisez convenablement).

Et pour montrer l'exemple, nous allons suivre cette liste.

1. Posez le problème

On doit soumettre un e-mail et un mot de passe dans un formulaire de connexion.

Si le formulaire est valide, nous affichons un message de succès, et sinon un message d'erreur. La liste de recettes n'est affichée qu'à un utilisateur qui s'est connecté avec succès.

2. Schématisez le code

Pour que l'utilisateur puisse entrer le mot de passe, le plus simple est de créer un formulaire. Celui-ci sera directement intégré dans la page d'accueil du site telle que nous la connaissons déjà.

Trois situations peuvent survenir :

  1. Vous n'êtes pas connecté : auquel cas, le formulaire de contact s'affiche, et la liste des recettes ne s'affiche pas.

  2. Vous avez soumis le formulaire avec le bon mot de passe pour l'utilisateur : le message de succès s'affiche, le formulaire de connexion ne s'affiche pas et les recettes s'affichent.

  3. Vous avez soumis le formulaire avec le mauvais mot de passe pour l'utilisateur : le message d'erreur s'affiche, le formulaire de connexion s'affiche et les recettes ne s'affichent pas.

Vous devez donc créer une nouvelle page et adapter la page d'accueil :

  • login.php : contient un simple formulaire comme vous savez les faire ;

  • home.php : qui doit maintenant inclure une formulaire de connexion et une condition sur l'affichage des recettes.

3. Mobilisez les connaissances requises

Nous avons détaillé les connaissances requises au début de ce chapitre. Vous allez voir que ce n'est qu'une simple application pratique de ce que vous connaissez déjà, mais cela sera une bonne occasion de vous entraîner.

Bon ! On a préparé le terrain ensemble ; maintenant, vous savez tout ce qu'il faut pour réaliser le script !

Vous êtes normalement capable de trouver le code à écrire par vous-même, et c'est ce que je vous invite à faire. Ça ne marchera peut-être pas du premier coup, mais ne vous en faites pas : c'est le métier qui rentre !

Au secours, je n'y arrive pas, comment on fait ?

Pas de panique ! Voyons tout cela ensemble.

Comme vous le savez, il y a deux pages à créer :

  1. La page login.php.

  2. La page home.php.

Codez la page login.php

Commençons par la plus simple, login.php :

<?php
// Validation du formulaire
if (isset($_POST['email']) && isset($_POST['password'])) {
foreach ($users as $user) {
if (
$user['email'] === $_POST['email'] &&
$user['password'] === $_POST['password']
) {
$loggedUser = [
'email' => $user['email'],
];
} else {
$errorMessage = sprintf('Les informations envoyées ne permettent pas de vous identifier : (%s/%s)',
$_POST['email'],
$_POST['password']
);
}
}
}
?>
<!--
Si utilisateur/trice est non identifié(e), on affiche le formulaire
-->
<?php if(!isset($loggedUser)): ?>
<form action="home.php" method="post">
<!-- si message d'erreur on l'affiche -->
<?php if(isset($errorMessage)) : ?>
<div class="alert alert-danger" role="alert">
<?php echo $errorMessage; ?>
</div>
<?php endif; ?>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" name="email" aria-describedby="email-help" placeholder="you@exemple.com">
<div id="email-help" class="form-text">L'email utilisé lors de la création de compte.</div>
</div>
<div class="mb-3">
<label for="password" class="form-label">Mot de passe</label>
<input type="password" class="form-control" id="password" name="password">
</div>
<button type="submit" class="btn btn-primary">Envoyer</button>
</form>
<!--
Si utilisateur/trice bien connectée on affiche un message de succès
-->
<?php else: ?>
<div class="alert alert-success" role="alert">
Bonjour <?php echo $loggedUser['email']; ?> et bienvenue sur le site !
</div>
<?php endif; ?>

J'ai choisi un champ de type password puisqu'il s'agit d'un mot de passe. À part ça, rien de bien particulier.

Codez la page home.php

Maintenant, intéressons-nous à la page home.php qui va inclure le formulaire et limiter l'accès aux recettes :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site de Recettes - Page d'accueil</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
>
</head>
<body class="d-flex flex-column min-vh-100">
<div class="container">
<!-- Navigation -->
<?php include_once('header.php'); ?>
<!-- Inclusion du formulaire de connexion -->
<?php include_once('login.php'); ?>
<h1>Site de Recettes !</h1>
<!-- Si l'utilisateur existe, on affiche les recettes -->
<?php if(isset($loggedUser)): ?>
<?php foreach(get_recipes($recipes, $limit) as $recipe) : ?>
<article>
<h3><?php echo $recipe['title']; ?></h3>
<div><?php echo $recipe['recipe']; ?></div>
<i><?php echo display_author($recipe['author'], $users); ?></i>
</article>
<?php endforeach ?>
<?php endif; ?>
</div>
<?php include_once('footer.php'); ?>
</body>
</html>

Pour le résultat suivant :

Capture d'écran du formulaire de connexion : il permet d'identifier et d'autoriser les utilisateurs à faire des actions sur le site
Formulaire de connexion

Mais est-ce que le formulaire est si sécurisé que ça ?

Oui, honnêtement il l'est. Du moins, tant que vos utilisateurs ne choisissent pas de mots de passe trop simples à deviner !

Allez plus loin

Pour l'instant ce système de connexion n'est pas "persistant". C'est-à-dire que si vous rechargez la page d'accueil ou que vous revenez sur votre site plus tard, l'information de la connexion n'aura pas été conservée.

Pas super utile du coup ! Comment on fait pour conserver les informations de connexion d'un utilisateur ?

Eh bien, ce sera l'objet des prochains chapitres !

En résumé

  • Il est recommandé de passer des informations en POST lorsqu'on conçoit un formulaire de connexion.

  • Soit l'utilisateur est identifiable, c'est-à-dire que l'on retrouve une correspondance avec les identifiants fournis ; auquel cas, on autorise l'affichage du contenu.

  • Soit l'utilisateur n'est pas identifiable : alors, on affichera un message d'erreur !

Dans le prochain chapitre, nous allons voir comment conserver les données grâce aux sessions et aux cookies. À tout de suite !

Exemple de certificat de réussite
Exemple de certificat de réussite