Opi rakentamaan käyttäjäautentikointiprosessi Nuxtilla integroimalla Logto SDK.
Tässä oppaassa näytämme, miten rakentaa käyttäjän todennusvirta Nuxt-integraation avulla Logto SDK:lla. Opas käyttää TypeScript ohjelmointikielenä.
Ennen kuin aloitat, varmista, että sinulla on seuraavat:
Aloittaaksesi, luo Logto-sovellus "Perinteinen web" tyypillä. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:
Näet interaktiivisen oppaan, joka opastaa sinua Logto SDK:n integroinnissa Nuxt-sovellukseen. Seuraava sisältö voi olla viite tulevaa käyttöä varten.
Asenna Logto SDK suosikkipakettihallinnallasi:
Lisää Logto-moduuli Nuxt-konfiguraatiotiedostoosi (nuxt.config.ts):
Moduulin minimimääritys on seuraava:
Koska nämä tiedot ovat arkaluonteisia, suositellaan ympäristömuuttujien käyttöä:
Katso lisätietoja ajonaikaisesta konfiguraatiosta.
Vaihda Logto Consolen sovelluksen yksityiskohtasivulle. Lisää uudelleenohjaus-URI http://localhost:3000/callback.
Uudelleenohjaus-URI on OAuth 2.0 käsite, joka tarkoittaa sijaintia, johon pitäisi ohjata todennuksen jälkeen.
Samoin lisää http://localhost:3000/ "Kirjautumisen jälkeinen uudelleenohjaus-URI" osioon.
Kirjautumisen jälkeinen uudelleenohjaus-URI on OAuth 2.0 käsite, joka tarkoittaa sijaintia, johon pitäisi ohjata uloskirjautumisen jälkeen.
Napsauta sitten "Tallenna" tallentaaksesi muutokset.
Kun rekisteröit @logto/nuxt-moduulin, se tekee seuraavaa:
/sign-in), uloskirjautumiselle (/sign-out) ja palautukselle (/callback).useLogtoClient ja useLogtoUser.Nämä reitit ovat muokattavissa moduulivalintojen logto.pathnames kautta, esim:
Katso lisätietoja @logto/nuxt-paketin tyyppimäärittelytiedostosta.
Koska Nuxt-sivut hydraatitaan ja niistä tulee yksisivuisia sovelluksia (SPA) alkuperäisen lataamisen jälkeen, käyttäjä on ohjattava sisään- tai uloskirjautumisreitille tarvittaessa.
Näyttääksesi käyttäjän tiedot, voit käyttää useLogtoUser()-käskyä, joka on käytettävissä sekä palvelimella että asiakaspuolella:
Nyt voit ajaa sovelluksen ja yrittää kirjautua sisään/ulos Logton avulla:
Jos kohtaat ongelmia integraation aikana, älä epäröi liittyä Discord-palvelimellemme keskustellaksesi yhteisön ja Logto-tiimin kanssa!