Lär dig hur du bygger ett användarautentiseringsflöde med Nuxt genom att integrera Logto SDK.
I denna handledning visar vi dig hur du bygger ett användarautentiseringsflöde med Nuxt genom att integrera Logto SDK. Handledningen använder TypeScript som programmeringsspråk.
Innan du börjar, se till att du har följande:
För att komma igång, skapa en Logto-applikation med typen "Traditionell webb". Följ dessa steg för att skapa en Logto-applikation:
Då bör du se en interaktiv guide som leder dig genom processen att integrera Logto SDK med din Nuxt applikation. Följande innehåll kan vara en referens för framtida bruk.
Installera Logto SDK via din favoritpakethanterare:
I din Nuxt-konfigurationsfil (nuxt.config.ts), lägg till Logto-modulen:
Den minsta konfigurationen för modulen är som följer:
Eftersom dessa uppgifter är känsliga rekommenderas det att använda miljövariabler:
Se runtime config för mer information.
Byt till applikationsdetaljsidan i Logto Console. Lägg till en omdirigerings-URI http://localhost:3000/callback.
Omdirigerings-URI är ett OAuth 2.0-koncept som innebär platsen ska omdirigeras efter autentisering.
På samma sätt, lägg till http://localhost:3000/ i sektionen "Omdirigering efter utloggning".
Omdirigering efter utloggning är ett OAuth 2.0-koncept som innebär platsen ska omdirigeras efter utloggning.
Klicka sedan på "Spara" för att spara ändringarna.
När du registrerar @logto/nuxt-modulen, kommer den att göra följande:
/sign-in), utloggning (/sign-out) och återkoppling (/callback).useLogtoClient och useLogtoUser.Dessa rutter kan konfigureras via logto.pathnames i modulalternativen, till exempel:
Kolla in typdefinitionsfilen i @logto/nuxt-paketet för mer information.
Eftersom Nuxt-sidor kommer att bli hydratiserade och skapa en en-sid-application (SPA) efter första inläsningen, behöver vi dirigera användaren till inloggnings- eller utloggningsrutten när det behövs.
För att visa användarens information kan du använda useLogtoUser() composable, som finns tillgänglig både på server- och klientsidan:
Nu kan du köra applikationen och försöka logga in/ut med Logto:
Om du stöter på några problem under integrationen, tveka inte att gå med i vår Discord-server för att chatta med communityn och Logto-teamet!