[Link]
com/courses/concevez-votre-site-web-
avec-php-et-mysql/tp-creer-un-espace-membres
TP : créer un espace membres
Afin de créer un espace communautaire sur leur site web, la plupart des
webmasters ont recours à un système de gestion des membres. Cela leur
permet de fidéliser leurs visiteurs, qui peuvent alors participer plus
facilement à la vie du site.
Cela vous intéresse ? Construire son espace membres ne s'improvise pas,
il y a un certain nombre d'éléments à connaître. Nous allons découvrir
tout ce qu'il faut savoir à ce sujet au cours de ce TP.
Ce TP sera légèrement différent de ceux que vous avez lus jusqu'ici : en
effet, nous allons concevoir ensemble et pas à pas l'espace membres.
Plutôt que de nous concentrer sur le code source proprement dit, je vous
présenterai la méthode, ce qu'il faut savoir, mais je ne vous donnerai pas
de code PHP « prêt à l'emploi ». Ça n'aurait pas de sens : à ce stade,
vous avez le niveau pour écrire vous-mêmes le code à l'aide du canevas
que je vais vous proposer. )
Conception de l'espace membres
Quelles sont les 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 ? Cela nous permettra aussi de
définir ce que nous souhaitons éviter d'avoir à concevoir, au moins dans
un premier temps.
Vous êtes probablement habitués aux espaces membres sur d'autres sites.
Qui n'a jamais créé un compte sur un site web ? Sur Twitter ou
Facebook ? Vous avez forcément déjà vu un espace membres, même si
le site web ne l'appelle pas exactement comme cela. Vous devriez donc
savoir qu'un espace membres nécessite au minimum les éléments
suivants :
une page d'inscription ;
une page de connexion ;
une page de déconnexion.
On peut ensuite ajouter d'autres pages, par exemple pour afficher et
modifier son profil de membre. Cependant, il faut au minimum avoir
créé les pages que je viens de mentionner. La figure suivante devrait
vous permettre d'avoir une bonne vue d'ensemble des étapes de la vie
d'un membre, de son inscription à sa connexion et sa participation au
site.
Les étapes de la vie d'un membre
Une fois cette base prête, il sera ensuite possible de créer tout l'espace
participatif de votre site qui reposera sur les membres : les forums, les
commentaires des actualités, etc. Elles sont représentées en pointillés sur
la figure suivante. Nous utiliserons le numéro du membre (son « id »)
pour lier ses messages à son compte, à l'aide des jointures SQL que vous
connaissez bien maintenant.
Pour commencer, nous allons créer la table MySQL qui stockera les
membres de notre site. C'est la première étape qui nous permettra ensuite
d'aller plus loin et d'étudier la création des principales pages dont nous
avons parlé : inscription, connexion et déconnexion.
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.
Bien entendu, on pourrait ajouter d'autres champs, comme sa signature,
sa date de naissance ou son adresse de messagerie instantanée. Nous
allons cependant faire simple pour commencer, sachant qu'il est toujours
possible d'ajouter des champs à la table par la suite comme nous l'avons
appris.
Je vous propose donc de créer une table nommée membres avec les
champs suivants :
id (int, 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.
Les champs de la table membres
Si vous souhaitez que vos membres appartiennent à des groupes
différents, il pourrait être intéressant de créer une table groupes listant
tous les groupes (membre, administrateur, modérateur…). Vous
ajouteriez à la table des membres un champ nommé id_groupe qui
stockerait le numéro du groupe, ce qui vous permettrait de faire une
jointure entre les deux tables comme nous l'avons fait avec les jeux
vidéo et leurs propriétaires plus tôt dans le cours.
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 devriez pas stocker les mots de passe de vos
visiteurs 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 !
Pourtant, je dois bien stocker le mot de passe de mes membres si je veux
pouvoir par la suite m'assurer que ce sont les bonnes personnes ! C'est
un problème impossible à résoudre !
C'est ce que vous croyez, et pourtant la solution existe : elle s'appelle
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 fonction de hachage rend le mot de passe illisible
Pour hacher un mot de passe, il existe plusieurs fonctions qui se basent
sur des algorithmes différents. Je vous conseille d'utiliser sha1 sur vos
sites web.
Il existe d'autres fonctions ayant le même rôle, notamment md5 qui est
très connue. Cependant, cette fonction de hachage n'est plus considérée
comme sûre aujourd'hui et il est fortement recommandé d'utiliser sha1.
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 sha1. 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.
Réalisation des pages principales de l'espace membres
Nous avons déterminé un peu plus tôt la liste des pages dont nous avons
besoin au minimum pour gérer nos membres :
inscription ;
connexion ;
déconnexion.
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 est en général constituée 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.
Certains sites ne demandent pas de pseudonyme et utilisent l'adresse e-
mail comme identifiant. C'est une possibilité, notamment sur les sites
d'e-commerce, mais si vos membres seront amenés à poster des
messages sur des forums, il est préférable qu'ils s'inscrivent avec un
pseudonyme.
La figure suivante présente un formulaire basique d'inscription.
Un formulaire d'inscription
Le champ du mot de passe est de type password afin d'empêcher la
lecture du mot de passe à l'écran par une autre personne. C'est pour cela
qu'il est fortement recommandé de demander de saisir à nouveau le mot
de passe au cas où le visiteur ait fait une faute de frappe qu'il n'aurait pas
pu voir.
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. Comme je vous le disais plus tôt, il est très fortement
conseillé de hacher le mot de passe avant de le stocker, afin qu'il ne soit
plus « lisible ».
Voici dans les grandes lignes à quoi pourrait ressembler le code qui
insère un nouveau membre dans la base :
<?php
// Vérification de la validité des informations
// Hachage du mot de passe
$pass_hache = sha1($_POST['pass']);
// Insertion
$req = $bdd->prepare('INSERT INTO
membres(pseudo, pass, email, date_inscription)
VALUES(:pseudo, :pass, :email, CURDATE())');
$req->execute(array(
'pseudo' => $pseudo,
'pass' => $pass_hache,
'email' => $email));
Ce code est un simple canevas qui illustre les principales étapes de la
création d'un membre. C'est à vous de le compléter. De plus, je vous
invite à respecter l'architecture MVC : vous utiliserez le contrôleur pour
vérifier la validité des informations et pour hacher le mot de passe,
tandis que le modèle se chargera simplement d'exécuter la requête.
On vérifie d'abord la validité des informations comme je vous en ai parlé
plus haut, ensuite on hache le mot de passe et enfin on peut insérer le
membre dans la base. Sous phpMyAdmin, on voit donc apparaître le
membre comme sur la figure suivante.
Un membre ajouté dans la base de données
Son mot de passe haché n'est pas lisible et cela nous assure qu'on ne peut
pas le « voler ». Notez que, pour augmenter la sécurité, on peut « saler »
le mot de passe. Cela consiste à lui ajouter un préfixe avant de le hacher
afin de rajouter une certaine complexité : $pass_hache =
sha1('gz' . $_POST['pass']);.
Nous verrons lors de l'étape de connexion comment vérifier si le
membre entre bien le bon mot de passe.
On pourrait ajouter d'autres étapes pour renforcer la sécurité de
l'inscription. En particulier, renseignez-vous sur les systèmes de Captcha
qui demandent au visiteur de recopier un mot issu d'une image afin de
vérifier qu'il ne s'agit pas d'un robot. D'autre part, vous pourriez
demander une confirmation par e-mail afin de vérifier que l'adresse est
correcte.
La page de connexion
Maintenant que le membre est 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).
Un formulaire de connexion
La page qui reçoit les données du formulaire de connexion doit hacher
de nouveau le mot de passe et le comparer à celui stocké dans la base.
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.
<?php
// Hachage du mot de passe
$pass_hache = sha1($_POST['pass']);
// Vérification des identifiants
$req = $bdd->prepare('SELECT id FROM membres
WHERE pseudo = :pseudo AND pass = :pass');
$req->execute(array(
'pseudo' => $pseudo,
'pass' => $pass_hache));
$resultat = $req->fetch();
if (!$resultat)
{
echo 'Mauvais identifiant ou mot de
passe !';
}
else
{
session_start();
$_SESSION['id'] = $resultat['id'];
$_SESSION['pseudo'] = $pseudo;
echo 'Vous êtes connecté !';
}
Après avoir de nouveau haché le mot de passe, on essaie de récupérer
une entrée dans la table membres qui corresponde à ce pseudonyme et
ce mot de passe haché. Si $resultat vaut faux, cela signifie
qu'aucune entrée ne correspond et donc que l'identifiant ou le mot de
passe est mauvais. Sinon, on peut créer les variables de session et y
stocker par exemple l'id et le pseudonyme du membre. Désormais, sur
toutes les pages du site, on pourra indiquer au membre qu'il est connecté
grâce à la présence des variables $_SESSION.
<?php
if (isset($_SESSION['id']) AND
isset($_SESSION['pseudo']))
{
echo 'Bonjour ' . $_SESSION['pseudo'];
}
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.
Sachez par ailleurs que de nouvelles méthodes de connexion centralisées
apparaissent depuis quelque temps. Elles ont pour nom OpenID,
Facebook Connect, Windows Live ID, etc. En effectuant quelques
manipulations supplémentaires, vous pouvez permettre à vos visiteurs de
se connecter à votre site en saisissant leurs identifiants Facebook,
Windows Live, Twitter ou encore Google, ce qui leur évite d'avoir à
fournir un mot de passe spécialement pour votre site.
Le système RPX est devenu très populaire car il vous permet de mettre
en place rapidement ces moyens de connexion sur votre site (figure
suivante). Il suffit seulement d'ajouter un champ à votre
table membres et d'installer un petit script. Renseignez-vous sur le site
web de RPX si vous souhaitez par la suite vous en servir pour améliorer
votre espace membres.
RPX permet de se connecter à
votre site avec un autre compte
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
fameux 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.
<?php
session_start();
// Suppression des variables de session et de la
session
$_SESSION = array();
session_destroy();
// Suppression des cookies de connexion
automatique
setcookie('login', '');
setcookie('pass_hache', '');
Aller plus loin
Nous avons vu ensemble comment mettre en place les bases
d'un système de gestion des membres. Bien entendu, nous avons
fait le minimum et c'est maintenant à vous de jouer pour améliorer
ce script comme bon vous semble. :-)
Voici quelques pistes pour compléter votre espace membres.
Proposez au membre d'envoyer un avatar. Vous avez appris
à envoyer des fichiers via des formulaires et à
redimensionner des images avec la bibliothèque GD, vous
en êtes donc tout à fait capables ! Bien qu'il existe plusieurs
méthodes, la plus simple consiste à créer un
dossier avatars et à y placer les avatars nommés en
fonction des id des membres : [Link], [Link], [Link], etc.
Mettez en place une page de profil de présentation des
membres. Vous pouvez y afficher toutes sortes
d'informations, comme son e-mail (mais il vaut mieux lui
demander son accord auparavant), son adresse de
messagerie instantanée, sa date de naissance, ses
passions, son travail, le nom de la ville où il habite, etc.
Toutes ces informations pourront être stockées dans de
nouveaux champs de la table membres.
Proposez au membre s'il le souhaite de changer
ses identifiants : son pseudonyme et son mot de passe. Il
est courant qu'un membre désire changer de pseudonyme
quelque temps après s'être inscrit, mais surtout il est vital
qu'il puisse changer son mot de passe à tout moment au cas
où celui-là serait compromis ! Même si le membre est déjà
connecté, je vous conseille de lui demander à nouveau son
mot de passe actuel avant de l'autoriser à en changer, par
mesure de sécurité.
Donnez au membre la possibilité de choisir parmi
plusieurs options de navigation. Tout le monde n'utilise
pas votre site web de la même manière, peut-être que
certains souhaiteraient avoir un menu en haut des pages
plutôt qu'un autre, peut-être que d'autres préfèreraient
naviguer avec un design sombre, etc.