Leer hoe je een gebruikersauthenticatiestroom kunt opzetten met SvelteKit door Logto SDK te integreren.
In deze handleiding laten we je zien hoe je een gebruikersauthenticatieflow kunt bouwen met SvelteKit door Logto SDK te integreren. De handleiding gebruikt TypeScript als programmeertaal.
Voordat je begint, zorg ervoor dat je het volgende hebt:
Om te beginnen, maak een Logto-toepassing met het type "Traditionele web". Volg deze stappen om een Logto-toepassing te maken:
Dan zou je een interactieve gids moeten zien die je door het proces van het integreren van Logto SDK met je SvelteKit toepassing leidt. De volgende inhoud kan als referentie voor toekomstig gebruik dienen.
Installeer Logto SDK via je favoriete pakketbeheerder:
Voeg de volgende code toe aan je hooks.server.ts bestand om de Logto hook in je server te injecteren:
Aangezien deze informatie gevoelig is, wordt aanbevolen om gebruik te maken van omgevingsvariabelen:
Als je meerdere hooks hebt, kun je de sequence() helperfunctie gebruiken om ze te ketenen:
Nu kun je toegang krijgen tot de Logto-client in het locals object. Voor TypeScript kun je het type toevoegen aan app.d.ts:
We zullen later het user object bespreken.
Schakel over naar de toepassingsdetailpagina van Logto Console. Voeg een Omleidings-URI http://localhost:3000/callback toe.
Omleidings-URI is een concept uit OAuth 2.0 dat impliceert waarnaar moet worden omgeleid na authenticatie.
Voeg op dezelfde manier http://localhost:3000/ toe aan de sectie "Omleidings-URI na afmelden".
Omleidings-URI na afmelden is een concept uit OAuth 2.0 dat impliceert waarnaar moet worden omgeleid na afmelden.
Klik vervolgens op "Opslaan" om de wijzigingen op te slaan.
In je app, op de pagina waar je aanmelden en afmelden wilt implementeren, definieer je de volgende acties:
Gebruik deze acties dan in je Svelte-component:
Om de informatie van de gebruiker weer te geven, kun je het locals.user object injecteren in de lay-out, waardoor deze beschikbaar wordt voor alle pagina's:
In je Svelte-component:
Nu kun je de toepassing uitvoeren en proberen in te loggen/uit te loggen met Logto:
Als je problemen ondervindt tijdens de integratie, aarzel dan niet om onze Discord-server te joinen om te chatten met de gemeenschap en het Logto-team!