Inscription et connexion

Temps estimé :9 minutes 35 views

Mise en place d’une authentification utilisateur dans notre application Vue.js

La mise en place d’une authentification utilisateur (connexion et inscription) est essentielle pour les applications web qui gèrent des données sensibles ou offrent des fonctionnalités personnalisées aux utilisateurs. Voici un guide pour implémenter l’authentification dans notre application Vue.js .

1. Choisir un backend ou un service d’authentification

Backend: Développez votre propre serveur backend pour gérer la logique d’authentification utilisateur, y compris le stockage des identifiants de connexion et la génération de jetons d’authentification.
Service d’authentification: Utilisez un service d’authentification tiers comme Firebase Authentication ou Auth0 pour gérer l’authentification utilisateur de manière sécurisée.

Dans notre cas, l’authentification est gérée via l’API REST de Drupal.

2. Installer Vue Router

Vue Router: installez Vue Router et configurez les routes pour ces pages.

3.Structurer le composant d’inscription

Créez un fichier SignUp.vue dans votre répertoire de composants. Définissez le template HTML du composant, incluant les champs nécessaires pour l’inscription nom, prénom, adresse e-mail, mot de passe, adresse, nom du cabinet, et Siren du cabinet (facultatif). Ajoutez des styles CSS de base pour le formulaire d’inscription.

<template>
  <!--begin::Wrapper-->
  <div class="w-lg-500px p-10">
    <!--begin::Form-->
    <VForm
      class="form w-100 fv-plugins-bootstrap5 fv-plugins-framework"
      novalidate
      @submit="onSubmitRegister"
      id="kt_login_signup_form"
      :validation-schema="registration"
    >
      <!--begin::Heading-->
      <div class="mb-10 text-center">
        <!--begin::Title-->
        <h1 class="text-gray-900 mb-3">{{ t("createAccount") }}</h1>
        <!--end::Title-->
      </div>
      <!--begin::Input group-->
      <div class="row fv-row mb-7">
        <!--begin::Col-->
        <div class="col-xl-6">
          <label class="required form-label fw-bold text-gray-900 fs-6">{{
            t("firstName")
          }}</label>
          <Field
            class="form-control form-control-lg form-control-solid"
            type="text"
            placeholder=""
            name="first_name"
            autocomplete="off"
          />
          <div class="fv-plugins-message-container">
            <div class="fv-help-block">
              <ErrorMessage name="first_name" />
            </div>
          </div>
        </div>
        <!--end::Col-->

        <!--begin::Col-->
        <div class="col-xl-6">
          <label class="required form-label fw-bold text-gray-900 fs-6">{{
            t("lastName")
          }}</label>
          <Field
            class="form-control form-control-lg form-control-solid"
            type="text"
            placeholder=""
            name="last_name"
            autocomplete="off"
          />
          <div class="fv-plugins-message-container">
            <div class="fv-help-block">
              <ErrorMessage name="last_name" />
            </div>
          </div>
        </div>
        <!--end::Col-->
      </div>
      <!--end::Input group-->

      <!--begin::Input group-->
      <div class="fv-row mb-7">
        <label class="required form-label fw-bold text-gray-900 fs-6">{{
          t("email")
        }}</label>
        <Field
          class="form-control form-control-lg form-control-solid"
          type="email"
          placeholder=""
          name="email"
          autocomplete="off"
        />
        <div class="fv-plugins-message-container">
          <div class="fv-help-block">
            <ErrorMessage name="email" />
          </div>
        </div>
      </div>
      <!--end::Input group-->

      <!--begin::Input group-->
      <div class="row fv-row mb-7">
        <!--begin::Col-->
        <div class="col-xl-6">
          <label class="required form-label fw-bold text-gray-900 fs-6">{{
            t("cabinetName")
          }}</label>
          <Field
            class="form-control form-control-lg form-control-solid"
            type="text"
            placeholder=""
            name="name_cabinet"
            autocomplete="off"
          />
          <div class="fv-plugins-message-container">
            <div class="fv-help-block">
              <ErrorMessage name="name_cabinet" />
            </div>
          </div>
        </div>
        <!--end::Col-->

        <!--begin::Col-->
        <div class="col-xl-6">
          <label class="form-label fw-bold text-gray-900 fs-6">{{
            t("sirenCabinetName")
          }}</label>
          <Field
            class="form-control form-control-lg form-control-solid"
            type="text"
            placeholder=""
            name="siren_cabinet"
            autocomplete="off"
          />
          <div class="fv-plugins-message-container">
            <div class="fv-help-block">
              <ErrorMessage name="siren_cabinet" />
            </div>
          </div>
        </div>
        <!--end::Col-->
      </div>
      <!--end::Input group-->

      <!--begin::Input group-->
      <div class="mb-10 fv-row" data-kt-password-meter="true">
        <!--begin::Wrapper-->
        <div class="mb-1">
          <!--begin::Label-->
          <label class="required form-label fw-bold text-gray-900 fs-6">
            {{ t("password") }}
          </label>
          <!--end::Label-->

          <!--begin::Input wrapper-->
          <div class="position-relative mb-3">
            <Field
              class="form-control form-control-lg form-control-solid"
              type="password"
              placeholder=""
              name="password"
              autocomplete="off"
            />
            <div class="fv-plugins-message-container">
              <div class="fv-help-block">
                <ErrorMessage name="password" />
              </div>
            </div>
          </div>
          <!--end::Input wrapper-->
          <!--begin::Meter-->
          <div
            class="d-flex align-items-center mb-3"
            data-kt-password-meter-control="highlight"
          >
            <div
              class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"
            ></div>
            <div
              class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"
            ></div>
            <div
              class="flex-grow-1 bg-secondary bg-active-success rounded h-5px me-2"
            ></div>
            <div
              class="flex-grow-1 bg-secondary bg-active-success rounded h-5px"
            ></div>
          </div>
          <!--end::Meter-->
        </div>
        <!--end::Wrapper-->
        <!--begin::Hint-->
        <div class="text-muted">
          <p>{{ t("password_requirements") }}</p>
        </div>
        <!--end::Hint-->
      </div>
      <!--end::Input group--->

      <!--begin::Input group-->
      <div class="fv-row mb-5">
        <label class="required form-label fw-bold text-gray-900 fs-6">{{
          t("password_confirmation")
        }}</label>
        <Field
          class="form-control form-control-lg form-control-solid"
          type="password"
          placeholder=""
          name="password_confirmation"
          autocomplete="off"
        />
        <div class="fv-plugins-message-container">
          <div class="fv-help-block">
            <ErrorMessage name="password_confirmation" />
          </div>
        </div>
      </div>
      <!--end::Input group-->

      
      <!--begin::Actions-->
      <div class="text-center">
        <button
          id="kt_sign_up_submit"
          ref="submitButton"
          type="submit"
          class="btn btn-lg btn-primary"
        >
          <span class="indicator-label"> {{ t("submit") }} </span>
          <span class="indicator-progress">
            Please wait...
            <span
              class="spinner-border spinner-border-sm align-middle ms-2"
            ></span>
          </span>
        </button>
      </div>
      <!--end::Actions-->
    </VForm>
    <!--end::Form-->
  </div>
  <!--end::Wrapper-->
</template>

Valider les entrées de l’utilisateur

Implémentez une validation des entrées pour garantir que l’utilisateur fournit des informations correctes et complètes.
Vous pouvez utiliser une bibliothèque de validation comme Vee-validate ou Yup pour simplifier ce processus.

const registration = Yup.object().shape({
      first_name: Yup.string()
        .required(t("first_name_required"))
        .label(t("firstName")),
      last_name: Yup.string()
        .required(t("last_name_required"))
        .label(t("lastName")),
      email: Yup.string()
        .min(4, t("email_min_length"))
        .required(t("email_required"))
        .email(t("email_invalid"))
        .label(t("email")),
      name_cabinet: Yup.string()
        .required(t("cabinet_name_required"))
        .label(t("nameCabinet")),
      password: Yup.string()
        .required(t("password_required"))
        .label(t("password")),
      password_confirmation: Yup.string()
        .required(t("password_confirm_required"))
        .oneOf([Yup.ref("password")], t("passwords_must_match"))
        .label(t("password_confirmation")),
    });

Affichez des messages d’erreur clairs en cas de données invalides.

Envoyer les données d’inscription

L’application valide les entrées de l’utilisateur et envoie une demande d’inscription à l’API backend. Une fois l’inscription réussie, l’utilisateur reçoit un e-mail de confirmation ou il pourra activer son compte et peut se connecter en utilisant ses identifiants.

  try {
        // Send register request
        await store.register(values);
        setTimeout(() => {
          // Go to page after successfully register
          router.push({ name: "verify-email" });
        }, 2000); // 2 seconds
      } catch (err) {
        console.log(err);
      }

3. Créer le composant de connexion

Commencons par créer un composant Vue pour la page de connexion. Ce composant contiendra généralement la structure HTML pour le formulaire de connexion et la logique de gestion des soumissions de formulaire.

4. Définir le formulaire de connexion

Dans le template du composant, définissons la structure HTML du formulaire de connexion. Cela comprend des champs de saisie pour nom, prénom, adresse e-mail, mot de passe, adresse, nom du cabinet, et Siren du cabinet (facultatif) ainsi qu’un bouton de soumission.

L’application envoie une demande de connexion à l’API backend, qui vérifie les identifiants de l’utilisateur et génère un JWT si la connexion est réussie. Le JWT est renvoyé à l’application et stocké en toute sécurité.

Articles

Internationalisation

Documentation Vesper