Lernen Sie, wie Sie einen Benutzerauthentifizierungsfluss mit Nuxt erstellen, indem Sie das Logto SDK integrieren.
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.
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 Nuxt-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:
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.
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:
/anmelden), Abmeldung (/abmelden) und callback (/callback) hinzufügen.useLogtoClient und useLogtoUser.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.
Um die Informationen des Benutzers anzuzeigen, können Sie das useLogtoUser()-Composable verwenden, das auf dem Server und auf der Clientseite verfügbar ist:
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!