Open Source, offene Türen: Abschluss des Hacktoberfests 4

Nach vier aufeinanderfolgenden Wochen Hacktoberfest habe ich die Challenge endlich mit vier genehmigten PRs abgeschlossen. Ich muss zugeben, dass ich zu Beginn dieser Veranstaltung ziemlich nervös war, da sich Open Source wie etwas außerhalb meiner Komfortzone anfühlte. Allerdings hat es mir geholfen, Selbstvertrauen aufzubauen, indem ich mit kleineren Problemen begonnen habe, und schon bald war ich motiviert, nach komplexeren Problemen zu suchen, die es zu lösen gilt. Ich glaube, ein Teil dieser Motivation kam von meiner Studienzeit – die Mitarbeit in einer Entwickler-Community gab mir ein Gefühl für reale Erfahrungen.

Wenn Sie mehr über meine Hacktoberfest-Reise erfahren möchten, schauen Sie sich gerne meine persönliche Seite an, auf der ich meine Überlegungen nach jeder PR aufgezeichnet habe. Aber lassen Sie uns ohne weitere Umschweife in die PR meiner letzten Woche eintauchen.

Überblick über Mikochi: Ein minimalistischer Remote-Dateibrowser

Mikochi ist ein leichter, selbst gehosteter Remote-Dateibrowser, ideal für Benutzer, die Dateien auf privaten Servern oder NAS (Network Attached Storage) verwalten. Mit diesem Tool können Benutzer problemlos durch Remote-Verzeichnisse navigieren, Dateiverwaltungsaufgaben wie das Hochladen, Herunterladen, Umbenennen und Löschen von Dateien ausführen und sogar Mediendateien direkt auf Player wie VLC oder MPV streamen.

Mikochi ist mit einer modernen Weboberfläche auf Basis von JavaScript/Preact und einem API-Backend in Go/Gin ausgestattet und bietet ein nahtloses und reaktionsschnelles Erlebnis für das Durchsuchen von Dateien aus der Ferne.

Woran ich gearbeitet habe

In diesem Projekt habe ich ein Problem im Zusammenhang mit der Verbesserung der Benutzerkontrolle und -sicherheit in Mikochi angegangen und eine Abmeldefunktion implementiert, die über eine Schaltfläche „Abmelden“ in der Navigationsleiste der Anwendung zugänglich ist. Diese Funktion wurde entwickelt, um Benutzer sicher abzumelden, indem Authentifizierungstoken gelöscht und sie zur Anmeldeseite weitergeleitet werden. Auf dem Frontend löst die Schaltfläche „Abmelden“ einen API-Aufruf an einen neuen /logout-Endpunkt aus, löscht das JWT aus dem lokalen Speicher und aktualisiert oder leitet die Seite um, um sicherzustellen, dass Benutzer vollständig abgemeldet sind. Im Backend habe ich eine Logik zur Handhabung des /logout-Endpunkts erstellt, indem ich die Token-ID zu einer Liste ungültiger Token hinzugefügt habe. Diese Liste wird in der JWT-Authentifizierungs-Middleware überprüft, um sicherzustellen, dass jede Anfrage mit einem ungültigen Token mit einer 403-Antwort abgelehnt wird. Dieser Zusatz verbesserte die Sicherheit von Mikochi, indem er Benutzern die Kontrolle aktiver Sitzungen und den Schutz ihrer Konten auf gemeinsam genutzten oder öffentlichen Geräten erleichterte.

Lösung

In dieser PR habe ich eine sichere Abmeldefunktion für Mikochi implementiert, die sowohl Frontend- als auch Backend-Anforderungen berücksichtigt, um die Benutzersitzungskontrolle zu verbessern. Im Frontend habe ich eine Logout-Komponente erstellt, um den API-Aufruf an /api/logout zu verarbeiten und das JWT aus dem lokalen Speicher zu löschen. Wenn der Benutzer auf „Abmelden“ klickt, wird das JWT entfernt, eine POST-Anfrage an das Backend gesendet, um die Abmeldung zu validieren, und die Seite leitet den Benutzer mithilfe von window.location.href zum Hauptanmeldebildschirm weiter. Im Backend habe ich die JWT-Generierung in „generateAuthToken()“ so geändert, dass sie eine ID-Eigenschaft enthält, sodass Token effektiv ungültig gemacht werden können. Anschließend habe ich in backend/auth/handlers.go einen Handler hinzugefügt, um Abmeldeanfragen zu verwalten, indem ich die JWT-ID an eine ungültige Token-Liste anhänge. Die JWT-Middleware prüft jede Anfrage, verweigert den Zugriff, wenn das Token ungültig wurde, und gibt eine 403-Antwort zurück. Um die Funktionalität zu überprüfen, habe ich manuelle Tests durchgeführt, indem ich nach der Abmeldung ein zuvor ungültiges Token erneut in den lokalen Speicher eingefügt habe, um sicherzustellen, dass jeder Versuch, es wiederzuverwenden, fehlschlug, wodurch der Abmeldevorgang effektiv gesichert wurde.

Meine Gedanken

Für mich war das ein faszinierendes Projekt, das Backend- und Frontend-Entwicklung in einem einzigen Projekt vereinte. Das Problem, das ich im Frontend angesprochen habe, war relativ einfach – die Erstellung einer Abmeldeschaltfläche mit etwas CSS, um das Erscheinungsbild zu verbessern. Ich lerne React schon seit einiger Zeit, daher brauchte ich zwar eine kurze Auffrischung, aber es hat mir geholfen, den Code und die Komponenten bereits in der Quelle zu verstehen.

Im Backend hatte der Projektinhaber das Projekt mithilfe von Docker in Containern verpackt, was mir vertraut war. Der zeitaufwändigste Teil war jedoch die Arbeit mit Go, der Backend-Sprache für dieses Projekt. Ich hatte noch keine Erfahrung mit Go, aber die Auseinandersetzung mit diesem Problem gab mir die Gelegenheit, es auf einer funktionalen Ebene zu erlernen, was ich als sehr lohnend empfand.

Das obige ist der detaillierte Inhalt vonOpen Source, offene Türen: Abschluss des Hacktoberfests 4. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!