Tee Expo (React Native) -autentikointi Logton kanssa
Opi rakentamaan käyttäjäautentikointiprosessi Expon (React Native) avulla integroimalla Logto SDK.
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.
- Expo (React Native) on ekosysteemi työkaluja, jotka auttavat sinua luomaan universaaleja alkuperäisiä sovelluksia Reactilla, jotka toimivat Androidilla, iOS:llä ja verkossa.
Tässä oppaassa näytämme, miten rakentaa käyttäjän todennusvirta Expo (React Native)-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.
- An Expo (React Native) kehitysympäristö ja projekti.
Luo Logto-sovellus
Aloittaaksesi, luo Logto-sovellus "Native" tyypillä. Seuraa näitä vaiheita luodaksesi Logto-sovelluksen:
- Kirjaudu sisään Logto Console.
- Vasemmalla olevasta navigointipalkista, napsauta Sovellukset.
- Napsauta Luo sovellus.
- Avautuvalla sivulla, etsi "Native" osio ja paikanna "Expo (React Native)" kortti.
- Napsauta Aloita rakentaminen ja syötä sovelluksesi nimi.
- Napsauta Luo.
Näet interaktiivisen oppaan, joka opastaa sinua Logto SDK:n integroinnissa Expo (React Native)-sovellukseen. Seuraava sisältö voi olla viite tulevaa käyttöä varten.
Integroi Logto SDK:n kanssa
Asennus
Asenna Logto SDK ja sen vertaisriippuvuudet suosikki pakettinhallintasi kautta:
@logto/rn
-paketti on SDK Logto:lle. Loput paketit ovat sen vertaisriippuvuuksia. Niitä ei voitu luetteloida suoraan riippuvuuksina, koska Expo CLI vaatii, että kaikki natiivimoduulien riippuvuudet asennetaan suoraan pääprojektin package.json
-tiedostoon.
Init Logto -tarjoaja
Tuo ja käytä LogtoProvider
-luokkaa tarjotaksesi Logto-kontekstin:
Toteuta sisäänkirjautuminen ja uloskirjautuminen
Siirry Logto Consolen sovellusasetusten sivulle. Lisää alkuperäinen uudelleenohjaus-URI (esimerkiksi io.logto://callback
), napsauta sitten "Tallenna".
-
iOS:llä uudelleenohjaus-URI-skeemalla ei ole merkitystä, koska
ASWebAuthenticationSession
-luokka kuuntelee uudelleenohjaus-URI:a riippumatta siitä, onko se rekisteröity. -
Androidilla uudelleenohjaus-URI-skeema on täytettävä Expon
app.json
-tiedostossa, esimerkiksi:
Nyt takaisin sovellukseesi, voit käyttää useLogto
-hookia kirjautumiseen ja uloskirjautumiseen:
Näytä käyttäjätiedot
Käyttäjän tietojen näyttämiseksi voit käyttää getIdTokenClaims()
-menetelmää:
Tarkistuspiste: Käynnistä 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!