Nederlands
  • react
  • react-native
  • expo
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Expo (React Native) authenticatie bouwen met Logto

Leer hoe je een gebruikersauthenticatiestroom kunt bouwen met Expo (React Native) door de Logto SDK te integreren.

Gao
Gao
Founder

Aan de slag

Inleiding

  • Logto is een open-source Auth0 alternatief voor het bouwen van identiteitsinfrastructuren. Het ondersteunt verschillende aanmeldmethoden, waaronder gebruikersnaam, e-mail, telefoonnummer en populaire sociale aanmeldingen zoals Google en GitHub.
  • Expo (React Native) is een ecosysteem van tools die je helpen universele native apps te maken met React die draaien op Android, iOS en het web.

In deze handleiding laten we je zien hoe je een gebruikersauthenticatieflow kunt bouwen met Expo (React Native) door Logto SDK te integreren. De handleiding gebruikt TypeScript als programmeertaal.

Vereisten

Voordat je begint, zorg ervoor dat je het volgende hebt:

  • Een Logto-account. Als je er nog geen hebt, kun je je gratis aanmelden.
  • An Expo (React Native) ontwikkelomgeving en een project.

Maak een Logto-toepassing

Om te beginnen, maak een Logto-toepassing met het type "Native". Volg deze stappen om een Logto-toepassing te maken:

  1. Meld je aan bij de Logto Console.
  2. Klik in de linker navigatiebalk op Toepassingen.
  3. Klik op Toepassing maken.
  4. Op de geopende pagina, vind het "Native" gedeelte en zoek de "Expo (React Native)" kaart.
  5. Klik op Begin met bouwen en voer de naam van je toepassing in.
  6. Klik op Maken.

Dan zou je een interactieve gids moeten zien die je door het proces van het integreren van Logto SDK met je Expo (React Native) toepassing leidt. De volgende inhoud kan als referentie voor toekomstig gebruik dienen.

Probeer de interactieve gids van Logto Cloud

Integreren met Logto SDK

Installatie

Installeer Logto SDK en peer-afhankelijkheden via je favoriete pakketbeheerder:

Het @logto/rn pakket is de SDK voor Logto. De overige pakketten zijn de peer-afhankelijkheden. Ze konden niet worden vermeld als directe afhankelijkheden omdat het Expo CLI vereist dat alle afhankelijkheden voor native modules direct binnen de 'package.json'-bestand van het hoofdproject worden geïnstalleerd.

Init Logto provider

Importeer en gebruik LogtoProvider om een Logto-context te bieden:

Implementeren van in- en uitloggen

Ga naar de pagina met applicatiedetails van de Logto Console. Voeg een native redirect-URI toe (bijvoorbeeld io.logto://callback), klik vervolgens op "Opslaan".

  • Voor iOS maakt het redirect-URI schema eigenlijk niet uit, aangezien de ASWebAuthenticationSession klasse naar de redirect-URI zal luisteren ongeacht of deze is geregistreerd of niet.

  • Voor Android moet het redirect-URI schema worden ingevuld in het app.json bestand van Expo, bijvoorbeeld:

Nu terug naar je app, je kunt de useLogto hook gebruiken om in en uit te loggen:

Gebruikersinformatie weergeven

Om de informatie van de gebruiker weer te geven, kun je de getIdTokenClaims() methode gebruiken:

Controlepunt: Voer de applicatie uit

Nu kun je de toepassing uitvoeren en proberen in te loggen/uit te loggen met Logto:

  1. Open de toepassing in je browser, je zou de knop "Inloggen" moeten zien.
  2. Klik op de knop "Inloggen", en je zou moeten worden omgeleid naar de Logto-aanmeldpagina.
  3. Nadat je bent ingelogd, zou je terug moeten worden omgeleid naar de toepassing en zou je de gebruikersgegevens en de knop "Uitloggen" moeten zien.
  4. Klik op de knop "Uitloggen", en je zou moeten worden omgeleid naar de Logto-afmeldpagina en vervolgens terug naar de toepassing met een niet-ingelogde status.

Als je problemen ondervindt tijdens de integratie, aarzel dan niet om onze Discord-server te joinen om te chatten met de gemeenschap en het Logto-team!

Verder lezen

Probeer Logto Vandaag