Nous allons dans cet article voir comment mettre en place un système de compte dans une application Meteor. L’utilisateur pourra donc s’inscrire puis par la suite se connecter et pourquoi pas, avoir accès un espace personnel. Je vous invite, avant de continuer la lecture de vous référer à la formation Meteor si cela n’est pas déjà fait ! Car, je ne reviendrais pas sur les bases de cette technologie.
Bien, de mon côté je vais repartir sur une application “propre” et non pas sur le code que nous avons réalisé précédemment dans cet article. Maintenant que vous avez créé votre nouveau projet (pour rappel avec la commande Meteor create nomDeVotreSite) rendez-vous dedans puis, avec votre invité de commandes exécutées les commandes suivantes pour installer et désinstaller des modules.
meteor remove autopublish
meteor remove insecure
meteor add session
meteor add accounts-passwordNotre projet est donc maintenant configuré correctement. Le module accounts-password, comme son nom l’indique est un module officiel pour l’ajout d’un système de création de compte avec un mot de passe, attaquons donc le vif du sujet, c’est-à-dire le code !
Création d’un compte
La première étape va être très simple, il nous faut avant tout faire un formulaire. Pour des questions pratiques le code HTML et le code JavaScript que j’écrirais sera contenu dans main.html et main.js de l’architecture par défaut d’un projet Meteor. Je vais aussi créer deux templates, mais vous verrez cela dans le code qui va suivre.
Donc, comme j’ai dit précédemment, la première étape consiste à faire un simple formulaire en HTML. En soi rien d’extraordinaire, je ne vais donc pas m’y attarder plus que cela :
<template name="Inscription">
<h2>Inscription</h2>
{{#if error}}
<p style="color: red;">Erreur: {{error}}.</p>
{{/if}}
<form>
<label for="username">Nom de compte:</label>
<input type="text" required name="username">
<br/>
<label for="email">Email:</label>
<input type="email" required name="email">
<br/>
<label for="password">Mot de passe:</label>
<input type="password" required name="password">
<br/>
<label for="checkPassword">Confirmation du mot de passe:</label>
<input type="password" required name="checkPassword">
<br/>
<input type="submit" value="Inscription">
</form>
</template>L’utilisateur peut donc rentrer son nom de compte, une adresse email ainsi que son mot de passe. Ce sont les 3 informations minimales pour la création d’un compte. Au niveau du JavaScript, il nous faut inclure, importé plus précisément, les différents modules que nous avons installés précédemment. Et comme je suis gentil, voilà à quoi doit ressembler le haut de votre fichier :
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { Accounts } from 'meteor/accounts-base';
import { Session } from 'meteor/session';
import './main.html';Une fois que cela est fait, jetons un petit coup d’œil au code JavaScript lié à notre templace Blaze du nom de Inscription.
// Inscription
Template.Inscription.helpers({
error() {
return Session.get('formError');
}
});
Template.Inscription.events({
'submit form':function() {
event.preventDefault();
Session.set('formError', undefined); // On réinitialise la session
// On récupère les informations du formulaire
let username=$('[name=username]').val();
let email=$('[name=email]').val();
let password=$('[name=password]').val();
let checkPassword=$('[name=checkPassword]').val();
// On fait des vérifications
if (/\s/.test(username)) {
Session.set('formError', `Les espaces sont interdits dans le nom de compte.`);
return;
}
emailRegex= /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/i;
if(!emailRegex.test(email)) { // On vérifie si c'est bien une adresse email
Session.set('formError', `Le format de l'adresse email n'est pas valide.`);
return;
}
if(!(password===checkPassword)) { // On vérifie que les mots de passes sont bien identiques
Session.set('formError', `Les mots de passe ne sont pas identiques.`);
return;
}
// Création du compte
Accounts.createUser({
username:username,
email:email,
password:password
}, function (error) {
if(error) {
Session.set('formError', error.reason);
return;
}
});
}
});Alors, petit tour du propriétaire. Le helpers nous permet, comme d’habitude, de passer une variable entre notre JavaScript et notre rendu HTML. Ici en l’occurrence, une variable qui contient, si erreur il y a, le message associer pour afficher à l’utilisateur qu’il y a un problème et qu’il doit corriger son erreur. Par la suite, dans Events, nous détectons l’envoi du formulaire puis traitons les informations à notre disposition. Rien d’extraordinaire, vous devriez déjà être habitué à voir ce genre de choses. Cependant, il y a une nouvelle instruction que nous n’avions encore jamais vue.
// Création du compte
Accounts.createUser({
username:username,
email:email,
password:password
}, function (error) {
if(error) {
Session.set('formError', error.reason);
}
});C’est donc avec celle-ci que nous allons pouvoir créer le compte. On passe en argument les différents paramètres nécessaires et le tour est joué ! On vérifie simplement qu’il n’y est pas d’erreur par la suite. Le module de compte de Meteor va s’occuper lui-même de vérifier si le nom de compte n’est pas déjà pris par un autre utilisateur, crypté le mot de passe pour des raisons de sécurité et enregistré l’utilisateur dans notre base de données MongoDB. Si tout est bon, la personne qui vient de s’inscrire est directement connecté à son compte.
Nous venons donc de voir comment faire un système d’inscription, comme vous pouvez le voir c’est très simple ! Maintenant, attaquons le système de connexion.
Connexion à un compte
Bonne nouvelle, le système de connexion va être encore plus simple que pour l’inscription ! Je ne vais pas vous faire patienter plus longtemps avec du Blabla inutile, voilà le code HTML en premier :
<template name="Connexion">
<h2>Connexion</h2>
{{#if error}}
<p style="color: red;">Erreur: {{error}}.</p>
{{/if}}
<form>
<label for="username">Nom de compte:</label>
<input type="text" required name="username">
<br/>
<label for="password">Mot de passe:</label>
<input type="password" required name="password">
<br/>
<input type="submit" value="Connexion">
</form>
</template>Puis, le code JavaScript qui va avec. Comme vous allez le voir, c’est la ligne de code suivante Meteor.loginWithPassword qui va faire tout le travail pour nous !
// Connexion
Template.Connexion.helpers({
error() {
returnSession.get('loginFormError');
}
});
Template.Connexion.events({
'submit form':function() {
event.preventDefault();
Session.set('loginFormError', undefined); // On réinitialise la session
// On récupère les informations du formulaire
let username=$('[name=username]').val();
let password=$('[name=password]').val();
Meteor.loginWithPassword(username, password, function(error) {
if(error) {
Session.set('loginFormError', error.reason);
return;
}
});
}
});Page d’un utilisateur connecté et déconnexion
Maintenant que notre utilisateur peut s’inscrire puis se connecter à notre site internet il serait bien de pouvoir lui proposer l’affichage d’informations auxquels il n’avait pas accès avant. Et par la même occasion lui permettre de se déconnecter du site. Je ne vais pas y aller par quatre chemins, le code est très simple et si vous avez suivi le début de cette formation Meteor vous n’aurez aucun mal pour comprendre !
Commençons par le code HTML, pour information currentUser est en quelque sorte une variable globale, cela signifie que nous n’avons pas besoin d’un helpers pour l’utiliser dans Blaze, ce qui nous permet de savoir si l’utilisateur est actuellement connecté, ou non.
<head>
<title>accountWebApp</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{#if currentUser}}
Bonjour {{currentUser.username}} ! <br/>
Vous êtes maintenant connecté. {{> Deconnexion}}
{{else}}
{{> Connexion}}
{{> Inscription}}
{{/if}}
</body>Et le template pour le bouton de déconnexion. Pourquoi le mettre à part ? Simplement pour, par la suite, pouvoir l’intégrer facilement dans une autre page sans devoir refaire le code JavaScript qui va avec.
<template name="Deconnexion">
<a class="logout" href="#">Déconnexion</a>
</template>Au niveau du JavaScript il n’y a qu’un petit morceau de code supplémentaire, celui qui nous permet de déconnecter l’utilisateur.
// Déconnexion
Template.Deconnexion.events({
'click .logout':function(event) {
event.preventDefault();
Meteor.logout();
}
});Conclusion
Nous avons donc vu dans cet article comment mettre en place un système de compte sur Meteor. Et vous l’avez sûrement remarqué, cela est très simple ! Gérer l’affichage en fonction de, si l’utilisateur est connecté ou non est aussi très pratique grâce au moteur de rendu Blaze de Meteor. Voilà donc à quoi ressemble en l’état notre super application.
Le code source du projet est disponible à cette adresse.
