DEV Community: samuel mbabhazi

API REST avec Prisma , PostgreSQL et Express

samuel mbabhazi — Tue, 14 May 2024 18:55:18 +0000

Eh bien, on dirait que quelqu'un est prêt à créer une API REST de folie ! 🔥 Dans cet article, nous allons plonger dans le monde des bases de données avec PostgreSQL, l'ORM Prisma, et Express pour construire une API REST géniale. 💻

Mais avant de commencer, assurons-nous que vous avez tout ce qu'il faut. Node.js ? ✔️ Docker ? ✔️ Une bonne dose d'enthousiasme ? ✔️✔️✔️ Parfait, on est parti ! 🚀

Première étape : configurer notre projet TypeScript. Créez un nouveau dossier, initialisez npm, et installez les dépendances nécessaires. C'est comme préparer le terrain de jeu avant la partie. 👷‍♂️

Tout d'abord, créez un nouveau répertoire pour votre projet :

mkdir affectation-cohortes-machines

Ensuite, accédez au répertoire et initialisez un npm projet vide. Notez que l' -y option ici signifie que vous ignorez les invites interactives de la commande. Pour parcourir les invites, supprimez -y de la commande :

cd affectation-cohortes-machines
npm init -y

Cette commande crée un package.json fichier minimal que vous utilisez comme fichier de configuration pour votre npm projet. Vous êtes maintenant prêt à configurer TypeScript dans votre projet.

Exécutez la commande suivante pour une configuration TypeScript simple :

npm install typescript ts-node @types/node --save-dev

Cela installe trois packages en tant que dépendances de développement dans votre projet :

typescript: La chaîne d'outils TypeScript.
ts-node: Un package pour exécuter des applications TypeScript sans compilation préalable en JavaScript.
@types/node: Les définitions de type TypeScript pour Node.js.

La dernière chose à faire est d'ajouter un fichier tsconfig.json pour garantir que TypeScript est correctement configuré pour l'application que vous allez créer.

Ajoutez le code JSON suivant dans le fichier tsconfig.json que vous creer a la racine de votre projet :

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "lib": ["esnext"],
    "esModuleInterop": true
  }
}

Enregistrez et quittez le fichier.

Cette configuration est une configuration standard et minimale pour un projet TypeScript. Si vous souhaitez en savoir plus sur les propriétés individuelles du fichier de configuration, vous pouvez consulter la documentation TypeScript .

Vous avez configuré votre projet TypeScript simple à l'aide de npm.

Ensuite, entrons dans le vif du sujet avec Prisma et PostgreSQL. Configurer Prisma, c'est un jeu d'enfant grâce à la CLI. 🧒 Et pour PostgreSQL, on va le faire tourner avec Docker. Comme ça, on a notre propre base de données à portée de main sans se prendre la tête. 🐳

Dans cette étape, vous allez installer la CLI Prisma , créer votre fichier de schéma Prisma initial , configurer PostgreSQL avec Docker et y connecter Prisma. Le schéma Prisma est le fichier de configuration principal de votre configuration Prisma et contient votre schéma de base de données.

Commencez par installer la CLI Prisma avec la commande suivante :

npm install prisma --save-dev

À titre de bonne pratique, il est recommandé d' installer Prisma CLI localement dans votre projet (plutôt que sous forme d'installation globale). Cette pratique permet d'éviter les conflits de versions si vous avez plusieurs projets Prisma sur votre machine.

Ensuite, vous allez configurer votre base de données PostgreSQL à l'aide de Docker. Créez un nouveau fichier Docker Compose avec la commande suivante :

nano docker-compose.yml

Ajoutez maintenant le code suivant au fichier nouvellement créé :

version: '3.8'
services:
  db:
    image: postgres:latest
    ports:
      - 5558:5432
    environment:
      POSTGRES_USER: sam_mbabhazi
      POSTGRES_PASSWORD: pass123
      POSTGRES_DB: acm
      DATABASE_URL: postgresql://sam_mbabhazi:pass123@localhost:5558/acm?schema=public

Ce fichier Docker Compose configure une base de données PostgreSQL accessible via le port 5432 du conteneur Docker. Les informations d'identification de la base de données sont actuellement définies comme sam_mbabhazi(utilisateur) et your_password(mot de passe). N'hésitez pas à ajuster ces informations d'identification en fonction de votre utilisateur et de votre mot de passe préférés. Enregistrez et quittez le fichier.

Une fois cette configuration en place, lancez le serveur de base de données PostgreSQL avec la commande suivante :

docker-compose up -d

Une fois le serveur de base de données en cours d'exécution, vous pouvez maintenant créer votre configuration Prisma. Exécutez la commande suivante depuis la CLI Prisma :

npx prisma init

Après avoir exécuté la commande, la CLI Prisma crée un nouveau dossier appelé prisma dans votre projet. À l'intérieur, vous trouverez un fichier schema.prisma, qui est le fichier de configuration principal de votre projet Prisma (y compris votre modèle de données). Cette commande ajoute également un fichier .env dotenv à votre dossier racine, où vous définirez l'URL de connexion à votre base de données.

Pour vous assurer que Prisma connaît l'emplacement de votre base de données, ouvrez le .env fichier et ajustez la DATABASE_URL variable d'environnement.

Vous pouvez maintenant mettre à jour la variable d'environnement comme suit :

DATABASE_URL="postgresql://sam_mbabhazi:pass123@localhost:5558/acm?schema=public"

Maintenant, définissons notre modèle de données dans le schéma Prisma. C'est comme dessiner un plan pour notre base de données. 📐 Une fois que c'est fait, on peut créer les tables correspondantes avec Prisma Migrate. Magie ! ✨

Dans cette étape, vous définirez votre modèle de données dans le fichier de schéma Prisma. Ce modèle de données sera ensuite mappé à la base de données avec Prisma Migrate , qui générera et enverra les instructions SQL pour créer les tables qui correspondent à votre modèle de données. Puisque vous créez une application de gestion d'affectation des apprenants dans des cohortes et d’attribution des machines
, les principales entités de l'application seront apprenants,cohortes,sessions et machines.

Prisma utilise son propre langage de modélisation de données pour définir la forme des données de votre application.
Maintenant, ajoutez-y les définitions de modèle suivantes. Vous pouvez placer les modèles en bas du fichier, juste après le generator client bloc :

// votre fichier schema.prisma,


// Modèle pour la table Ordinateur
model Ordinateur {
  tag        String      @id @default(cuid()) // Identifiant unique de l'ordinateur
  modele     String      // Modèle de l'ordinateur
  fabriquant String? // Fabriquant de l'ordinateur
  Apprenant  Apprenant[]
}

// Modèle pour la table Session
model Session {
  id      String    @id @default(cuid()) // Identifiant unique de la session
  annee   Int // Année de la session
  type    String // Type de la session
  ville   String // Ville de la session
  Cohorte Cohorte[]
}

// Modèle pour la table Cohorte
model Cohorte {
  code        String      @id // Code unique de la cohorte
  description String // Description de la cohorte
  idSession   String      @map("id_session") // Identifiant de la session associée
  session     Session     @relation(fields: [idSession], references: [id]) // Relation avec la table Session
  Apprenant   Apprenant[]
}

// Modèle pour la table Apprenant
model Apprenant {
  matricule     String     @id @default(cuid()) // Matricule unique de l'apprenant
  prenom        String // Prénom de l'apprenant
  nom           String // Nom de l'apprenant
  postnom       String? // Postnom de l'apprenant
  dateNaissance DateTime? // Date de naissance de l'apprenant
  adresse       String // Adresse de l'apprenant
  email         String // Adresse email de l'apprenant
  telephone     String // Numéro de téléphone de l'apprenant
  tagOrdinateur String     @map("tag_ordinateur") // Tag de l'ordinateur attribué
  codeCohorte   String     @map("code_cohorte") // Code de la cohorte associée
  ordinateur    Ordinateur @relation(fields: [tagOrdinateur], references: [tag]) // Relation avec la table Ordinateur
  cohorte       Cohorte    @relation(fields: [codeCohorte], references: [code]) // Relation avec la table Cohorte
}

Une fois ces modèles en place, vous pouvez désormais créer les tables correspondantes dans la base de données à l'aide de Prisma Migrate. Dans votre terminal, exécutez la commande suivante :

npx prisma migrate dev --name init

Cette commande crée une nouvelle migration SQL sur votre système de fichiers et l'envoie à la base de données. L' --name init option fournie à la commande spécifie le nom de la migration et sera utilisée pour nommer le dossier de migration créé sur votre système de fichiers.

Vous pouvez également personnaliser le fichier de migration SQL généré si vous ajoutez l' --create-onlyoption à la prisma migrate dev commande ; par exemple, vous pouvez configurer un déclencheur ou utiliser d'autres fonctionnalités de la base de données sous-jacente.

Au cours de cette étape, vous avez défini votre modèle de données dans votre schéma Prisma et créé les tables de bases de données respectives avec Prisma Migrate. À l'étape suivante, vous installerez Prisma Client dans votre projet afin de pouvoir interroger la base de données.

Mais attendez, il y a plus ! Explorons les requêtes du client Prisma dans un petit script. C'est l'occasion de se familiariser avec les différentes façons d'interagir avec notre base de données. 🤖

Prisma Client est un générateur de requêtes généré automatiquement et de type sécurisé que vous pouvez utiliser pour lire et écrire par programme des données dans une base de données à partir d'une application Node.js ou TypeScript. Vous l'utiliserez pour accéder à la base de données au sein de vos routes API REST, en remplaçant les ORM traditionnels, les requêtes SQL simples, les couches d'accès aux données personnalisées ou toute autre méthode de communication avec une base de données.

Dans cette étape, vous installerez Prisma Client et vous familiariserez avec les requêtes que vous pouvez envoyer avec. Avant d'implémenter les routes pour votre API REST dans les étapes suivantes, vous explorerez d'abord certaines des requêtes du client Prisma dans un script simple et exécutable.

Tout d'abord, installez Prisma Client dans votre dossier de projet avec le npm package Prisma Client :

npm install @prisma/client

Ensuite, créez un nouveau répertoire appelé src qui contiendra vos fichiers sources :

mkdir src

Tout d'abord, nous créons un nouveau fichier index.ts dans notre répertoire src. C'est comme ouvrir un nouveau chapitre dans notre aventure de codage. 📖
Ensuite, nous importons le constructeur PrismaClient depuis le package @prisma/client que nous avons préalablement installé. C'est comme inviter notre meilleur ami Prisma à rejoindre la fête ! 🥳
Après ça, nous instancions PrismaClient en appelant son constructeur et en obtenant une instance que nous appelons prisma. C'est notre nouvel assistant personnel qui nous aidera à communiquer avec la base de données. 🤖
Maintenant, la partie amusante commence ! Nous définissons une fonction asynchrone appelée main. C'est comme préparer une scène de théâtre où nous allons faire nos performances Prisma Client. 🎭
À l'intérieur de cette fonction, nous ajouterons nos requêtes Prisma Client. Chaque requête est comme un nouvel acte de notre pièce, où nous interagissons avec la base de données de différentes manières. 🎬
Après avoir préparé notre fonction main, nous l'appelons ! Mais attention, nous devons être prêts à gérer les exceptions potentielles. C'est comme avoir un filet de sécurité pour éviter les chutes pendant notre spectacle. 🤸‍♂️
Enfin, nous nous assurons que Prisma Client ferme correctement toutes les connexions de base de données ouvertes avec prisma.$disconnect(). C'est comme ranger notre scène de théâtre après une performance réussie. 🧹

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main() {
  // ... vos requêtes Prisma Client iront ici
}

main()
  .catch((e) => console.error(e))
  .finally(async () => await prisma.$disconnect())

Passons aux choses sérieuses avec Prisma Client ! 💪 Laissez-moi vous guider à travers ce code

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function main() {

// Créons une nouvelle session !
const session=await prisma.session.create({
    data:{
        ville:"Goma",
        annee:2024,
        type:"presentiel"

    }
})
// Créons une nouvelle cohorte et associons la a la session !
const cohorte=await prisma.cohorte.create({
    data:{
        session:{connect:{id:session.id}},
        code:"A2024",
        description:"Description de la cohorte"
    }
})

// Créons un ordinateur !
const ordinateur=await prisma.ordinateur.create({
    data:{
        modele:"EliteBook",
        fabriquant:'Hp',
        tag:"Ehp1"
    }
})

  // Créons un nouvel apprenant nommé Alice !
  const nouvelApprenant = await prisma.apprenant.create({
    data: {
        codeCohorte:cohorte.code,
        tagOrdinateur:ordinateur.tag,
        prenom: 'Alice',
        nom: 'Merveille',
        email: 'alice@kadeacademy.co',
        adresse:"Goma,du lac n°23",
        telephone:"+243977962085",


    },
  })
  console.log('Nouvel apprenant créé : ', nouvelApprenant)

  // Récupérons tous les apprenants inscrits !
  const tousLesApprenants = await prisma.apprenant.findMany({
    include: { cohorte:{
        include:{
            session:true
        }
    },ordinateur:true }, // Inclure les détails de la cohorte pour chaque apprenant
  })
  console.log('Tous les apprenants : ')
  console.dir(tousLesApprenants, { depth: null })
}

main()
  .catch((e) => console.error(e)) // Si une erreur se produit, on l'affiche
  .finally(async () => await prisma.$disconnect()) // On ferme la connexion à la base de données

Dans ce code amusant, nous utilisons deux requêtes Prisma Client :

create : Nous créons un nouvel enregistrement pour un apprenant nommé Alice. 👩‍🎓 Et bien sûr, nous l'inscrivons dans une cohorte en utilisant une requête de liaison,cohorte est déjà lier a la session. C'est comme rejoindre une nouvelle famille d'apprenants enthousiastes !
findMany : Nous récupérons tous les apprenants existants dans la base de données. 🏫 Mais attendez, il y a plus ! Nous incluons également les détails de la cohorte pour chaque apprenant, comme si nous demandions à chacun d'eux de nous présenter sa famille d'apprentissage.

Après avoir exécuté ce code, nous verrons apparaître notre nouvelle recrue Alice, ainsi que tous les autres apprenants inscrits, prêts à conquérir le monde du code ! 💻🎉
N'oubliez pas de fermer proprement la connexion à la base de données une fois que nous avons terminé.🧹

Exécutez maintenant le script avec la commande suivante :

npx ts-node src/index.ts

Vous avez maintenant utilisé Prisma Client pour lire et écrire des données dans votre base de données. Dans les étapes restantes, vous allez implémenter les routes pour un exemple d’API REST.

Et pour couronner le tout, implémentons notre première route API REST avec Express. Comme ça, on pourra accéder à nos données depuis le monde extérieur. 🌍 Ajoutons quelques routes supplémentaires pour créer, lire, mettre à jour et supprimer des données, et notre API sera prête à conquérir le monde ! 🏆

Dans cette étape, vous installerez Express dans votre application. Express est un framework Web populaire pour Node.js que vous utiliserez pour implémenter vos routes API REST dans ce projet. La première route que vous implémenterez vous permettra de récupérer tous les utilisateurs de l'API à l'aide d'une requête GET. Les données de l'apprenant seront récupérées de la base de données à l'aide de Prisma Client.

Installez Express avec la commande suivante :

npm install express

Puisque vous utilisez TypeScript, vous souhaiterez également installer les types respectifs en tant que dépendances de développement. Exécutez la commande suivante pour ce faire :

npm install @types/express --save-dev

Supprimez maintenant tout le code index.tset remplacez-le par ce qui suit pour démarrer votre API REST :

import { PrismaClient } from '@prisma/client'
import express from 'express'

const prisma = new PrismaClient()
const app = express()

app.use(express.json())

// ... vos routes API REST iront ici

app.listen(3000, () =>
  console.log('REST API server ready at: http://localhost:3000'),
)

Oh, je vois que nous entrons dans les détails techniques ! 🤓 Laissez-moi vous guider à travers ce code avec un peu d'humour et de légèreté. 😊
Tout d'abord, nous importons PrismaClient et express depuis leurs packages npm respectifs. C'est comme inviter deux super-héros à notre fête de codage ! 🦸‍♂️🦸‍♀️
Ensuite, nous instancions PrismaClient en appelant son constructeur, ce qui nous donne une instance nommée prisma. C'est notre nouveau meilleur ami qui va nous aider à communiquer avec la base de données. 🥳
Après ça, nous créons notre application Express en appelant express(). C'est comme avoir un serveur Web personnel qui est prêt à recevoir des invités (requêtes HTTP) à tout moment. 🏡
Mais attendez, il y a plus ! Nous ajoutons le middleware express.json() pour nous assurer que notre serveur puisse comprendre les données JSON correctement. C'est comme apprendre une nouvelle langue pour pouvoir communiquer avec les autres. 🌐
Et enfin, nous démarrons notre serveur sur le port 3000. C'est comme ouvrir les portes de notre maison et dire : "Entrez, entrez, les amis ! Le serveur est prêt à vous accueillir !" 🚪
Maintenant, vous avez une meilleure compréhension de ce code, n'est-ce pas ? 😄 Avec un peu d'humour et d'analogies amusantes, même les concepts techniques peuvent sembler plus légers et accessibles. 🎉

Oh,👨‍💻 Vous voulez organiser votre code de manière plus propre et structurée ? J'adore ce genre de défi ! 💪
Tout d'abord, créons un dossier src/modules/ où nous allons ranger tous nos modules. C'est comme une grande armoire où on range nos affaires par catégorie. 🧰 À l'intérieur, on va créer des sous-dossiers pour apprenant, cohorte, session et ordinateur. Chacun aura son propre espace bien organisé.
Concentrons-nous sur le module apprenant pour commencer. À l'intérieur de ce dossier, créons deux autres sous-dossiers : controller et route. Le dossier controller sera notre quartier général pour gérer toutes les opérations liées aux apprenants. 🏢 Quant au dossier route, c'est là que nous définirons les chemins par lesquels les gens pourront accéder à nos fonctionnalités. 🗺️
Maintenant, dans le dossier controller, créons un fichier apprenant.controller.ts. C'est ici que nous allons coder toutes les fonctions pour interagir avec notre base de données PostgreSQL à l'aide de Prisma. 💾 Voici un exemple de code que nous pourrions y mettre :


import { prisma } from "../index";
import { Request, Response } from 'express';

const createApprenant = async (req: Request, res: Response) => {
  try {
    const { prenom, nom, postnom, dateNaissance, adresse, email, telephone, tagOrdinateur, codeCohorte } = req.body;
    const nouveauApprenant = await prisma.apprenant.create({
      data: {
        prenom,
        nom,
        postnom,
        dateNaissance,
        adresse,
        email,
        telephone,
        tagOrdinateur,
        codeCohorte
      }
    });
    res.status(200).json(nouveauApprenant);
  } catch (e) {
    res.status(500).json({ error: e });
  }
};

const findMany=async(req:Request,res:Response)=>{ 
  const apprenants= await prisma.apprenant.findMany({
    include:{
        cohorte:{
            include:{
                session:true
            }
        },
        ordinateur:true
    }
})
res.status(200).json(apprenants)
}
// Ajoutez d'autres fonctions pour lire, mettre à jour et supprimer des apprenants ici

export default {
  createApprenant,
  findMany
  // ... autres fonctions
};

Ensuite, dans le dossier route, créons un fichier apprenant.route.ts. C'est ici que nous définirons les routes pour accéder aux fonctionnalités de notre module apprenant. 🛣️ Voici un exemple :

import express from "express";
import apprenantController from "../controllers/apprenant.controller";

const ApprenantRouter = express.Router();

ApprenantRouter.get('/',ApprenantController.findMany)
ApprenantRouter.post("/create", apprenantController.createApprenant);
// Ajoutez d'autres routes pour lire, mettre à jour et supprimer des apprenants ici

export default ApprenantRouter;

Et voilà ! Nous avons maintenant une structure bien organisée pour notre module apprenant. 🏡 Vous pouvez répéter ces étapes pour les autres modules comme cohorte, session et ordinateur. Avec cette approche, votre code sera plus facile à maintenir et à étendre à l'avenir. 🌳
N'hésitez pas à ajouter vos propres touches personnelles et à expérimenter. Le plus important, c'est de s'amuser et d'apprendre en cours de route. 🎉
et maintenant dans modifions notre index.ts

import express from "express";

import PostRouter from "./routes/post.route";
import { PrismaClient } from '@prisma/client'

export const prisma = new PrismaClient()

const app = express();
const port = 3000;

async function main() {
  app.use(express.json());

  // Enregistrer les routes API
  app.use("/api/v1/apprenant", ApprenantRouter);

  // Capturer les routes non enregistrés  
app.all("*", (req, res) => {
    res.status(404).json({ error: `Route ${req.originalUrl} not found` });
  });

  app.listen(port, () => {
    console.log(`Server is listening on port ${port}`);
  });
}

main()
  .then(async () => {
    await prisma.$connect();
  })
  .catch(async (e) => {
    console.error(e);
    await prisma.$disconnect();
    process.exit(1);
  });

Pour tester la route, vous pouvez utiliser la curl commande suivante dans votre deuxième session de terminal :

curl http://localhost:3000/api/v1/apprenant

Alors, qu'est-ce que vous en dites ? Prêt à relever le défi et à créer une API REST de ouf ? 💪 Avec Prisma, PostgreSQL et Express dans votre arsenal, rien ne pourra vous arrêter ! 🎉

CONTENEUR VS MACHINE VIRTUELLE

samuel mbabhazi — Fri, 02 Jun 2023 14:29:23 +0000

Salut toi ! Aujourd'hui on va parler de conteneurs et de machines virtuelles 🚀👨‍💻

Introduction

Les conteneurs et les machines virtuelles sont deux technologies de virtualisation qui permettent d'exécuter des applications dans des environnements isolés.

Conteneurs

Les conteneurs sont comme des bulles d'isolement pour tes applications, mais ils partagent le même système d'exploitation que ton ordinateur. Cela signifie que tu peux en exécuter plusieurs sans craindre de conflits entre les applications. Les avantages sont nombreux : ils sont portables, légers et isolés ! 📦🏃‍♂️💻

Avantages des conteneurs

Portabilité : Les conteneurs sont portables, ce qui signifie que vous pouvez facilement les déplacer entre différents environnements de développement, de test et de production. Cela permet de simplifier le processus de développement et de déploiement des applications.
Isolation : Les conteneurs offrent une isolation d'application, ce qui signifie que vous pouvez exécuter plusieurs applications sur un même système d'exploitation sans avoir à vous soucier des conflits entre les applications.
Léger : Les conteneurs sont plus légers que les machines virtuelles, ce qui signifie qu'ils sont plus rapides à déployer et à utiliser.

Inconvénients des conteneurs

Sécurité : Les conteneurs partagent le même noyau de système d'exploitation, ce qui peut créer des problèmes de sécurité si un conteneur est compromis.
Complexité: Le développement et le déploiement de conteneurs peuvent être plus complexes que l'utilisation de machines virtuelles ou de serveurs physiques traditionnels.

Cas d'utilisation des conteneurs

Les conteneurs sont souvent utilisés pour créer des environnements de développement et de production reproductibles, facilement déployables sur différentes plateformes. Les conteneurs peuvent être utilisés pour exécuter des applications web, des bases de données, des serveurs d'applications, etc.

Machines virtuelles

Les machines virtuelles, quant à elles, sont comme des ordinateurs dans ton ordinateur ! Elles ont leur propre système d'exploitation et sont utilisées pour isoler complètement tes environnements de production. Elles sont plus lourdes que les conteneurs, mais peuvent exécuter différents systèmes d'exploitation sur le même ordinateur. 💻💪

Avantages des machines virtuelles

Isolation complète : Les machines virtuelles offrent une isolation complète, ce qui signifie que vous pouvez créer des environnements de production qui sont complètement isolés les uns des autres.
Flexibilité : Les machines virtuelles peuvent être utilisées pour exécuter différentes configurations de système d'exploitation et de matériel sur un même ordinateur.

Inconvénients des machines virtuelles

Lourdeur : Les machines virtuelles sont plus lourdes en termes de ressources que les conteneurs, ce qui les rend moins flexibles et plus coûteuses à gérer.

Cas d'utilisation des machines virtuelles

Les machines virtuelles sont souvent utilisées pour consolider des serveurs physiques, pour tester des environnements de production, ou pour exécuter plusieurs systèmes d'exploitation sur un même ordinateur.

Illustration du fonctionnement

Conclusion

En résumé, les machines virtuelles sont utilisées pour isoler complètement tes environnements de production, tandis que les conteneurs sont utilisés pour des environnements de développement et de production reproductibles. Le choix dépend des besoins de l'application et de l'environnement de déploiement. 🤔💭

Et voilà, tu sais tout ! N'hésite pas à nous dire ce que tu préfères entre les deux 🤔😉

AUTHENTIFICATION AVEC NODE JS/EXPRESS JS

samuel mbabhazi — Tue, 01 Nov 2022 06:54:23 +0000

APERÇU

C’est quoi une authentification ?
Authentification vs Autorisation
Pour quoi une Authentification ?
Implémentation d’une authentification dans une application node js

C’est quoi une authentification

Authentification est le processus d'identification des utilisateurs en acquérant des informations d'identification telles que l'e-mail, le mot de passe et les jetons.

Authentification vs Autorisation

L'authentification est le processus de vérification qu'un utilisateur est bien celui qu'il prétend être, tandis que l'autorisation est le processus de détermination si un utilisateur authentifié a accès à certaines parties de ton application.
exemple d'autorisation est le contenu basé sur un abonnement, votre authentification peut être effectuée en vous connectant au site Web, mais vous ne serez pas autorisé à accéder au contenu tant que vous ne vous serez pas abonné.

Pour quoi une Authentification

L'authentification de l'utilisateur est cruciale pour protéger les informations sensibles.

Implémentation d’une authentification dans une application node js

Dans le cadre d'une authentification qui implique la communication d'identifiant et de mot de passe entre le client et le serveur, il est nécessaire d'utiliser une communication chiffrée en mettant en place le protocole HTTPS.
La création d'un serveur HTTPS avec Node.js reste très similaire à celle d'un serveur HTTP. La différence se situe au niveau de l'ajout, au moment de la création du serveur, des informations nécessaires au chiffrement des communications. Il faut préciser les certificats utilisés.
Les certificats doivent être obtenus à partir d'une autorité de certification, réputée fiable. Let's Encrypt est une autorité de certification qui permet d'obtenir un certificatv gratuitement. Il est également possible d'"auto-signer" ses propres certificats (mais l'utilisation de ces certificats provoque alors une alerte de sécurité sur les navigateurs).
Pour créer un serveur HTTPS, il faut donc préciser au serveur la clef privée et le certificat associé. Le reste ne change pas par rapport à la version HTTP. On procède comme indiqué dans le code ci-dessous. On peut noter qu'il est nécessaire d'utiliser une lecture synchrone des fichiers des certificats, car il n'est pas possible de créer le serveur, et donc d'exécuter les lignes qui suivent la lecture, avant d'avoir terminé la lecture de ces fichiers.

// fichier ./secured-server.js
const https = require('https');
const fs = require('fs';

// chargement des certificats
const privateKey  = fs.readFileSync('./certs/certificat.key', 'utf8');
const certificate = fs.readFileSync('./certs/certificat.crt', 'utf8');

// création du serveur HTTPS
const credentials = {
                      key : privateKey,
                      cert : certificate
                    };
const securedHttpsServer = https.createServer(
  credentials,
  (request, response) => {
    // création et envoi de la réponse
    response.writeHead(200, {"Content-Type": "text/html"});
    response.write('<h1>HTTPS secured server</h1>');
      response.end();
  }
);

securedHttpsServer.listen(8081);

Attention, pour accéder au serveur HTTPS, dans le navigateur, il faut explicitement mentionner le protocole utiliser et donc indiquer https://localhost:8081. Lors du premier accès, il faudra passer outre l'alerte de sécurité qui signale que le certificat n'est pas reconnu, car auto-signé.

Authentification basique

L'authentification basique permet de facilement mettre en place un contrôle d'accès basé sur un nom d'utilisateur et un mot de passe. Ce mécanisme est sans doute le plus simple possible de ce type. L'authentification basique n'utilise pas de cookie ni de mécanisme de session. Les informations d'authentification sont transmises dans l'entête HTTP dans un champ de la forme "Authorization: Basic credentials". "credentials" contient une chaîne obtenue par concaténation du nom d'utilisateur et du mot de passe séparés par ":". Cette chaîne subit un simple encodage Base64. Cette donnée n'est donc par cryptée, il faut donc utiliser l'authentification basique en combinaison avec HTTPS. Ces informations ne sont pas envoyées avec chaque requête et sont donc mises en cache par le navigateur (jusqu'à sa fermeture).
Le code mis à disposition contient un serveur simple, construit à l'aide d'Express. A titre purement illustratif.

Nous aurons a utiliser pug comme moteur de template
pour plus d'information https://pugjs.org/api/getting-started.htm

// fichier ./routes/index.js
const express = require('express');
const router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

module.exports = router;

//fichier ./routes/protect.js
const express = require('express');
const router = express.Router();


/* GET protect page. */
router.get('/', function(req, res, next) {
  res.render('protect', { title: 'Express' });
});

module.exports = router;

Le routeur gère deux chemins : "/" et "/protect". On souhaite que le premier soit accessible librement alors que le deuxieme soit protégé par une authentification basique.

Mise en place du middleware d'authentification
Le contrôle d'accès par authentification basique est géré à l'aide d'un middleware. Le principe est que les requêtes qui portent sur des chemins doivent passer par ce middleware qui soit demande à l'utilisateur de s'authentifié, lors d'un premier accès, soit vérifie que l'accès a déjà été accordé, si l'utilisateur s'est déjà authentifié.

Le middleware est défini dans le dossier ./middleware/authentifcation.js. Comme dit précédemment, l'authentification basique se base sur des informations positionnées dans la propriété "authorization" de l'entête ("header") de la requête. Il faut donc commencer par récupérer la valeur de cette propriété :

// fichier ./middleware/authentifcation.js
const authentication = (req, res, next) => {
  const authheader = req.headers.authorization;
  (...)

Deux situations doivent alors être envisagées, selon la présence ou non de cette propriété. Si elle n'est pas présente, il faut alors envoyer en réponse une demande d'authentification en précisant l'entête WWW-Authenticate. Cette réponse est envoyée avec le statut 401 qui correspond à un accès refusé ("unauthorized").

// fichier ./middleware/authentifcation.js
const authentication = (req, res, next) => {
  (...)
  if (!authheader) {
    res.setHeader('WWW-Authenticate', 'Basic realm="mon site à moi", charset="UTF-8"');
    res.status(401).end();
  }
  (...)

Suite à cette réponse, le navigateur demande à l'utilisateur de s'authentifier en faisant apparaitre une fenêtre privée dédiée. Les informations que fournit l'utilisateur servent à alimenter l'entête "authentication" qui n'était pas correct.
Si la propriété d'authentification est présente dans l'entête, il faut vérifier si les informations qu'elle contient sont correctes. Pour cela il faut extraire la partie credentials de la propriété "authorization", en en supprimant la partie Basic située au début, décoder le Base64 et séparer le nom d'utilisateur du mot de passe (séparés par :). On peut ensuite vérifier ces informations avec les valeurs attrendus (dans notre cas ces valeurs sont définies dans ./config/secret.js). Si elles sont conformes on autorise l'accès en "laissant passer" la requête qui est transmise au middleware suivant par un appel à next. Dans le cas contraire, une nouvelle demande d'authentification est envoyée, on procède alors exactement de la même manière que précédemment.

// fichier ./middleware/authentication.js
const secret = require ('../config/secret.js');

const authentication = (req, res, next) => {
  (...)
  else {
    /*extraire la partie credentials de la propriété "authorization", en en supprimant la partie Basic située au début, décoder le Base64 */
    const credentials = new Buffer.from(authheader.split(' ')[1],'base64').toString();
    const [user,password] = credentials.split(':');
    if (user === secret.user && password === secret.password) {
        // let's continue
        next()
    } else {
      // mauvais user name ou password
      res.setHeader('WWW-Authenticate', 'Basic realm="mon site à moi", charset="UTF-8"');
      res.status(401).end();
    }
  }

En synthèse, voici le code complet de ce middleware :

// fichier ./middleware/authentifcation.js
const secret =require('../config/secret.js');

const authentification = (req, res, next) => {
    const authheader = req.headers.authorization;
    if (!authheader) {
        res.setHeader('WWW-Authenticate', 'Basic realm="mon site à moi", charset="UTF-8"');
        res.status(401).end();
    }
    else {
      /*extraire la partie credentials de la propriété "authorization", en en supprimant la partie Basic située au début, décoder le Base64 */
      const credentials  = new Buffer.from(authheader.split(' ')[1],'base64').toString();
      const [user,password] = credentials.split(':');
      if (user === secret.user && password === secret.password) {
          // let's continue
          next();
      } else {
        // mauvais user name ou password
        res.setHeader('WWW-Authenticate', 'Basic realm="mon site à moi", charset="UTF-8"');
        res.status(401).end();
      }
    }
}

module.exports = authentification;

Dans, cet exemple, pour des raisons de simplicité, l'identifiant et le mot de passe sont fixés de manière unique dans le fichier /config/secret.js. On peut envisager qu'à chaque tentative d'authentification, dans le script /middleware/authentifcation.js, la fonction authentication vérifie si le couple (identifiant, mot de passe) reçu correspond à un utilisateur enregistré dans une base de données.

Exploitation du middleware d'authentification

Le middleware d'authentification doit maintenant être installé. Deux situations sont envisageables : soit on souhaite protéger l'ensemble du site, soit certaines pages seulement doivent être protégées.

Dans le premier cas, le middleware doit être installé globalement. Cela peut être réalisé au niveau du fichier ./app.js en positionnant ce middleware avant tous les autres, ce qui impose le contrôle d'accès avant tout autre traitement de la requête. Comme nous l'avons vu dans la définition de notre middleware, seule une authentification réussie permet d'accéder aux autres middlewares installés à la suite, grâce à l'appel à next.

// fichier ./app.js
(...)
const app = express();

const authentification = require('./middlewares/authentifcation.js');
app.use(authentication);
(...)

Dans le second cas, on va préciser l'utilisation du middleware d'authentification pour chacun des chemins (ou routes) qui doit être contrôlé. On utilise pour cela une possibilité que nous n'avons pas encore explorée. Il s'agit du fait que la méthode use (que ce soit au niveau de l'application ou d'un routeur) peut accepter plusieurs fonctions middlewares qui sont examinées séquentiellement. Un appel à next au sein d'une telle fonction transmet la requête à la fonction suivante s'il y en a une (et au middleware suivant sinon).

Nous l'appiquons ici, au niveau du routeur ./routes/index.js pour mettre en place un contrôle d'accès sur les chemins "/protect" uniquement. Il suffit pour ces routes de préciser avant la fonction contrôleur qui gère leur logique (par facilité c'est la même fonction ici) que le middleware d'authentification doit être utilisé :

// fichier ./app.js
const express = require("express");
const indexRouter = require("./routes/index");
const protectRouter = require("./routes/protect");
const authentification = require("./middleware/authentifcation.js");
var app = express();

// view engine setup
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "pug");

app.use("/", indexRouter);
app.use("/protect",authentification, protectRouter);
app.listen(9000,()=>{
  console.log("active au port 9000");
})
module.exports = app;

On peut alors vérifier que l'on a accès sans contrôle a URL http://localhost:9000/ mais qu'il faut s'authentifier pour (http://localhost:9000/protect).

Pour ne pas avoir à fermer le navigateur, si l'on a démarré le serveur avec nodemon, il suffit de modifier les informations d'authentification dans ./config/secret.js pour déclencher à nouveau le processus d'authentification.