Ajouter des Utilisateurs

6

Traduction complétée à

Au programme de ce chapitre :

  • Les comptes utilisateur dans Meteor.
  • Ajouter l'authentification dont on a besoin pour Microscope.
  • Utiliser les paquets accounts-ui natifs pour obtenir une interface utilisateur instantanément.
  • Depuis le début, nous avons appris à créer et afficher des données statiques brutes dans un style particulier et on a tout intégré dans un prototype simple.

    Nous avons même vu comment notre UI est réactive aux changements de données, et les données insérées ou modifiées apparaissent immédiatement. Par contre, notre site est paralysé par le fait que nous ne pouvons pas insérer de données. En fait, nous n'avons même pas encore d'utilisateurs !

    Voyons comment corriger ça.

    Comptes: création d'utilisateurs faciles

    Dans la plupart des frameworks web, ajouter des comptes utilisateurs est une fonctionnalité classique. Bien sur, vous devez faire ça dans presque tous les projets, mais ce n'est jamais aussi simple que ça le devrait. De plus, dès que vous devez interagir avec OAuth ou un systèmes d'authentification tiers, les choses ont tendance à se compliquer.

    Heureusement, Meteor a tout prévu. Grâce à la façon dont les paquets Meteor peuvent contribuer au code côté serveur (JavaScript) et côté client (JavaScript, HTML et CSS), nous pouvons bénéficier d'un système de compte presque sans effort.

    Nous pourrions simplement utiliser l'UI intégrée de Meteor pour les comptes (avec meteor add accounts-ui) mais comme nous avons développé toute notre application avec Bootstrap, nous utiliserons le paquet ian:accounts-ui-bootstrap-3 à la place (ne vous inquiétez pas, la seule différence est le style). En ligne de commande, nous tapons :

    meteor add ian:accounts-ui-bootstrap-3
    meteor add accounts-password
    
    Terminal

    Ces deux commandes nous donnent accès aux templates spéciaux des comptes, et nous pouvons les inclure dans notre site en utilisant le helper {{> loginButtons}}. Une astuce: vous pouvez contrôler de quel côté s'affiche la fenêtre d'authentification en utilisant l'attribut align (par exemple {{> loginButtons align="right"}}).

    Nous ajouterons les boutons à notre en-tête. Et comme cet en-tête commence à grossir donnons lui un peu de place avec son propre template (nous le mettrons dans client/templates/includes/). Nous utilisons également des balises externes et des classes spécifiées par Bootstrap pour nous assurer que tout soit beau :

    <template name="layout">
      <div class="container">
        {{>header}}
        <div id="main">
          {{> yield}}
        </div>
      </div>
    </template>
    
    client/templates/application/layout.html
    <template name="header">
      <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navigation">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="{{pathFor 'postsList'}}">Microscope</a>
        </div>
        <div class="collapse navbar-collapse" id="navigation">
          <ul class="nav navbar-nav navbar-right">
            {{> loginButtons}}
          </ul>
        </div>
      </nav>
    </template>
    
    client/templates/includes/header.html

    Maintenant, quand nous naviguons dans notre application, nous voyons les boutons d'authentification en haut à droite dans le coin du site.

    Interface intégrée des comptes utilisateur de Meteor
    Interface intégrée des comptes utilisateur de Meteor

    On peut utiliser ça pour s'enregistrer, s'authentifier, changer son mot de passe, et tout ce qu'un simple site comportant des comptes utilisateur a besoin.

    Pour indiquer au système de compte que nous voulons que les utilisateurs s'authentifient avec un nom d'utilisateur, nous ajoutons simplement un bloc de configuration Accounts.ui dans un nouveau fichier config.js à l'intérieur de client/helpers/ :

    Accounts.ui.config({
      passwordSignupFields: 'USERNAME_ONLY'
    });
    
    client/helpers/config.js

    Commit 6-1

    Comptes ajoutés et template intégré à l'en-tête

    Création de notre premier utilisateur

    Enregistrez un compte : le bouton “Sign In” changera pour afficher votre nom d'utilisateur. Ça confirme que le compte utilisateur a bien été créé pour vous. Mais d'où viennent les données de ce compte ?

    En ajoutant le paquet accounts, Meteor a créé une nouvelle collection spéciale, laquelle peut être accédée avec Meteor.users(). Pour la voir, ouvrez la console de votre navigateur et tapez :

     Meteor.users.findOne();
    
    Console du navigateur

    La console retournera un objet correspondant à votre objet utilisateur. Si vous regardez de plus près, vous pouvez voir que votre nom d'utilisateur est dedans, avec un _id unique qui vous identifie. Notez que vous pouvez également récupérer l'utilisateur actuellement connecté avec Meteor.user().

    Maintenant déconnectez-vous et enregistrez-vous avec un compte utilisateur différent. Meteor.user() devrait retourner un second utilisateur. Mais attendez, exécutons :

     Meteor.users.find().count();
    1
    
    Console du navigateur

    La console retourne 1. Ne devrait-il pas y en avoir 2 ? Le premier utilisateur a-t-il été supprimé ? SI vous essayez de vous authentifier avec le premier utilisateur, vous verrez que ce n'est pas le cas.

    Assurons nous-en et vérifions dans la zone de stockage des données canonique, la base de données Mongo. On se connectera à Mongo (meteor mongo dans votre terminal) et on vérifiera :

    > db.users.count()
    2
    
    Console Mongo

    Il y a bien deux utilisateurs. Donc pourquoi ne pouvons-nous en voir qu'un dans le navigateur ?

    Une publication mystère !

    Si vous repensez au chapitre 4, vous pouvez vous souvenir qu'on a supprimé autopublish, nous avons arrêté l'envoi des données des collections du serveur vers chaque version local de collection des clients connectés. Nous avions besoin de créer un couple publication / souscription afin de faire transiter les données.

    Mais nous n'avons pas encore établi de publication utilisateur. Donc d'où vient que nous pouvons quand même voir une donnée utilisateur ?

    La réponse est que le paquet comptes auto-publie les détails de base du compte de l'utilisateur actuellement authentifié. S'il ne le faisait pas, l'utilisateur ne pourrait pas s'authentifier sur le site !

    Le paquet comptes publie seulement l'utilisateur courant. Ceci explique pourquoi un utilisateur ne peut voir les détails d'un autre compte.

    La publication publie donc seulement un objet utilisateur par utilisateur authentifié (et aucun si vous n'êtes pas authentifié).

    De plus, les documents ne semblent pas avoir les mêmes champs sur le serveur et sur le client. Dans Mongo, un utilisateur a beaucoup de données. Pour les voir, retournez sur votre terminal Mongo et tapez :

    > db.users.find()
    {
        "_id": "H5kKyxtbkLhmPgtqs",
        "createdAt": ISODate("2015-02-10T08:26:48.196Z"),
        "profile": {},
        "services": {
            "password": {
                "bcrypt": "$2a$10$yGPywo3/53IHsdffdwe766roZviT03YBGltJ0UG"
            },
            "resume": {
                "loginTokens": [{
                    "when": ISODate("2015-02-10T08:26:48.203Z"),
                    "hashedToken": "npxGH7Rmkuxcv098wzz+qR0/jHl0EAGWr0D9ZpOw="
                }]
            }
        },
        "username": "sacha"
    }
    
    Console Mongo

    Et de l'autre côté, dans le navigateur l'objet utilisateur est bien moins rempli, comme vous pouvez le voir en tapant la commande équivalente :

     Meteor.users.findOne();
    Object {_id: "kYdBd9hr3fWPGPcii", username: "tmeasday"}
    
    Console du navigateur

    Cet exemple nous montre comment une collection local peut être un sous-ensemble sécurisée de la vrai base de données. L'utilisateur authentifié voit seulement les informations nécessaires à son bon fonctionnement (dans ce cas, l'authentification). C'est un cas utile pour apprendre, vous vous en apercevrez plus tard.

    Ça ne veut pas dire que vous ne pourrez rendre publiques des données utilisateur si vous le souhaitez. Vous pouvez vous référer à la Documentation Meteor pour savoir comment vous pouvez publier plus de champs dans la collection Meteor.users.