Open Source, portes ouvertes : conclusion du Hacktoberfest 4

Après quatre semaines consécutives de Hacktoberfest, j'ai enfin relevé le défi avec quatre PR approuvés. Je dois admettre que je me sentais assez nerveux au début de cet événement, car l'open source me semblait être quelque chose en dehors de ma zone de confort. Cependant, commencer par des problèmes plus petits m’a aidé à renforcer ma confiance et, assez rapidement, j’ai été motivé à rechercher des problèmes plus complexes à résoudre. Je pense qu'une partie de cette motivation est venue du fait que j'étais étudiant : contribuer à une communauté de développeurs m'a donné un sentiment d'expérience du monde réel.

Si vous souhaitez en savoir plus sur mon parcours Hacktoberfest, n'hésitez pas à consulter ma page personnelle, où j'ai enregistré mes réflexions après chaque PR. Mais sans plus tarder, plongeons-nous dans le PR de ma dernière semaine.

Présentation de Mikochi : un navigateur de fichiers distants minimaliste

Mikochi est un navigateur de fichiers distants léger et auto-hébergé, idéal pour les utilisateurs gérant des fichiers sur des serveurs privés ou NAS (Network Attached Storage). Cet outil permet aux utilisateurs de naviguer facilement dans des répertoires distants, d'effectuer des tâches de gestion de fichiers telles que le téléchargement, le renommage et la suppression de fichiers, et même de diffuser des fichiers multimédias directement sur des lecteurs comme VLC ou MPV.

Construit avec une interface Web moderne optimisée par JavaScript/Preact et un backend API dans Go/Gin, Mikochi offre une expérience transparente et réactive pour la navigation dans les fichiers à distance.

Ce sur quoi j'ai travaillé

Dans ce projet, j'ai abordé un problème lié à l'amélioration du contrôle et de la sécurité des utilisateurs dans Mikochi, j'ai implémenté une fonctionnalité de déconnexion accessible via un bouton "Déconnexion" dans la barre de navigation de l'application. Cette fonctionnalité a été conçue pour déconnecter les utilisateurs en toute sécurité en effaçant les jetons d'authentification et en les redirigeant vers la page de connexion. Sur le frontend, le bouton de déconnexion déclenche un appel d'API vers un nouveau point de terminaison /logout, efface le JWT du stockage local et actualise ou redirige la page pour garantir que les utilisateurs sont complètement déconnectés. Sur le backend, j'ai construit une logique pour gérer le point de terminaison /logout en ajoutant l'ID du jeton à une liste de jetons invalidés. Cette liste est vérifiée dans le middleware d'authentification JWT, garantissant que toute demande avec un jeton invalidé est rejetée avec une réponse 403. Cet ajout a amélioré la sécurité de Mikochi, aidant les utilisateurs à contrôler les sessions actives et à protéger leurs comptes sur les appareils partagés ou publics.

Solution

Dans ce PR, j'ai implémenté une fonctionnalité de déconnexion sécurisée pour Mikochi, répondant aux exigences du frontend et du backend pour améliorer le contrôle de la session utilisateur. Sur le frontend, j'ai créé un composant Logout pour gérer l'appel API à /api/logout et effacer le JWT du stockage local. Lorsque l'utilisateur clique sur « Se déconnecter », le JWT est supprimé, une requête POST est envoyée au backend pour valider la déconnexion et la page redirige l'utilisateur vers l'écran de connexion principal à l'aide de window.location.href. Sur le backend, j'ai modifié la génération JWT dans generateAuthToken() pour inclure une propriété ID, permettant d'invalider efficacement les jetons. J'ai ensuite ajouté un gestionnaire dans backend/auth/handlers.go pour gérer les demandes de déconnexion en ajoutant l'ID JWT à une liste de jetons invalidés. Le middleware JWT vérifie chaque requête, refusant l'accès si le jeton a été invalidé et renvoyant une réponse 403. Pour vérifier la fonctionnalité, j'ai effectué des tests manuels en réinsérant un jeton précédemment invalidé dans le stockage local après la déconnexion, en m'assurant que toute tentative de réutilisation échouait, sécurisant ainsi efficacement le processus de déconnexion.

Mes pensées

Pour moi, c'était un projet fascinant, mélangeant le développement backend et frontend en un seul projet. Le problème que j'ai abordé sur le frontend était relativement simple : créer un bouton de déconnexion, avec un peu de CSS pour améliorer son apparence. J'apprends React depuis un certain temps, donc même si j'avais besoin d'un bref rappel, cela m'a aidé à comprendre le code et les composants déjà présents dans la source.

Sur le backend, le propriétaire du projet avait conteneurisé le projet en utilisant Docker, ce qui m'était familier. Cependant, la partie la plus chronophage a été de travailler avec Go, le langage backend de ce projet. Je n'avais aucune expérience préalable avec Go, mais résoudre ce problème m'a donné l'opportunité de l'apprendre à un niveau fonctionnel, ce que j'ai trouvé assez enrichissant.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!