Bouw SvelteKit-authenticatie met Logto
Leer hoe je een gebruikersauthenticatiestroom kunt opzetten met SvelteKit door Logto SDK te integreren.
Founder
Aan de slag
Inleiding
- Logto is een open-source Auth0 alternatief voor het bouwen van identiteitsinfrastructuren. Het ondersteunt verschillende aanmeldmethoden, waaronder gebruikersnaam, e-mail, telefoonnummer en populaire sociale aanmeldingen zoals Google en GitHub.
- SvelteKit is een framework voor het snel ontwikkelen van robuuste, performante webapplicaties met Svelte.
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.
Vereisten
Voordat je begint, zorg ervoor dat je het volgende hebt:
- Een Logto-account. Als je er nog geen hebt, kun je je gratis aanmelden.
- A SvelteKit ontwikkelomgeving en een project.
Maak een Logto-toepassing
Om te beginnen, maak een Logto-toepassing met het type "Traditionele web". Volg deze stappen om een Logto-toepassing te maken:
- Meld je aan bij de Logto Console.
- Klik in de linker navigatiebalk op Toepassingen.
- Klik op Toepassing maken.
- Op de geopende pagina, vind het "Traditionele web" gedeelte en zoek de "SvelteKit" kaart.
- Klik op Begin met bouwen en voer de naam van je toepassing in.
- Klik op 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.
Integreren met Logto SDK
Installatie
Installeer Logto SDK via je favoriete pakketbeheerder:
Voeg Logto hook toe
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.
Implementeer aanmelden en afmelden
Configureer omleidings-URI's
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:
Gebruikersinformatie weergeven
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:
Controlepunt: Voer de applicatie uit
Nu kun je de toepassing uitvoeren en proberen in te loggen/uit te loggen met Logto:
- Open de toepassing in je browser, je zou de knop "Inloggen" moeten zien.
- Klik op de knop "Inloggen", en je zou moeten worden omgeleid naar de Logto-aanmeldpagina.
- Nadat je bent ingelogd, zou je terug moeten worden omgeleid naar de toepassing en zou je de gebruikersgegevens en de knop "Uitloggen" moeten zien.
- Klik op de knop "Uitloggen", en je zou moeten worden omgeleid naar de Logto-afmeldpagina en vervolgens terug naar de toepassing met een niet-ingelogde status.
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!