Arbeiten mit GitHub OAuth-Authentifizierung

Hallo zusammen,

In diesem Blogbeitrag bespreche ich meinen zweiten Pull Request (PR) als Teil der Release 0.3-Reihe für meine Aufgabe. Diese PR setzt meine Arbeit am GitExplorer-Projekt fort, zu dem ich ursprünglich während der Hacktoberfest-Veranstaltung beigetragen habe. Für die Ausgabe dieser Woche forderte der Projektbetreuer die Implementierung der GitHub-Authentifizierungsfunktion an.

Übersicht über GitExplorer

GitExplorer ist ein Projekt, das darauf abzielt, die Interaktion mit GitHub-Repositories zu vereinfachen. Wenn Sie daran interessiert sind, mehr über das Projekt oder meine früheren Beiträge dazu zu erfahren, schauen Sie sich gerne meinen vorherigen Blog-Beitrag für dieses Repository an.

Das konkrete Problem, das ich dieses Mal angegangen bin, war die fehlende GitHub-Authentifizierung in der Anwendung. Diese Einschränkung verhinderte, dass die App personalisierte Funktionen wie das Markieren von Repositorys bereitstellte. Meine Aufgabe bestand darin, eine GitHub-Authentifizierungsfunktion zu implementieren, die es Benutzern ermöglicht, sich mit ihren GitHub-Konten an- und abzumelden. Darüber hinaus könnten Benutzer ihre bevorzugten Repositorys markieren und mit einem einfachen Tastendruck eine Liste aller markierten Repositorys abrufen.

Herausforderungen: Arbeiten ohne UI-Framework

GitExplorer verwendet keine modernen UI-Frameworks wie React. Stattdessen basiert es ausschließlich auf Vanilla-JavaScript, CSS und HTML. Obwohl diese Einfachheit ihre Vorteile hat, musste ich dem Problem mehr Zeit widmen, da die ursprüngliche Codebasis auf das Frontend ausgerichtet war. Das Hinzufügen der GitHub-Authentifizierung und der damit verbundenen Backend-Funktionalität bedeutete, über die bestehende Struktur hinauszugehen und eine serverseitige Lösung zu implementieren.

Migrieren des Projekts und Einrichten des Backends

Um die neuen Funktionen zu unterstützen, habe ich das Projekt zunächst umstrukturiert. Ich habe den gesamten vorhandenen Front-End-Code in einen öffentlichen Ordner verschoben und einen Backend-Ordner erstellt, um die serverseitige Implementierung aufzunehmen. Für das Backend habe ich das Express-Framework gewählt, da es sich gut in Passport.js integrieren lässt, eine Bibliothek, die ich für die GitHub-Authentifizierung verwendet habe.

Die Schritte enthalten:

• Express für die Bereitstellung der Anwendung einrichten.
• Passport.js für die Authentifizierung mithilfe von CLIENT_ID und CLIENT_SECRET konfigurieren, die ich aus Sicherheitsgründen in einer .env-Datei gespeichert habe.
• Routen hinzufügen, um Benutzeraktionen wie das Markieren und Entfernen der Markierung von Repositorys zu verwalten.

GitHub-API-Integration

Nachdem ich das Backend eingerichtet hatte, habe ich die API von GitHub integriert, um die erforderliche Funktionalität zu unterstützen. Dazu gehörte:

• Benutzern die Anmeldung über ihre GitHub-Konten ermöglichen.
• Hinzufügen der Möglichkeit, Repositorys direkt aus der Anwendung zu markieren und die Markierung aufzuheben.
• Abrufen einer Liste der markierten Repositorys des Benutzers und Anzeigen dieser auf einer speziellen Seite, auf die über eine Schaltfläche auf der Benutzeroberfläche zugegriffen werden kann.

Schreiben von modularem, trockenem Code

Über die Implementierung der Funktionalität hinaus habe ich mich auf die Verbesserung der Codequalität durch die Anwendung des DRY-Prinzips (Don’t Repeat Yourself) konzentriert. Ich habe den Code modularisiert, indem ich Funktionen in wiederverwendbare Komponenten aufgeteilt habe, was die Wartung und Erweiterung in der Zukunft erleichtert.

Gelernte Erkenntnisse und Blick in die Zukunft

Dies war meine erste Erfahrung mit der GitHub-Authentifizierung und sie lieferte wertvolle Einblicke in die Integration von Drittanbieter-APIs und die Verwaltung von Backend-Diensten. Während das Projekt zunächst einfach erschien, erlangte ich durch die Arbeit sowohl am Front-End als auch am Back-End ein tieferes Verständnis der Full-Stack-Entwicklung.

GitExplorer hat noch viele interessante Probleme für die Zusammenarbeit offen. Wenn es die Zeit erlaubt, habe ich vor, weitere Beiträge zu leisten. Das Projekt hat sich als einsteigerfreundlich erwiesen und bietet gleichzeitig zahlreiche Möglichkeiten, neue Technologien und Konzepte zu erlernen.

Vielen Dank fürs Lesen und ich hoffe, dass dieser Beitrag Sie dazu inspiriert, ähnliche Lern- und Wachstumsmöglichkeiten zu erkunden.

Das obige ist der detaillierte Inhalt vonArbeiten mit GitHub OAuth-Authentifizierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!