Bauen Sie eine Nuxt-Authentifizierung mit Logto
Lernen Sie, wie Sie einen Benutzerauthentifizierungsfluss mit Nuxt erstellen, indem Sie das Logto SDK integrieren.
Founder
Anfangen
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.
- Nuxt ein Open-Source-Framework, das die Webentwicklung intuitiv und mächtig macht.
In diesem Tutorial zeigen wir Ihnen, wie Sie mit Nuxt 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 Nuxt-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 "Nuxt".
- 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 Nuxt-Anwendung führt. Der folgende Inhalt kann als Referenz für die zukünftige Verwendung dienen.
Integrieren Sie das Logto SDK
Installation
Installieren Sie das Logto SDK über Ihren bevorzugten Paketmanager:
Registrieren Sie das Logto-Modul
In Ihrer Nuxt-Konfigurationsdatei (nuxt.config.ts), fügen Sie das Logto-Modul hinzu:
Die minimale Konfiguration für das Modul ist wie folgt:
Da diese Informationen sensibel sind, wird empfohlen, Umgebungsvariablen zu verwenden:
Sehen Sie runtime config für weitere Informationen.
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.
Bei der Registrierung des @logto/nuxt-Moduls wird Folgendes ausgeführt:
- Drei Routen für Anmeldung (
/anmelden), Abmeldung (/abmelden) und callback (/callback) hinzufügen. - Zwei zusammenstellbare Elemente importieren:
useLogtoClientunduseLogtoUser.
Diese Routen können über logto.pathnames in den Moduleinstellungen konfiguriert werden, zum Beispiel:
Schauen Sie sich die type definition file im @logto/nuxt-Paket für weitere Informationen an.
Da Nuxt-Seiten nach dem ersten Laden hydratisiert werden und zu einer Single-Page-Anwendung (SPA) werden, müssen wir den Benutzer zur Anmelde- oder Abmelderoute umleiten, wenn nötig.
Anzeigen von Benutzerinformationen
Um die Informationen des Benutzers anzuzeigen, können Sie das useLogtoUser()-Composable verwenden, das auf dem Server und auf der Clientseite verfügbar ist:
Checkpoint: Anwendung ausführen
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!