Leer hoe je een gebruikersauthenticatiestroom kunt bouwen met Nuxt door de Logto SDK te integreren.
In deze handleiding laten we je zien hoe je een gebruikersauthenticatieflow kunt bouwen met Nuxt 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 Nuxt toepassing leidt. De volgende inhoud kan als referentie voor toekomstig gebruik dienen.
Installeer Logto SDK via je favoriete pakketbeheerder:
Voeg in je Nuxt-configuratiebestand (nuxt.config.ts) de Logto-module toe:
De minimale configuratie voor de module is als volgt:
Aangezien deze gegevens gevoelig zijn, wordt aanbevolen om omgevingsvariabelen te gebruiken:
Zie runtime config voor meer informatie.
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.
Bij het registreren van de @logto/nuxt-module, zal deze het volgende doen:
/sign-in), afmelden (/sign-out) en callback (/callback).useLogtoClient en useLogtoUser.Deze routes zijn configureerbaar via logto.pathnames in de module-opties, bijvoorbeeld:
Bekijk het type definitiebestand in het @logto/nuxt-pakket voor meer informatie.
Aangezien Nuxt-pagina's gehydrateerd worden en een single-page application (SPA) worden na de eerste lading, moeten we de gebruiker omleiden naar de aanmeld- of afmeldroute wanneer dat nodig is.
Om de informatie van de gebruiker weer te geven, kun je de composable useLogtoUser() gebruiken, die beschikbaar is aan zowel de server- als clientzijde:
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!