R4.01 - Services web (nodejs)

Projet : 

Description du Projet : Authentification et Gestion des Sessions avec Vue.js et Node.js

Contexte :

Ce projet vise à explorer différentes stratégies d’authentification et de gestion des sessions à travers trois mini-projets distincts utilisant Vue.js pour le frontend et Node.js pour le backend.

Ce projet peut être réalisé individuellement ou en groupe de deux. Il doit être transféré vers le dépôt Github des étudiants qui y travaillent.

Mini-projet 1 : Authentification avec Passport-Local et Session

Dans ce premier mini-projet, nous mettons en place une authentification basée sur Passport-Local avec une gestion des sessions via cookies.

Technologies utilisées :

• Backend : Node.js avec Express.js et Passport.js
• Frontend : Vue.js
• Base de données : PostgreSQL ou MySQL avec Sequelize ORM
• Session : Gestion des cookies et sessions

Fonctionnalités :

• Inscription des utilisateurs
• Connexion avec vérification des identifiants
• Page d’accueil sécurisée après connexion
• Stockage des sessions dans des cookies

Mini-projet 2 : Authentification avec JWT (JSON Web Token)

Ce second mini-projet repose sur une authentification basée sur JWT, où le client (Vue.js) doit gérer le stockage et la gestion des tokens JWT.

Technologies utilisées :

• Backend : Node.js avec Express.js et JWT
• Frontend : Vue.js
• Base de données : PostgreSQL ou MySQL avec Sequelize ORM
• Stockage du token : LocalStorage ou SessionStorage

Fonctionnalités :

• Inscription des utilisateurs
• Connexion avec génération et validation de JWT
• Page d’accueil sécurisée avec JWT
• Gestion du token côté client

Mini-projet 3 : Authentification OAuth2 avec Google et Chat en temps réel

Ce troisième mini-projet implémente une authentification OAuth2 via Google et ajoute un système de messagerie instantanée en temps réel entre utilisateurs connectés.

Technologies utilisées :

• Backend : Node.js avec Express.js et Passport.js (Google Strategy)
• Frontend : Vue.js
• Base de données : MongoDB avec Mongoose
• Mise en cache : Redis
• Websockets : Socket.io

Fonctionnalités :

• Authentification OAuth2 via Google + un autre
• Stockage des utilisateurs et tokens dans MongoDB
• Mise en cache des sessions avec Redis
• Interface de chat entre utilisateurs connectés
• Stockage de l’historique des messages dans MongoDB

Objectifs pédagogiques :

• Comprendre les différentes méthodes d’authentification
• Maîtriser la gestion des sessions via cookies et JWT
• Implémenter une authentification OAuth2 avec un fournisseur tiers
• Mettre en place un système de chat en temps réel
• Optimiser la gestion des sessions avec Redis

🔍 Soumission et Évaluation du Projet

📌 Dépôt des Travaux

Chaque étudiant (même en cas de travail en groupe) doit impérativement soumettre son projet sur Moodle dans le cours BUT_INFO_S4 R4.01 services web / Mini projets (Web + MongoDB) en insérant :

• Le lien du dépôt GitHub du projet.
• Les vidéos démontrant les différentes fonctionnalités demandées.

Chaque groupe ou étudiant doit créer un repository GitHub spécifique pour ce projet avec les éléments suivants :

1. Un fichier README.md détaillé qui mentionne :
   • Les noms des étudiants du groupe.
   • Une description claire du projet et de son organisation.
   • Les instructions pour exécuter le projet (prérequis, commandes, etc.).
2. Une structure organisée du dépôt :
   • Un dossier principal contenant trois sous-dépôts pour chaque mini-projet.
   • Chaque sous-dépôt doit inclure un dossier backend et frontend.

🚨 À noter :

• Ne pas inclure le dossier node_modules dans le dépôt (penser à .gitignore).
• Ne pas committer d’informations sensibles (clés secrètes Google, fichiers de configuration contenant des mots de passe, etc.).

🎥 Vidéo de démonstration obligatoire

Pour chaque mini-projet, une vidéo doit être fournie en plus du code GitHub (il peut être téléchargé sur Moodle).

Mini-projet 1 : Authentification avec Passport-Local et Session

📌 Contenu de la vidéo :

• Démonstration de l’inscription d’un utilisateur.
• Connexion et déconnexion.
• Vérification que l’utilisateur reste connecté même après la fermeture du navigateur.
• Affichage via l’Inspecteur du navigateur (Chrome DevTools) pour montrer où la session est sauvegardée (CookieStore par exemple).

Mini-projet 2 : Authentification avec JWT (JSON Web Token)

📌 Contenu de la vidéo :

• Démonstration de l’inscription et connexion d’un utilisateur.
• Vérification de la persistance de la connexion avec JWT.
• Affichage de l’endroit où le token JWT est stocké dans le frontend (LocalStorage, SessionStorage ou CookieStore).
• La démo Swagger est un plus.

Mini-projet 3 : Authentification OAuth2 avec Google et Chat en temps réel

📌 Contenu de la vidéo :

• Exploration de la base de données MongoDB (affichage des collections et documents créés).
• Démonstration du processus d’inscription et de connexion avec :
  • Un compte local (nom d’utilisateur et mot de passe).
  • Au moins deux fournisseurs OAuth2 (exemple : Google + un autre).
• Démonstration du système de chat en temps réel :
  • Échange de messages en live (entre utilisateurs connectés ou client-serveur).
  • Vérification de l’enregistrement de l’historique des messages dans MongoDB.
• Test de l’optimisation avec Redis :
  • Utilisation de Postman ou Swagger pour tester une route optimisée avec Redis.
  • Comparaison des temps de réponse avec et sans mise en cache.

⚠️ Originalité et Plagiat

🚨 Tout plagiat ou copie entre groupes sera sévèrement sanctionné.

• Deux projets ayant la même interface ou une ressemblance évidente seront pénalisés.
• Il est obligatoire que les vidéos montrent clairement le nom des étudiants dans l’interface du projet :
  • Le nom des étudiants doit apparaître en titre ou sous-titre dans l’HTML ou Swagger.
  • Il peut être affiché dans un coin de l’écran ou dans l’en-tête du site lors de l’enregistrement.
• Toute ressemblance trop forte avec un autre projet entraînera une pénalité sur la note finale.

🔍 Conseil : Personnalisez votre projet en modifiant l’interface utilisateur et en ajoutant des fonctionnalités supplémentaires pour éviter toute confusion.

ℹ️ Remarque pour les étudiants utilisant leur projet SAE

Les étudiants qui souhaitent utiliser leur projet SAE comme base pour ce projet ont deux options :

1️⃣ Créer trois sous-dossiers dans le dépôt GitHub, correspondant aux trois mini-projets (mini-projet 1, 2 et 3), où chaque dossier contiendra le code source adapté à la fonctionnalité demandée.

OU

2️⃣ Utiliser un seul dépôt pour le projet SAE, et intégrer toutes les fonctionnalités demandées dans le même projet. Dans ce cas :

• Aucun besoin de trois sous-dossiers.
• Il faudra soumettre trois vidéos distinctes, chacune démontrant les fonctionnalités de l’un des mini-projets.

💡 À retenir : L’organisation du projet doit être claire et explicite dans le README.md pour indiquer le choix adopté.

✅ Critères d’évaluation

Les projets seront évalués selon les critères suivants :