TP Espace Membre

Solution codée en cours

Ceci est une version provisoire

Environnement de développement

Pour cet exercice, vous allez publier vos pages dans le contexte suivant.

Chacun d’entre vous disposera d’un répertoire web dédié. Vous devrez donc utiliser le répertoire qui porte votre prénom, sans accent.

Depuis vos scripts :

• Hôte : localhost
• Utilisateur : ecvb2
• Mot de passe : DBecvb2!!
• Nom de la base de données : ecv_b2_2023_[prenom]_[nom]

URL

Pour voir votre site, vous pouvez passer par cette page d’index :
https://b2.binr.fr/

Vous pouvez accèderez à votre site dans un navigateur directement grâce à l’URL :
https://b2.binr.fr/[prenom]/

Fonctionnalités d’un espace membres

C’est la première question que nous devons nous poser : qu’est-ce que nous souhaitons faire concrètement ?

Vous êtes probablement habitués aux espaces membres sur d’autres sites.

Côté base de données

Pour commencer, nous allons créer la table MySQL qui stockera les membres de notre site.

La table des membres

Qu’est-ce qui caractérise un membre ? Essayons de voir ce que nous avons besoin de stocker au minimum pour créer la table :

• un pseudonyme,
• un mot de passe,
• une adresse e-mail,
• une date d’inscription.

Je vous propose donc de créer une table nommée membres avec les champs suivants :

• id (int 11, primary, auto_increment) ;
• pseudo (varchar 255) ;
• pass (varchar 255) ;
• email (varchar 255) ;
• date_inscription (date).

Ces champs sont résumés sur la figure suivante qui présente la table une fois créée sous phpMyAdmin.

La problématique du mot de passe

Un de ces champs mérite une attention particulière : celui qui stocke le mot de passe. En effet, lorsqu’ils s’inscriront, vos visiteurs enverront en toute confiance un mot de passe à votre site.
Il est très probable qu’ils utilisent le même mot de passe sur de nombreux autres sites. Bien que ce soit une très mauvaise habitude en matière de sécurité (idéalement, il faudrait utiliser un mot de passe différent par site), ce cas de figure est hélas extrêmement fréquent.

Sachant cela, vous avez une certaine obligation morale et éthique en tant que webmasters : vous ne devez pas stocker les mots de passe de vos visiteurs en clair dans la base. Si celle-ci tombait entre de mauvaises mains (cela pourrait arriver dans un cas critique, comme le piratage de votre site, ce que je ne vous souhaite pas), une personne aurait accès à tous les mots de passe de vos membres et pourrait s’en servir pour voler leurs comptes sur d’autres sites !

La solution sera d’utiliser le hachage. C’est une fonction qui transforme n’importe quel texte en un nombre hexadécimal qui représente le mot de passe mais qui est illisible, comme le montre la figure suivante.

La particularité du hachage est qu’il fonctionne dans un seul sens : il est impossible de retrouver le mot de passe d’origine une fois qu’il a été haché. De plus, un hash (nom donné à la version hachée du mot de passe) est unique : il correspond à un et un seul mot de passe.

Vous stockerez la version hachée du mot de passe, qui sera donc passé à la moulinette par la fonction password_hash. Lorsqu’un visiteur voudra se connecter, il vous enverra son mot de passe que vous hacherez à nouveau et que vous comparerez avec celui stocké dans la base de données. Si les deux mots de passe hachés sont identiques, alors cela signifie que le visiteur a rentré le même mot de passe que lors de son inscription.

Les pages

Nous n’allons pas écrire le code de ces pages mais nous allons passer en revue ce qu’il faut savoir pour les réaliser correctement.

La page d’inscription

La page d’inscription sera un formulaire constitué de quatre champs :

• pseudonyme souhaité ;
• mot de passe ;
• confirmation du mot de passe (pour éviter les erreurs de saisie) ;
• adresse e-mail.

Il est recommandé de limiter autant que possible le nombre d’informations demandées. Le visiteur souhaite pouvoir s’inscrire très rapidement. S’il tombe sur une page avec de nombreux champs à remplir, il y a de fortes chances qu’il laisse tomber. Laissez-le remplir les autres champs (comme sa signature, sa messagerie instantanée et sa date de naissance) dans un second temps, lorsqu’il sera inscrit.

Avant d’enregistrer l’utilisateur dans la base de données, il faudra penser à faire un certain nombre de vérifications.

• Le pseudonyme demandé par le visiteur est-il libre ? S’il est déjà présent en base de données, il faudra demander au visiteur d’en choisir un autre.
• Les deux mots de passe saisis sont-ils identiques ? S’il y a une erreur, il faut inviter le visiteur à rentrer à nouveau le mot de passe.
• L’adresse e-mail a-t-elle une forme valide ? Vous pouvez utiliser une expression régulière pour le vérifier.

Si toutes ces conditions sont remplies, on peut insérer l’utilisateur dans la base de données.

Dans l’idéal, on passerais par une étape supplémentaire : la confirmation par email de la création du compte .

La page de connexion

Une fois le membre créé, il doit pouvoir se connecter sur votre site. Pour cela, nous utiliserons le système de sessions qui est mis à notre disposition par PHP et que nous avons appris à utiliser plus tôt dans ce cours.

Habituellement, on demande au moins le pseudonyme (ou login) et le mot de passe du membre. Pour lui faciliter la vie, on peut lui proposer une option de connexion automatique qui lui évitera d’avoir à se connecter de nouveau à chaque visite du site (figure suivante).

La page qui reçoit les données du formulaire de connexion doit vérifier le mot de passe en le comparant à celui stocké dans la base avec la fonction  password_verify  . Cette fonction va en fait hasher le mot de passe de l’utilisateur qui vient de se connecter et le comparer à celui qui était stocké en base de données.

S’il existe un membre qui a le même pseudonyme et le même mot de passe haché, alors on autorise la connexion et on peut créer les variables de session. Sinon, on renvoie une erreur indiquant que le pseudonyme ou le mot de passe est invalide.

Désormais, sur toutes les pages du site, on pourra vérifier que l’utilisateur est connecté grâce à la présence des variables $_SESSION.

Si le membre souhaite être reconnecté automatiquement (ce qu’il est conseillé de faire uniquement sur un ordinateur personnel, et non sur un ordinateur partagé avec d’autres personnes !), je vous invite à créer deux cookies qui stockeront respectivement :

• le pseudonyme ;
• le mot de passe haché.

Ainsi, si un visiteur non connecté qui possède ces deux cookies se présente, vous n’aurez qu’à vérifier si un membre correspond à ces informations en base de données et vous pourrez le connecter automatiquement, sans qu’il ait eu à utiliser le formulaire de connexion. Là encore, on prend une certaine mesure de sécurité en stockant le mot de passe haché dans un cookie et non le vrai mot de passe.

La page de déconnexion

Au bout d’un certain temps d’inactivité, la session du membre est automatiquement détruite et il se retrouve déconnecté. S’il charge à nouveau une page du site, il apparaîtra donc déconnecté, à moins qu’il ait activé la connexion automatique qui aura pour effet de le reconnecter immédiatement et de manière transparente grâce à ses cookies.

Si la déconnexion est automatique au bout d’un certain temps (le timeout), il faut quand même proposer un lien de déconnexion. La page de déconnexion devra supprimer le contenu de $_SESSION, mettre fin au système de sessions (en appelant session_destroy()) et supprimer les cookies de connexion automatique s’ils existent.