Bouw Nuxt-authenticatie met Logto
Leer hoe je een gebruikersauthenticatiestroom kunt bouwen met Nuxt door de Logto SDK te integreren.
Founder
Beginnen
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.
- Nuxt een open source framework dat webontwikkeling intuïtief en krachtig maakt.
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.
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 Nuxt 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 "Nuxt" 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 Nuxt toepassing leidt. De volgende inhoud kan als referentie voor toekomstig gebruik dienen.
Logto SDK integreren
Installatie
Installeer Logto SDK via je favoriete pakketbeheerder:
Logto-module registreren
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.
Implementeren van 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.
Bij het registreren van de @logto/nuxt-module, zal deze het volgende doen:
- Voeg drie routes toe voor aanmelden (
/sign-in), afmelden (/sign-out) en callback (/callback). - Importeer twee composables:
useLogtoClientenuseLogtoUser.
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.
Gebruikersinformatie weergeven
Om de informatie van de gebruiker weer te geven, kun je de composable useLogtoUser() gebruiken, die beschikbaar is aan zowel de server- als clientzijde:
Controlepunt: De applicatie uitvoeren
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!