Svenska
  • svelte
  • sveltekit
  • node
  • handledning
  • auth
  • autentisering
  • oauth
  • oidc
  • identitet

Bygg SvelteKit-autentisering med Logto

Lär dig hur du bygger ett användarautentiseringsflöde med SvelteKit 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.
  • SvelteKit är ett ramverk för att snabbt utveckla robusta, presterande webbapplikationer med Svelte.

I denna handledning visar vi dig hur du bygger ett användarautentiseringsflöde med SvelteKit 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 SvelteKit 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 "SvelteKit".
  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 SvelteKit applikation. Följande innehåll kan vara en referens för framtida bruk.

Prova Logto Clouds interaktiva guide

Integrera med Logto SDK

Installation

Installera Logto SDK via din favoritpakethanterare:

Lägg till Logto-hook

I din hooks.server.ts-fil, lägg till följande kod för att injicera Logto-hook i din server:

Eftersom denna information är känslig, rekommenderas det att använda miljövariabler:

Om du har flera hooks, kan du använda hjälpfunktionen sequence() för att kedja dem:

Nu kan du komma åt Logto-klienten i locals-objektet. För TypeScript kan du lägga till typen till app.d.ts:

Vi kommer att diskutera user-objektet senare.

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.

Tillbaka till din app, på sidan där du vill implementera inloggning och utloggning, definiera följande åtgärder:

Använd sedan dessa åtgärder i din Svelte-komponent:

Visa användarinformation

För att visa användarens information kan du injicera locals.user-objektet i layouten och därmed göra det tillgängligt för alla sidor:

I din Svelte-komponent:

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!

Ytterligare läsning

Prova Logto idag