Erstellen Sie eine SvelteKit-Authentifizierung mit Logto
Lernen Sie, wie Sie einen Benutzerauthentifizierungsfluss mit SvelteKit erstellen, indem Sie das Logto SDK integrieren.
Founder
Los Geht's
Einführung
- Logto ist eine Open-Source-Alternative zu Auth0 für den Aufbau von Identitätsinfrastrukturen. Es unterstützt verschiedene Anmeldemethoden, einschließlich Benutzername, E-Mail, Telefonnummer und beliebte soziale Anmeldungen wie Google und GitHub.
- SvelteKit ist ein Framework für die schnelle Entwicklung robuster, leistungsstarker Webanwendungen mit Svelte.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit SvelteKit einen Benutzerauthentifizierungsablauf durch die Integration des Logto SDK erstellen. Das Tutorial verwendet TypeScript als Programmiersprache.
Voraussetzungen
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
- Ein Logto-Konto. Wenn Sie noch keins haben, können Sie sich kostenlos registrieren.
- A SvelteKit-Entwicklungsumgebung und ein Projekt.
Erstellen Sie eine Logto-Anwendung
Um loszulegen, erstellen Sie eine Logto-Anwendung mit dem Typ "Traditionelles Web". Befolgen Sie diese Schritte, um eine Logto-Anwendung zu erstellen:
- Melden Sie sich bei der Logto-Konsole an.
- Klicken Sie in der linken Navigationsleiste auf Anwendungen.
- Klicken Sie auf Anwendung erstellen.
- Suchen Sie auf der geöffneten Seite den Abschnitt "Traditionelles Web" und finden Sie die Karte "SvelteKit".
- Klicken Sie auf Mit dem Bauen beginnen und geben Sie den Namen Ihrer Anwendung ein.
- Klicken Sie auf Erstellen.
Dann sollten Sie eine interaktive Anleitung sehen, die Sie durch den Prozess der Integration des Logto SDK in Ihre SvelteKit-Anwendung führt. Der folgende Inhalt kann als Referenz für die zukünftige Verwendung dienen.
Integration mit Logto SDK
Installation
Installieren Sie das Logto SDK über Ihren bevorzugten Paketmanager:
Hinzufügen des Logto-Hooks
Fügen Sie in Ihrer hooks.server.ts-Datei den folgenden Code hinzu, um den Logto-Hook in Ihren Server zu injizieren:
Da diese Informationen sensibel sind, wird empfohlen, Umgebungsvariablen zu verwenden:
Wenn Sie mehrere Hooks haben, können Sie die sequence() Hilfsfunktion verwenden, um sie zu verketten:
Jetzt können Sie auf den Logto-Client im locals-Objekt zugreifen. Für TypeScript können Sie den Typ zu app.d.ts hinzufügen:
Wir werden das Benutzer-Objekt später besprechen.
Implementieren Sie Anmeldung und Abmeldung
Konfigurieren Sie die Umleitungs-URIs
Wechseln Sie zur Anwendungsdetailseite der Logto-Konsole. Fügen Sie eine Umleitungs-URI http://localhost:3000/callback hinzu.
Umleitungs-URI ist ein OAuth 2.0-Konzept, das impliziert, dass der Standort nach der Authentifizierung umgeleitet werden soll.
Fügen Sie ähnlich dazu http://localhost:3000/ in den Abschnitt "Post-Sign-out-Umleitungs-URI" hinzu.
Post-Sign-out-Umleitungs-URI ist ein OAuth 2.0-Konzept, das impliziert, dass der Standort nach dem Abmelden umgeleitet werden soll.
Klicken Sie dann auf "Speichern", um die Änderungen zu speichern.
Zurück zu Ihrer App, auf der Seite, auf der Sie An- und Abmeldung implementieren möchten, definieren Sie die folgenden Aktionen:
Dann verwenden Sie diese Aktionen in Ihrer Svelte-Komponente:
Anzeigen von Benutzerinformationen
Um die Informationen des Benutzers anzuzeigen, können Sie das locals.user-Objekt in das Layout injizieren, so dass es auf allen Seiten verfügbar ist:
In Ihrer Svelte-Komponente:
Kontrollpunkt: Führen Sie die Anwendung aus
Jetzt können Sie die Anwendung ausführen und versuchen, sich mit Logto an- und abzumelden:
- Öffnen Sie die Anwendung in Ihrem Browser, Sie sollten die Schaltfläche "Anmelden" sehen.
- Klicken Sie auf die Schaltfläche "Anmelden" und Sie sollten zur Logto-Anmeldeseite weitergeleitet werden.
- Nachdem Sie sich angemeldet haben, sollten Sie zurück zur Anwendung weitergeleitet werden und die Benutzerdaten und die Schaltfläche "Abmelden" sehen.
- Klicken Sie auf die Schaltfläche "Abmelden" und Sie sollten zur Logto-Abmeldeseite weitergeleitet werden und dann zurück zur Anwendung mit einem abgemeldeten Zustand.
Wenn Sie während der Integration auf Probleme stoßen, zögern Sie nicht, unserem Discord-Server beizutreten, um mit der Community und dem Logto-Team zu chatten!