Travailler avec l'authentification GitHub OAuth

Bonjour à tous,

Dans cet article de blog, je discuterai de ma deuxième pull request (PR) dans le cadre de la série Release 0.3 pour ma mission. Ce PR poursuit mon travail sur le projet GitExplorer, auquel j'ai initialement contribué lors de l'événement Hacktoberfest. Pour le numéro de cette semaine, le responsable du projet a demandé l'implémentation de la fonctionnalité d'authentification GitHub.

Présentation de GitExplorer

GitExplorer est un projet visant à simplifier les interactions avec les référentiels GitHub. Si vous souhaitez en savoir plus sur le projet ou sur mes précédentes contributions, n'hésitez pas à consulter mon précédent article de blog pour ce référentiel.

Le problème spécifique que j'ai abordé cette fois était le manque d'authentification GitHub dans l'application. Cette limitation a empêché l'application de fournir des fonctionnalités personnalisées telles que des référentiels vedettes. Ma tâche consistait à implémenter une fonctionnalité d'authentification GitHub qui permet aux utilisateurs de se connecter et de se déconnecter à l'aide de leurs comptes GitHub. De plus, les utilisateurs pourraient mettre en vedette leurs référentiels favoris et récupérer une liste de tous leurs référentiels favoris d'un simple clic sur un bouton.

Défis : travailler sans cadre d'interface utilisateur

GitExplorer n'utilise aucun framework d'interface utilisateur moderne comme React. Au lieu de cela, il s'appuie uniquement sur JavaScript, CSS et HTML vanille. Bien que cette simplicité ait ses avantages, elle m'a obligé à consacrer plus de temps à ce problème car la base de code d'origine était axée sur le front-end. L'ajout de l'authentification GitHub et des fonctionnalités backend associées signifiait s'aventurer au-delà de la structure existante et mettre en œuvre une solution côté serveur.

Migration du projet et configuration du backend

Pour prendre en charge les nouvelles fonctionnalités, j'ai d'abord restructuré le projet. J'ai déplacé tout le code frontal existant dans un dossier public et créé un dossier backend pour héberger l'implémentation côté serveur. Pour le backend, j'ai choisi le framework Express car il s'intègre bien à Passport.js, une bibliothèque que j'ai utilisée pour gérer l'authentification GitHub.

Les étapes incluses :

• Configuration d'Express pour servir l'application.
• Configuration de Passport.js pour gérer l'authentification à l'aide de CLIENT_ID et CLIENT_SECRET, que j'ai stockés dans un fichier .env pour des raisons de sécurité.
• Ajout d'itinéraires pour gérer les actions des utilisateurs telles que l'activation et la suppression des référentiels.

Intégration de l'API GitHub

Après avoir configuré le backend, j'ai intégré l'API de GitHub pour prendre en charge les fonctionnalités requises. Cela comprenait :

• Permettre aux utilisateurs de se connecter via leurs comptes GitHub.
• Ajout de la possibilité d'ajouter et de supprimer des référentiels directement depuis l'application.
• Récupérer une liste des référentiels favoris de l'utilisateur et les afficher sur une page dédiée, accessible via un bouton sur l'interface utilisateur.

Écriture de code modulaire et sec

Au-delà de l'implémentation des fonctionnalités, je me suis concentré sur l'amélioration de la qualité du code en appliquant le principe DRY (Don't Repeat Yourself). J'ai modularisé le code en séparant les fonctions en composants réutilisables, ce qui facilite sa maintenance et son extension future.

Leçons apprises et perspectives d’avenir

C'était ma première expérience de travail avec l'authentification GitHub, et cela m'a fourni des informations précieuses sur l'intégration d'API tierces et la gestion des services backend. Même si le projet paraissait simple au départ, travailler à la fois sur le front-end et le back-end m'a permis de mieux comprendre le développement full-stack.

GitExplorer a encore de nombreuses questions intéressantes ouvertes à la collaboration. Si le temps le permet, je prévois de contribuer davantage. Le projet s'est avéré convivial pour les débutants tout en offrant de nombreuses opportunités d'apprendre de nouvelles technologies et de nouveaux concepts.

Merci d'avoir lu et j'espère que cet article vous incitera à explorer des opportunités similaires d'apprentissage et de croissance.

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!