Opi rakentamaan käyttäjän todennusominaisuus SvelteKit:llä integroimalla Logto SDK.
Tässä oppaassa näytämme, miten rakentaa käyttäjän todennusvirta SvelteKit-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 SvelteKit-sovellukseen. Seuraava sisältö voi olla viite tulevaa käyttöä varten.
Asenna Logto SDK suosikkipakettienhallitsijallasi:
Lisää tiedostoon hooks.server.ts seuraava koodi injektoidaksesi Logto hook palvelimellesi:
Koska nämä tiedot ovat arkaluonteisia, on suositeltavaa käyttää ympäristömuuttujia:
Jos sinulla on useita hookkeja, voit käyttää sequence() apufunktiota ketjuttaaksesi ne:
Nyt voit käyttää Logto-asiakasta locals-objektissa. TypeScriptin osalta voit lisätä tyypin app.d.ts tiedostoon:
Käsittelemme user-objektia myöhemmin.
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.
Palataksesi sovellukseesi, määrittele seuraavat toiminnot sivulle, jossa haluat toteuttaa sisään- ja uloskirjautumisen:
Käytä sitten näitä toimintoja Svelte-komponentissasi:
Näyttääksesi käyttäjän tiedot voit injektoida locals.user-objektin layoutiin, jolloin se on käytettävissä kaikilla sivuilla:
Svelte-komponentissasi:
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!