Svenska
  • nuxt
  • vue
  • node
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Bygg Nuxt-autentisering med Logto

Lär dig hur du bygger ett användarautentiseringsflöde med Nuxt genom att integrera Logto SDK.

Gao
Gao
Founder

Kom igång

Introduktion

  • Logto är ett öppen källkods alternativ till Auth0 för att bygga identitetsinfrastrukturer. Det stöder olika inloggningsmetoder, inklusive användarnamn, e-post, telefonnummer och populära sociala inloggningar som Google och GitHub.
  • Nuxt ett open source-ramverk som gör webbutveckling intuitivt och kraftfullt.

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.

Förutsättningar

Innan du börjar, se till att du har följande:

  • Ett Logto-konto. Om du inte har ett kan du registrera dig gratis.
  • A Nuxt utvecklingsmiljö och ett projekt.

Skapa en Logto-applikation

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:

  1. Logga in på Logto Console.
  2. I den vänstra navigeringsbaren, klicka på Applikationer.
  3. Klicka på Skapa applikation.
  4. På den öppnade sidan, hitta sektionen "Traditionell webb" och lokalisera kortet "Nuxt".
  5. Klicka på Börja bygga och ange namnet på din applikation.
  6. Klicka på Skapa.

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.

Prova Logto Clouds interaktiva guide

Integrera Logto SDK

Installation

Installera Logto SDK via din favoritpakethanterare:

Registrera Logto-modul

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.

Implementera inloggning och utloggning

Konfigurera omdirigerings-URI:er

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:

  • Lägg till tre rutter för inloggning (/sign-in), utloggning (/sign-out) och återkoppling (/callback).
  • Importera två composables: 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.

Visa användarinformation

För att visa användarens information kan du använda useLogtoUser() composable, som finns tillgänglig både på server- och klientsidan:

Kontrollpunkt: Kör applikationen

Nu kan du köra applikationen och försöka logga in/ut med Logto:

  1. Öppna applikationen i din webbläsare, du borde se knappen "Logga in".
  2. Klicka på knappen "Logga in", och du borde omdirigeras till Logtos inloggningssida.
  3. Efter att du har loggat in, borde du omdirigeras tillbaka till applikationen, och du borde se användardata och knappen "Logga ut".
  4. Klicka på knappen "Logga ut", och du borde omdirigeras till Logtos utloggningssida, och sedan omdirigeras tillbaka till applikationen med ett utloggat tillstånd.

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!

Vidare läsning

Prova Logto idag