Login Daal avec BootstrapVue

De nombreuses applications Web ont besoin d’une solution de connexion. Cette tâche répétitive peut être facilitée avec Login Daal. Login Daal est une solution de login open source écrite en JavaScript. Daal signifie lentille en hindi et a un goût délicieux, par exemple comme soupe Daal.

Login Daal comprend une interface de connexion écrite en Vue et BootstrapVue. De plus, il existe un faux back-end écrit en Node. Un véritable back-end est prévu.

Dans cet article, je veux vous montrer les points forts de Login Daal, à la manière d’un guide de voyage.

Écran de connexion

L’écran de connexion de Login Daal se compose d’un en-tête dans la partie supérieure et du formulaire de connexion dans la partie inférieure. Dans l’en-tête se trouve le nom de l’application et sur le côté droit l’icône du menu. La conception de l’écran est réactive, il fonctionne à la fois sur le bureau et sur l’écran des résolutions mobiles.

Le formulaire de connexion comporte un bouton pour se connecter à Facebook. Login Daal utilise la composante facebook-login-vuejs. Vous devez saisir votre identifiant Facebook dans la variable d’environnement VUE_APP_APP_FACEBOOK_APP_ID dans le fichier .env. À des fins de test, vous pouvez générer un certain nombre d’utilisateurs de test dans votre console Facebook Developer.

Il y a ensuite deux champs de saisie, l’adresse e-mail et le mot de passe. Notez que Login Daal fait une vérification de l’adresse e-mail. Une fois le mot de passe saisi, l’utilisateur peut appuyer sur Entrée ou cliquer sur le bouton Login.

Voici un extrait du modèle du LoginDialog.vue :

  ...
      <b-container fluid v-on:keydown="keydown">
        <b-row id="login-button">
          <b-col sm="12">
            <div class="facebook-login">
              <facebook-login
                class="facebook-button"
                v-bind:appId="appId"
                loginLabel="Login with Facebook"
                @login="onLogin"
                @logout="onLogout"
                @sdk-loaded="sdkLoaded"
              ></facebook-login>
            </div>
          </b-col>
        </b-row>
        <b-row class="or-word">
          <p>&#x2014 or &#x2014</p>
        </b-row>
        <b-row>
          <b-col sm="12">
            <b-form-group id="email-group">
              <b-form-input
                placeholder="Email"
                ref="email"
                v-model="email"
                type="email"
                name="email"
                required
                v-on:blur="emailValidation"
                v-on:input="emailValidation"
              ></b-form-input>
              <div class="error" v-if="emailValidationError">Please provide a valid email address.</div>
            </b-form-group>
          </b-col>
        </b-row>
  ...

Vous pouvez voir qu’il utilise le composant facebook-login et utilise BootstrapVue pour les autres composants comme b-form-input.

Écran d’inscription

L’écran d’inscription contient tous les champs nécessaires à l’inscription par courriel. L’utilisateur saisit son adresse e-mail et son mot de passe. Notez que le mot de passe est entré deux fois pour des raisons de sécurité, au cas où l’utilisateur l’aurait mal orthographié la première fois. Il affiche des messages d’erreur sous la zone de saisie si les mots de passe ne sont pas les mêmes. Il y a ensuite une case à cocher pour accepter les termes de l’entreprise.

Écran de réinitialisation du mot de passe

L’utilisateur accède à cet écran à partir de l’écran de connexion lorsqu’il a oublié son mot de passe. Ici, il peut entrer son adresse e-mail et obtenir un lien envoyé où il peut réinitialiser le mot de passe. Dans la version actuelle de Login Daal, le simulateur n’envoie pas d’e-mails.

Serveur Mock Backend

Le serveur simulé du back-end est un serveur simple basé sur Express qui expose certains critères d’évaluation. Le résultat est toujours positif sauf lorsque l’adresse e-mail [email protected] est saisie. Ensuite, il renvoie une erreur.

Ceci est un extrait du serveur Mock :

...
/* New user registration */
server.post('/user/users', (req, res) => {
  if (req.body.email === '[email protected]') {
    res.status(401).json({});
    return;
  }

  let data = {};
  res.status(201).json(data);
});

/* Password reset */
server.post('/user/passwordreset', (req, res) => {
  if (req.body.email === '[email protected]') {
    res.status(401).json({});
    return;
  }

  let data = {};
  res.status(201).json(data);
});

server.use(middlewares);

server.listen(3002, function() {
  console.log('Login Daal mock server started on port ' + 3002);
});

Conclusion

Si vous ne voulez pas partir de zéro avec vos propres composants de connexion, j’espère que Login Daal peut vous aider ou au moins vous inspirer. Login Daal utilise la grande bibliothèque BootstrapVue qui exploite la célèbre bibliothèque CSS Bootstrap. Un serveur Mock vous permet de simuler le back-end d’une manière rapide. En fonction de vos commentaires, Login Daal peut évoluer vers une solution complète de login open source de bout en bout.

Sources et lectures complémentaires

• Code source de Login Daal: https://github.com/tderflinger/login-daal

• BootstrapVue: https://bootstrap-vue.js.org/

• Facebook Login Vuejs: https://www.npmjs.com/package/facebook-login-vuejs

• Merci à Ulrike Thiel pour la conception des écrans.