Authentification des utilisateurs avec Appwrite et Vue

Appwrite facilite l’ajout d’une authentification à nos applications Vue, y compris la gestion des données utilisateur, le tout sans écrire ni maintenir de code backend.

Appwrite est une plate-forme backend-as-a-service open source permettant de créer des applications Web, mobiles et Flutter. Avec les services d’authentification Appwrite, nous pouvons authentifier, confirmer et gérer les utilisateurs à l’aide de différentes méthodes de connexion. En dehors de cela, nous pouvons également protéger les données des utilisateurs à l’aide de l’API Appwrite.

Cet article expliquera Appwrite, ses avantages en tant que plate-forme backend et comment nous pouvons authentifier et gérer les données utilisateur dans notre application sans écrire ou maintenir notre code backend à partir de zéro.

Conditions préalables

Pour mieux comprendre cet article, il y a certaines choses que nous devons connaître et mettre en place :

• Docker installé sur notre ordinateur ; si vous ne l’avez pas installé, vous pouvez consulter le Documentation Docker pour un guide sur la façon de l’installer
• Node.Js installé avec une version compatible
• Connaissance préalable du travail avec les formulaires et Vue
• Interface utilisateur Kendo pour Vue installé dans notre projet Vue
• Si vous ne disposez pas d’une instance Appwrite fonctionnelle, vous pouvez suivre ceci article en créer un

Voici ce que nous aborderons dans cet article :

1. Qu’est-ce qu’Appwrite ?
2. Caractéristiques et avantages de l’utilisation d’Appwrite
3. Créer un nouveau projet Vue
4. Créer un nouveau projet Appwrite
5. Ajouter Appwrite au projet
6. Construire notre formulaire d’authentification avec Kendo UI pour Vue
7. Authentifier les utilisateurs avec l’API Appwrite
8. Conclusion

Qu’est-ce qu’Appwrite ?

Appwrite est une plate-forme backend en tant que service qui nous aide à créer des applications mobiles, Web et Flutter. Il est open source et auto-hébergé, nous fournissant toutes les API de base dont nous avons besoin pour créer notre application. Il dispose de bons services qui peuvent contribuer à accélérer notre développement.

Caractéristiques et avantages de l’utilisation d’Appwrite

• Appwrite nous donne accès pour stocker, interroger et gérer facilement nos documents de candidature. Il prend également en charge plusieurs fournisseurs de stockage de fichiers.
• Avec la console Appwrite, nous pouvons suivre notre utilisation de l’API backend et gérer les ressources de notre projet à partir d’une interface utilisateur moderne.
• Appwrite nous offre diverses fonctionnalités de sécurité telles que HTTPS, le stockage sécurisé des données et le cryptage automatique de nos données sensibles.
• Appwrite prend en charge plusieurs types de bases de données, notamment MySQL, MongoDB, Redis, etc. Cette base de données externe nous permet de sélectionner plus facilement la bonne base de données qui répondra aux besoins de notre application.

Créer un nouveau projet Vue

Nous utiliserons l’outil d’échafaudage officiel du projet Vue create-vue pour démarrer un nouveau projet puisqu’il s’agit du projet Vue le plus récent. Cette commande facilite la création de projets Vue en nous offrant d’excellentes fonctionnalités optionnelles parmi lesquelles choisir. Pour créer un nouveau projet, nous allons entrer dans le répertoire et exécuter la commande ci-dessous :

npm init vue@latest

Après avoir exécuté la commande précédente, nous recevrons un message d’invite avec les fonctionnalités que nous souhaitons ajouter à notre projet. Les choses que nous voulons seront sélectionnées et celles que nous ne voulons pas seront laissées de côté. Voir une illustration ci-dessous :

Créer un nouveau projet Appwrite

Appwrite est un outil gratuit, facile à configurer et proposant des didacticiels de démarrage utiles. Avant de démarrer un nouveau projet Appwrite, nous devons avoir installé Docker et configuré une instance locale Appwrite conformément aux prérequis.

Nous avons entré notre nom d’hôte et nos informations de port lors de la création de notre instance Appwrite. Localhost:80 est le paramètre par défaut, mais nous pouvons le modifier si nous le souhaitons. Pour accéder à notre console Appwrite, nous allons sur le port choisi, y enregistrons un compte, puis revenons. Voir une illustration de notre console Appwrite.

Pour créer un nouveau projet, cliquez sur create project et ajoutez un nom de projet. Dans cet exemple, nous créons un nom de projet appwrite-auth et cliquez sur le create bouton.

Ensuite, nous ajouterons une plateforme. Avec les SDK Appwrite, nous pouvons facilement ajouter n’importe quelle plate-forme de notre choix. Dans cette section, nous avons des options pour : web App, Flutter App, Apple App et Android App. Sélectionnez le Web App plate-forme, car c’est la plate-forme pour laquelle nous construisons.

Ensuite, nous sélectionnerons un nom et un nom d’hôte pour enregistrer notre application Web.

Une fois que nous aurons fini d’enregistrer notre application Web, nous installerons et configurerons ensuite notre SDK dans notre projet Vue.

Ajouter Appwrite au projet

Pour ajouter Appwrite à notre projet Vue, nous allons l’installer avec la commande ci-dessous :

npm install appwrite

Après avoir installé Appwrite, nous importerons le module Appwrite dans notre projet en utilisant la syntaxe ci-dessous :

import { Client } from 'appwrite';

Maintenant que nous avons téléchargé le SDK Appwrite, nous allons l’initialiser en utilisant notre ID de projet. Notre ID de projet peut être trouvé sur notre page de paramètres de projet ou lorsque nous créons une nouvelle page Appwrite.

Créer notre formulaire d’authentification avec Kendo UI

Nous allons créer notre mise en page de formulaire en utilisant Kendo UI et Vue. Pour ce faire, copiez le code ci-dessous :

<template>
  <section class="section-style">
    <div class="flex-container">
      <div class="text-hero">
        <img src="" alt="" srcset="">
        <h1>Let's help you get started with our bussines</h1>
        <p>Our registration is a simple and quick process that takes no longer than 7 minutes to complete.</p>
        <div class="card-hero">
          <!-- <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Aperiam earum quos assumenda tempore iusto
            voluptates a cupiditate unde accusamus voluptatibus nihil veniam ad iste laboriosam deleniti, atque voluptatem
            nisi blanditiis?</p> -->
        </div>
      </div>
      <card class="card-section" style="width: 450px; ">
        <h1>Get Started</h1>
        <p>Create your account now</p>
        <form @submit.prevent="sendEmail">
          <div class="form-group">
            <KInput class="form-input" :style="{ width: '290px' }" name="Name" placeholder="Name"></KInput>
          </div>
          <div class="form-group">
            <KInput class="form-input" :style="{ width: '290px' }" name="eamil" placeholder="Email" v-model="email">
            </KInput>
          </div>
          <div class="form-group">
            <KInput class="form-input" :style="{ width: '290px' }" name="password" placeholder="password"
              v-model="password"></KInput>
          </div>
          <div class="example-col">
            <kButton :style="{ width: '100px' }" id="submit-btn">Sign Up</kButton>
          </div>
          <div class="example-col">
            <p>Have an account ? Login</p>
          </div>
        </form>
      </card>
    </div>
  </section>
</template> 

Voici à quoi ressemble la présentation de notre application :

Authentifier les utilisateurs avec l’API Appwrite

Nous avons fini de créer notre mise en page avec Kendo UI et Vue. L’étape suivante consiste à authentifier nos utilisateurs à l’aide de l’API Appwrite. Pour ce faire, nous copierons le code ci-dessous dans notre AuthPage.vue déposer:

<script>
import { Client, Account } from "appwrite";
const client = new Client();
client.setEndpoint("add localhost id ").setProject("input project id here");
const account = new Account(client);
export { client, account };
import {
  Card,
} from "@progress/kendo-vue-layout";
// ES2015 module syntax
import { Input } from "@progress/kendo-vue-inputs";
import "@progress/kendo-theme-default";
import { Button } from "@progress/kendo-vue-buttons";
export default {
  name: "CardComponent",
  components: {
    card: Card,
    KInput: Input,
    kButton: Button,
  },
  data() {
    return {
      name: '',
      email: '',
      password: '',
      error: ''
    }
  },
  methods: {
    async sendEmail() {
      try {
        const user = await account.create("unique()", this.email, this.password, this.name)
        console.log(user); // Success
      } catch (error) {
        console.log(error); // Failure
      }
    }
  },
};
</script>

• Dans l’exemple de code ci-dessus, nous avons créé une fonction de données qui contient deux propriétés, l’e-mail et le mot de passe. Ces propriétés sont utilisées pour stocker les entrées de l’utilisateur dans un formulaire.
• L’objet méthodes définit une méthode unique appelée sendEmail. Nous utiliserons la méthode pour envoyer les données après avoir créé un nouveau compte utilisateur avec le async mot-clé, qui renverra une promesse.
• Ensuite, nous créons un bloc try qui sera exécuté si aucune erreur n’est rencontrée. Dans le bloc try, nous créons un nouveau compte en utilisant le account.create() fonction. La fonction prend quatre arguments : un identifiant unique, l’e-mail, le mot de passe et le nom de l’utilisateur. Avec unique(), nous générons un identifiant unique pour chaque utilisateur. Si la account.create() réussit, le nouveau compte utilisateur sera créé.

Ceci est une illustration de la façon dont notre console d’authentification apparaît avant de créer un nouvel utilisateur.

Voici notre résultat final après avoir créé un nouvel utilisateur avec l’API du compte Appwrite :

Conclusion

Le système d’authentification Appwrite nous offre un moyen sécurisé et fiable de garantir que seuls les utilisateurs autorisés peuvent accéder aux informations sensibles et effectuer des actions au sein d’une application. Grâce à la force d’authentification Appwrite, nous pouvons facilement intégrer différents systèmes d’authentification dans notre application sans nous soucier de l’infrastructure de sécurité sous-jacente. Cet article nous a appris comment authentifier et gérer les utilisateurs avec Appwrite.

Progrès Interface utilisateur Kendo pour Vue propose des dizaines de composants Vue.js natifs, notamment une grille de données, des graphiques, des entrées de formulaire et bien plus encore. Donnez-lui un essayer gratuitement!