Suomi
  • nuxt
  • vue
  • node
  • ohje
  • autentikointi
  • todennus
  • oauth
  • oidc
  • identiteetti

Rakenna Nuxt-autentikointi Logton kanssa

Opi rakentamaan käyttäjäautentikointiprosessi Nuxtilla integroimalla Logto SDK.

Gao
Gao
Founder

Aloita

Johdanto

  • Logto on avoimen lähdekoodin Auth0-vaihtoehto identiteetti-infrastruktuurien rakentamiseen. Se tukee erilaisia kirjautumistapoja, mukaan lukien käyttäjänimi, sähköposti, puhelinnumero ja suositut sosiaaliset kirjautumiset kuten Google ja GitHub.
  • Nuxt avoin lähdekoodin kehys, joka tekee verkkokehityksestä intuitiivista ja tehokasta.

Tässä oppaassa näytämme, miten rakentaa käyttäjän todennusvirta Nuxt-integraation avulla Logto SDK:lla. Opas käyttää TypeScript ohjelmointikielenä.

Edellytykset

Ennen kuin aloitat, varmista, että sinulla on seuraavat:

Luo Logto-sovellus

Aloittaaksesi, luo Logto-sovellus "Perinteinen web" tyypillä. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:

  1. Kirjaudu sisään Logto Console.
  2. Vasemmalla olevasta navigointipalkista, napsauta Sovellukset.
  3. Napsauta Luo sovellus.
  4. Avautuvalla sivulla, etsi "Perinteinen web" osio ja paikanna "Nuxt" kortti.
  5. Napsauta Aloita rakentaminen ja syötä sovelluksesi nimi.
  6. Napsauta Luo.

Näet interaktiivisen oppaan, joka opastaa sinua Logto SDK:n integroinnissa Nuxt-sovellukseen. Seuraava sisältö voi olla viite tulevaa käyttöä varten.

Kokeile Logto Cloudin interaktiivista opasta

Integroi Logto SDK

Asennus

Asenna Logto SDK suosikkipakettihallinnallasi:

Rekisteröi Logto-moduuli

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.

Toteuta sisään- ja uloskirjautuminen

Määritä uudelleenohjaus-URI:t

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:

  • Lisää kolme reittiä sisäänkirjautumiselle (/sign-in), uloskirjautumiselle (/sign-out) ja palautukselle (/callback).
  • Tuo kaksi käskyä: 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äytä käyttäjätiedot

Näyttääksesi käyttäjän tiedot, voit käyttää useLogtoUser()-käskyä, joka on käytettävissä sekä palvelimella että asiakaspuolella:

Tarkistuspiste: Suorita sovellus

Nyt voit ajaa sovelluksen ja yrittää kirjautua sisään/ulos Logton avulla:

  1. Avaa sovellus selaimessasi, sinun pitäisi nähdä "Kirjaudu sisään" -painike.
  2. Napsauta "Kirjaudu sisään" -painiketta, ja sinut pitäisi ohjata Logto kirjautumissivulle.
  3. Kun olet kirjautunut sisään, sinut pitäisi ohjata takaisin sovellukseen, ja sinun pitäisi nähdä käyttäjätiedot ja "Kirjaudu ulos" -painike.
  4. Napsauta "Kirjaudu ulos" -painiketta, ja sinut pitäisi ohjata Logto uloskirjautumissivulle, ja sitten takaisin sovellukseen ilman kirjautumista.

Jos kohtaat ongelmia integraation aikana, älä epäröi liittyä Discord-palvelimellemme keskustellaksesi yhteisön ja Logto-tiimin kanssa!

Lisälukemista

Kokeile Logtoa tänään