Lär dig hur du bygger ett användarautentiseringsflöde med SvelteKit genom att integrera Logto SDK.
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.
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 SvelteKit applikation. Följande innehåll kan vara en referens för framtida bruk.
Installera Logto SDK via din favoritpakethanterare:
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.
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:
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:
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!