Suomi
  • react
  • react-native
  • expo
  • opastus
  • auth
  • autentikointi
  • oauth
  • oidc
  • identiteetti

Tee Expo (React Native) -autentikointi Logton kanssa

Opi rakentamaan käyttäjäautentikointiprosessi Expon (React Native) avulla 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.
  • 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:

Luo Logto-sovellus

Aloittaaksesi, luo Logto-sovellus "Native" 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 "Native" osio ja paikanna "Expo (React Native)" kortti.
  5. Napsauta Aloita rakentaminen ja syötä sovelluksesi nimi.
  6. 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.

Kokeile Logto Cloudin interaktiivista opasta

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:

  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