Drupal 9 : Ajout du formulaire de connexion sur un Application VueJs

Objectif :

Permettre d'ajouter une etape d'authentification sur une application vuejs existant.

Prerequis :

Vous devez avoir une application vuejs fonctionnelle.
Dans le cadre de ce tuto nous allons utilisé l'application restaurant-food-reservation  ( 1.0.1 version de base ) qui permet d'effectuer des reservations.

Vous devez installer vee-validate,

Au niveau de drupal, vous devez installer Login-rx-vuejs

On commence par installé le module de connexion drupal-vuejs. Ce module n'etant pas encore sur npmjs.com, vous pouvez le telecharger en local et l'installer comme suit. ( Le chemin "/siteweb/AppVuejs/" doit etre adapter en function de votre environnement. )

npm install /siteweb/AppVuejs/drupal-vuejs
npm install vee-validate@3

NB:  On installe la version vee-validate@3 car nous utilisons la vue@2.7.14. ( la version vee-validate@4 est compatible avec vue@3 ).

Nous identifions ou nous souhaitons ajouter le formulaire d'authentification :

Nous souhaitons que si l'utilisateur n'est pas connecté lorsqu'il clique sur le bonton "book now" le formulaire de connexion apparait si non, le processus par defaut de l'application se poursuit.

Au niveau de notre application vuejs, c'est le fichier src/components/MultiStepForm.vue qui gere les differentes etapes. Nous allons y ajouter une etape permettant la connexion:

au niveau du template :

...
      <div v-show="currentStep == 3" key="four" class="animate">
        <choose-offer @setReservation="setReservation"></choose-offer>
      </div>
      <!-- </transition-group> -->
    </form>
    <!-- step reservation -->
    <loginRegister
      v-if="show_login_form"
      actionAfterRegister="emit_even_register"
      action-after-login="emit_even"
      :showModalSuccess="false"
      ref="LoginRegister"
    ></loginRegister>
    <!-- steps :
...

Au niveau des components, nous ajoutons :

...
  components: {
    VueCalendar,
    TimeDisplay,
    NombrePlace,
    ChooseOffer,
    loginRegister: () =>
      import("drupal-vuejs/src/App/components/LoginRegister.vue"),
  },
...

Au niveau du fichier main.js , nous ajoutons :

...
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
Vue.component("ValidationObserver", ValidationObserver);
Vue.component("ValidationProvider", ValidationProvider);
//import "drupal-vuejs/src/App/components/vee-validate-custom.js";
import { required, email, alpha } from "vee-validate/dist/rules";
extend("required", {
  ...required,
  message: "Ce champs est requis",
});
extend("email", email);
extend("alpha", alpha);
...

Au niveau de l'entrée state du store, nous ajoutons :

...
//to login
    form: {
      name: [{ value: "" }],
      mail: [{ value: "" }],
    },
...

Apres ses ajouts nous obtenu, ce rendu :

Le module de connexion apparait déjà.

à ce stade, nous devons afficher le formulaire si les conditions sont reunis. Pour y parvenir nous devons determiner si l'utilisateur est deja connecté, ou s'il s'est connecté ou encore s'il s'inscrit :

Au niveau de  la sections "methods" vous pouvez ajouter :

    /**
     * Permet de verifier si un utilisateur s'est connecté.
     */
    check_if_user_connected() {
      document.addEventListener(
        "login_rx_vuejs__user_is_login",
        () => {
          this.getCurrentUser().then((user) => {
            console.log("user : ", user);
            // Ajouter votre logique ici.
          });
        },
        false
      );
    },
    /**
     * Permet de verifier si un utilisateur s'est enregistrer
     */
    check_if_user_register() {
      document.addEventListener(
        "login_rx_vuejs__user_is_register",
        () => {
          // declanchera l'enenement login_rx_vuejs__user_is_login
          this.$refs.LoginRegister.connexionUser(this.$store.state.form);
        },
        false
      );
    },
    /**
     * Recupere les informations de l'utilisateur s'il est connecté.
     */
    getCurrentUser() {
      return new Promise((resolv, reject) => {
        users
          .getCurrentUser()
          .then((user) => {
            if (user) {
              this.$store.commit("SET_USER", user);
              resolv(user);
            }
          })
          .catch((er) => {
            reject(er);
          });
      });
    },

Au niveau de la section "mounted" ajouter :

this.check_if_user_connected();
this.check_if_user_register();
this.getCurrentUser();

Explication :

Au niveau du store, on a definit un state.user qui contiendra les données de l'utilisateur.

Si l'utilisateur se connecte l'evenement "login_rx_vuejs__user_is_login" serra declanché et par la suite la methode getCurrentUser serra executé.

Si l'utilisateur s'enregistre, l'evenement "login_rx_vuejs__user_is_register" serra declanché et par la suite l'evenement "login_rx_vuejs__user_is_login" serra declanché.

Vous pouvez utiliser state.user afin de determiner s'il faut afficher le formulaire de connexion.

Test :

nous allons tester notre formaulaire :

Nous recevons un message d'erreur, cela est du au fait que nous devons apporter quelques modifications sur le site drupal. 
Nous devons activer le module "restui", puis activer la route "/user/register" 

ensuite, autorisé l'utilisater anonyme à acceder à cette ressource :

et enfin autorisé l'utilisateur anonyme à creer son compte :

à ce stade, l'utilisateur peut se connecté ou creer un nouveau compte, et vous pouvez continuer avec la logique metier de l'application au niveau de la methode check_if_user_connected(). ( voir  restaurant-food-reservation  ( 1.0.2 version avec authentification ) )