Full-Stack-Authentifizierungslösung mit Logto auf Netlify: Schutz von Webanwendungen und serverlosen Funktionen

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

Sehen Sie sich die Online-Demovorschau an.

Voraussetzungen#

Dies sind die Dinge, die Sie einrichten müssen, bevor Sie mit diesem Tutorial beginnen:

• Ein Netlify-Konto
• Ein Logto Cloud Konto oder eine selbst gehostete Logto-Instanz

Erstellen Sie eine React-App mit Vite#

Befolgen Sie Vites Get Started Guide, um eine React-App zu erstellen.

Befolgen Sie den Erstellungsleitfaden und wählen Sie Ihren gewünschten Technologiestapel aus. In diesem Artikel wählen wir React + TypeScript.

Betreten Sie dann das Projektstammverzeichnis, installieren Sie die Abhängigkeiten gemäß dem Leitfaden und führen Sie die Anwendung aus.

App mit Netlify bereitstellen#

Befolgen Sie die Erste Schritte mit Netlify Anleitungen, um Ihre Anwendung bereitzustellen.

Sobald Sie Ihre App bereitgestellt haben, können Sie die Live-Site unter https://<Ihr-Site-Name>.netlify.app sehen.

Notieren Sie sich diese URL, da wir sie später zur Konfiguration von Logto benötigen.

Integrieren Sie Logto in Ihre App#

Um mit der Logto-Authentifizierung zu beginnen:

1. Navigieren Sie zur Seite "Anwendungen" in der Logto-Konsole
2. 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
3. Befolgen Sie die Integrationsanleitung, die entweder in der integrierten Anleitung der Logto-Konsole oder im offiziellen React authentication integration guide bereitgestellt wird
4. 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:

Schützen Sie Ihre Netlify-Funktionen mit Logto#

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:

1. 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

2. Konfigurieren Sie Ihre Anwendung so, dass diese API-Ressource verwendet wird, indem Sie die Kennung zu Ihren Netlify-Umgebungsvariablen hinzufügen:

3. Aktualisieren Sie Ihre Logto-Konfiguration, um diese API-Ressource einzuschließen:

4. 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.

Testen unserer Demo#

Jetzt bereitstellen Sie Ihre App auf Netlify und testen Sie sie! Sie können die Online-Demovorschau hier einsehen.

1. Besuchen Sie die Live-Site unter https://<Ihr-Site-Name>.netlify.app
2. Klicken Sie auf die Schaltfläche "Anmelden" in der Navigationsleiste
3. Melden Sie sich mit einem Logto-Benutzerkonto an und Sie werden sehen, dass Sie angemeldet sind.
4. Klicken Sie auf die Registerkarte "Geschützte Ressource" in der Navigationsleiste und Sie werden zur geschützten Seite weitergeleitet.
5. Klicken Sie auf die Schaltfläche "Geschützte Ressource anzeigen" und Sie sehen die Antwortdaten vom api/hello-Endpunkt.
6. Klicken Sie auf die Schaltfläche "Abmelden" in der Navigationsleiste und Sie werden zur Startseite weitergeleitet.

Schlussfolgerung#

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.