Full-Stack-Authentifizierungslösung mit Logto auf Netlify: Schutz von Webanwendungen und serverlosen Funktionen
Zeigt, wie man Netlify-Webanwendungen und serverlose Funktionen mit Logto-Authentifizierung sichert, komplett mit Quellcode-Beispielen und einer Live-Demo-Vorschau.
YijunDeveloper
Verschwenden Sie keine Wochen mit Benutzerauthentifizierung
Bringen Sie sichere Apps schneller mit Logto auf den Markt. Integrieren Sie Benutzerauthentifizierung in Minuten und konzentrieren Sie sich auf Ihr Kernprodukt.
Netlify ist eine leistungsstarke Plattform zum Bereitstellen und Hosten moderner Webprojekte und bietet nahtlose Git-Integration, automatisierte Builds und serverlose Funktionen für einen schnellen und skalierbaren Entwicklungsworkflow.
In diesem umfassenden Leitfaden lernen Sie, wie Sie:
Authentifizierung in einer Single-Page-Anwendung (SPA) mithilfe von Logto auf Netlify implementieren, demonstriert mit einem Vite + React-Beispiel
Ihre serverlosen Netlify-Funktionen mit Logto-Authentifizierung sichern
Eine produktionsfähige Anwendung unter Verwendung unserer Referenzimplementierung bereitstellen: example-vite-react-logto
Navigieren Sie zur Seite "Anwendungen" in der Logto-Konsole
Erstellen Sie eine neue Anwendung
Wählen Sie Ihr Frontend-Framework aus (in unserem Beispiel React)
Hinweis: Sie können jede Single-Page-Anwendung (SPA) oder native App basierend auf Ihren Anforderungen erstellen
Befolgen Sie die Integrationsanleitung, die entweder in der integrierten Anleitung der Logto-Konsole oder im offiziellen React authentication integration guide bereitgestellt wird
Notieren Sie sich auf der Seite mit den Anwendungsdetails:
Ihre Anwendungs-ID
Den Logto-Endpunkt (zu finden im Abschnitt "Endpunkte & Anmeldeinformationen", typischerweise im Format https://<Ihre-Instanz>.logto.app/)
Diese Anmeldeinformationen werden in den folgenden Schritten benötigt.
Beachten Sie, dass wir in unserer Demo die /callback-Route verwenden, um Logtos Sign-In-Weiterleitung zu handhaben. Die Weiterleitungs-URIs in Logto müssen als https://<Ihr-Site-Name>.netlify.app/callback konfiguriert werden.
Nachdem sich Benutzer abgemeldet haben, kehren wir zur Startseite zurück, sodass wir die Post-Sign-Out-Weiterleitungs-URIs auf https://<Ihr-Site-Name>.netlify.app setzen.
Konfigurieren Sie dann die Informationen unserer erstellten Logto-Anwendung in den Umgebungsvariablen von Netlify (Ihre Website -> Site-Konfiguration -> Umgebungsvariablen):
Dann verwenden wir diese Konfigurationen in unserem Frontend-Projekt:
Den endgültig integrierten Code können Sie hier einsehen: example-vite-react-logto.
Beachten Sie, dass unsere URL nach der Bereitstellung auf Netlify und der Anmeldung über Logto nicht automatisch auf unsere Callback-Seite umleitet. Dies liegt daran, dass Netlify standardmäßig keine clientseitige Routing-Weiterleitung für Single-Page-Anwendungen (SPA) unterstützt.
Wenn Sie Pfade wie /callback besuchen, versucht Netlify, entsprechende Dateien auf dem Server zu finden, anstatt die Anfrage an Ihre React-Anwendung weiterzuleiten.
An diesem Punkt müssen wir eine _redirects Datei im öffentlichen Verzeichnis Ihres Netlify-Projekts erstellen, um Netlify anzuweisen, alle Anfragen an Ihr index.html weiterzuleiten:
Alternativ können Sie eine netlify.toml Datei im Stammverzeichnis Ihres Projekts erstellen:
Jetzt sollte unser Routing korrekt funktionieren.
Erstellen Sie Backend-APIs mit Netlify-Funktionen#
Netlify Functions bietet eine einfache und dennoch leistungsstarke Möglichkeit, Backend-APIs zu erstellen. Mit Netlify Functions können wir serverseitige Logik schreiben, ohne uns um die traditionelle Serverkonfiguration und Wartung kümmern zu müssen.
Diese Funktionen werden versionskontrolliert, erstellt und neben Ihrer Website bereitgestellt, wodurch der Entwicklungs- und Bereitstellungsprozess nahtlos zwischen Frontend und Backend ist.
Lassen Sie uns mit dem Erstellen unserer Backend-APIs mit Netlify Functions beginnen.
Zuerst müssen wir ein Verzeichnis "functions" im Netlify-Verzeichnis des Projekts erstellen und dann eine Datei hello.ts:
Wenn wir https://<Ihr-Site-Name>.netlify.app/.netlify/functions/hello besuchen, wird diese Funktion aufgerufen und "Hallo Welt!"" zurückgegeben.
Wenn Sie denken, dass der Pfad /.netlify/functions/hello etwas seltsam aussieht, können Sie eine Umleitung einrichten, um die Funktion aufzurufen, indem Sie eine Umleitungsregel in der public/_redirects Datei hinzufügen:
Auf diese Weise, wenn wir https://<Ihr-Site-Name>.netlify.app/api/hello besuchen, ruft es unsere Funktion auf und gibt "Hallo Welt!" zurück. Dies ist tatsächlich der übliche Weg, um APIs mit Netlify-Funktionen zu erstellen.
Und wir können auf diese API in unserem Frontend-Projekt mit Fetch zugreifen:
Da wir jetzt eine Backend-API haben, müssen wir sicherstellen, dass nur authentifizierte Benutzer darauf zugreifen können. Wir schützen unsere Netlify-Funktionen mit Logtos Authentifizierungsmechanismus.
Um unsere API-Endpunkte zu schützen:
Erstellen Sie eine API-Ressource in der Logto-Konsole, die unsere Backend-API darstellt:
Gehen Sie in der Logto-Konsole zu "API Resources" und erstellen Sie eine neue API
Setzen Sie einen Namen und eine API-Kennung (z.B. https://api.backend.com)
Notieren Sie sich die API-Kennung auf der Detailseite der API-Ressource, da wir sie später benötigen
Konfigurieren Sie Ihre Anwendung so, dass diese API-Ressource verwendet wird, indem Sie die Kennung zu Ihren Netlify-Umgebungsvariablen hinzufügen:
Aktualisieren Sie Ihre Logto-Konfiguration, um diese API-Ressource einzuschließen:
Wenn Anfragen an geschützte Endpunkte gestellt werden, muss Ihr Frontend ein gültiges Zugriffstoken einschließen. So fordern Sie es an und verwenden es:
Jetzt implementieren wir die Tokenvalidierung in unserem Backend, um sicherzustellen, dass nur Anfragen mit gültigen Zugriffstokens verarbeitet werden.
Zuerst müssen wir die Abhängigkeit jose installieren, um uns bei der Überprüfung des JWT-Tokens zu unterstützen:
Dann können wir die Tokenvalidierung in unserem Backend implementieren:
Nun aktualisieren wir unsere Netlify-Funktion, um die verifyLogtoToken Funktion zu verwenden:
Das war's! Jetzt ist unsere Netlify-Funktion durch Logto geschützt und nur Anfragen mit gültigen Zugriffstokens werden verarbeitet.
Dieser Leitfaden zeigt, wie man Logto-Authentifizierung in eine auf Netlify bereitgestellte Webanwendung integriert.
Durch das Konfigurieren von Logto-Anwendungen und API-Ressourcen haben wir die Frontend-Authentifizierung und die geschützten Netlify Functions-Endpunkte implementiert.
Für eine detailliertere Zugangskontrolle können Sie die RBAC (Role-Based Access Control)-Funktionalitäten von Logto durch die Definition von Rollen und Berechtigungen in der Logto-Konsole und die Überprüfung von Benutzerrollen in Netlify Funktionen nutzen.
