Rakennetaan SvelteKit-autentikointi Logton avulla
Opi rakentamaan käyttäjän todennusominaisuus SvelteKit:llä integroimalla Logto SDK.
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.
- SvelteKit on kehys, joka mahdollistaa vankkojen ja suorituskykyisten verkkosovellusten nopean kehittämisen Sveltellä.
Tässä oppaassa näytämme, miten rakentaa käyttäjän todennusvirta SvelteKit-integraation avulla Logto SDK:lla. Opas käyttää TypeScript ohjelmointikielenä.
Edellytykset
Ennen kuin aloitat, varmista, että sinulla on seuraavat:
- Logto-tili. Jos sinulla ei ole tiliä, voit rekisteröityä ilmaiseksi.
- A SvelteKit kehitysympäristö ja projekti.
Luo Logto-sovellus
Aloittaaksesi, luo Logto-sovellus "Perinteinen web" tyypillä. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:
- Kirjaudu sisään Logto Console.
- Vasemmalla olevasta navigointipalkista, napsauta Sovellukset.
- Napsauta Luo sovellus.
- Avautuvalla sivulla, etsi "Perinteinen web" osio ja paikanna "SvelteKit" kortti.
- Napsauta Aloita rakentaminen ja syötä sovelluksesi nimi.
- Napsauta Luo.
Näet interaktiivisen oppaan, joka opastaa sinua Logto SDK:n integroinnissa SvelteKit-sovellukseen. Seuraava sisältö voi olla viite tulevaa käyttöä varten.
Integrointi Logto SDK:n kanssa
Asennus
Asenna Logto SDK suosikkipakettienhallitsijallasi:
Lisää Logto hook
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.
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.
Palataksesi sovellukseesi, määrittele seuraavat toiminnot sivulle, jossa haluat toteuttaa sisään- ja uloskirjautumisen:
Käytä sitten näitä toimintoja Svelte-komponentissasi:
Näytä käyttäjätiedot
Näyttääksesi käyttäjän tiedot voit injektoida locals.user-objektin layoutiin, jolloin se on käytettävissä kaikilla sivuilla:
Svelte-komponentissasi:
Tarkistuspiste: Aja sovellus
Nyt voit ajaa sovelluksen ja yrittää kirjautua sisään/ulos Logton avulla:
- Avaa sovellus selaimessasi, sinun pitäisi nähdä "Kirjaudu sisään" -painike.
- Napsauta "Kirjaudu sisään" -painiketta, ja sinut pitäisi ohjata Logto kirjautumissivulle.
- 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.
- 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!