Lernen Sie, wie Sie einen Benutzerauthentifizierungsfluss mit SvelteKit erstellen, indem Sie das Logto SDK integrieren.
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.
Bevor Sie beginnen, stellen Sie sicher, dass Sie Folgendes haben:
Um loszulegen, erstellen Sie eine Logto-Anwendung mit dem Typ "Traditionelles Web". Befolgen Sie diese Schritte, um eine Logto-Anwendung zu 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.
Installieren Sie das Logto SDK über Ihren bevorzugten Paketmanager:
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.
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:
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:
Jetzt können Sie die Anwendung ausführen und versuchen, sich mit Logto an- und abzumelden:
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!