Meteor - Comptes

Ce package permet une fonctionnalité d'authentification utilisateur complète. Vous pouvez l'ajouter en exécutant le code suivant dans la fenêtre d'invite de commandes.

C:\Users\username\Desktop\meteorApp>meteor add accounts-password

Exemple d'authentification

Cet exemple montrera l'authentification de base. Nous allons créerregister, login, et homemodèles. S'il y a uncurrentUser (si l'utilisateur est correctement enregistré ou connecté), le homele modèle sera affiché. Si il n'y a pascurrentUser, la register et login les modèles seront visibles.

meteorApp.html

<head>
   <title>meteorApp</title>
</head>
 
<body>
   {{#if currentUser}}
      {{> home}}
      {{else}}
      {{> register}}
      {{> login}}
   {{/if}}
</body>

<template name = "register">
   <h2>REGISTER:</h2>
   <form>
      <input type = "email" name = "registerEmail"><br>
      <input type = "password" name = "registerPassword"><br>
      <input type = "submit" value = "Register"><br>
   </form>
</template>

<template name = "login">
   <h2>LOGIN:</h2>
   <form>
      <input type = "email" name = "loginEmail"><br>
      <input type = "password" name="loginPassword"><br>
      <input type = "submit" value = "Login"><br>
   </form>
</template>

<template name = "home">
   <p>You're logged in.</p>
   <button class = "logout">Logout</button>
</template>

Tout d'abord, nous devons créer un registerun événement. Cette fonction lira les entrées du registre, créera un nouvel utilisateur et le stockera dans la base de données.

Le deuxième événement est login. Cette fois, la fonction lira les entrées dulogin template, connectez-vous à l'utilisateur si l'e-mail et le mot de passe sont valides ou renvoyez une erreur si ce n'est pas le cas.

Et enfin le logout événement sera utilisé pour déconnecter l'utilisateur, une fois que le bouton est cliqué.

meteorApp.js

if (Meteor.isClient) {

   Template.register.events({
      'submit form': function(event) {
         event.preventDefault();

         var registerData = {
            email: event.target.registerEmail.value,
            password: event.target.registerPassword.value
         }

         Accounts.createUser(registerData, function(error) {
         
            if (Meteor.user()) {
               console.log(Meteor.userId());
            } else {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });

   Template.login.events({
   
      'submit form': function(event) {
         event.preventDefault();
         var myEmail = event.target.loginEmail.value;
         var myPassword = event.target.loginPassword.value;
			
         Meteor.loginWithPassword(myEmail, myPassword, function(error) {

            if (Meteor.user()) {
               console.log(Meteor.userId());
            } else {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });

   Template.home.events({

      'click .logout': function(event) {
         event.preventDefault();
			
         Meteor.logout(function(error) {

            if(error) {
               console.log("ERROR: " + error.reason);
            }
         });
      }
   });
}

Une fois l'application démarrée, nous obtiendrons la page suivante.

En entrant l'e-mail et le mot de passe dans le registerformulaire, nous pouvons enregistrer et connecter le nouvel utilisateur. Nous verrons que la console enregistre les utilisateursid et le home le modèle est rendu.

le loginevent vérifiera la base de données et connectera l'utilisateur si l'e-mail et le mot de passe sont corrects. Sinon, la console enregistrera une erreur.

Si l'utilisateur clique sur le LOGOUT , l'application déconnectera l'utilisateur et affichera le register et login modèles.