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

Bygg Expo (React Native) autentisering med Logto

Lär dig hur du bygger ett användarauktoriseringsflöde med Expo (React Native) genom att integrera Logto SDK.

Gao
Gao
Founder

Kom igång

Introduktion

  • Logto är ett öppen källkods alternativ till Auth0 för att bygga identitetsinfrastrukturer. Det stöder olika inloggningsmetoder, inklusive användarnamn, e-post, telefonnummer och populära sociala inloggningar som Google och GitHub.
  • Expo (React Native) är ett ekosystem av verktyg som hjälper dig att skapa universella native-appar med React som körs på Android, iOS och webben.

I denna handledning visar vi dig hur du bygger ett användarautentiseringsflöde med Expo (React Native) genom att integrera Logto SDK. Handledningen använder TypeScript som programmeringsspråk.

Förutsättningar

Innan du börjar, se till att du har följande:

  • Ett Logto-konto. Om du inte har ett kan du registrera dig gratis.
  • An Expo (React Native) utvecklingsmiljö och ett projekt.

Skapa en Logto-applikation

För att komma igång, skapa en Logto-applikation med typen "Native". Följ dessa steg för att skapa en Logto-applikation:

  1. Logga in på Logto Console.
  2. I den vänstra navigeringsbaren, klicka på Applikationer.
  3. Klicka på Skapa applikation.
  4. På den öppnade sidan, hitta sektionen "Native" och lokalisera kortet "Expo (React Native)".
  5. Klicka på Börja bygga och ange namnet på din applikation.
  6. Klicka på Skapa.

Då bör du se en interaktiv guide som leder dig genom processen att integrera Logto SDK med din Expo (React Native) applikation. Följande innehåll kan vara en referens för framtida bruk.

Prova Logto Clouds interaktiva guide

Integrera med Logto SDK

Installation

Installera Logto SDK och peer-beroenden via din favoritpakethanterare:

Paketet @logto/rn är SDK för Logto. De återstående paketen är dess peer-beroenden. De kunde inte listas som direkta beroenden eftersom Expo CLI kräver att alla beroenden för native-moduler installeras direkt i rotprojektets package.json.

Init Logto-provider

Importera och använd LogtoProvider för att tillhandahålla ett Logto-kontext:

Implementera inloggning och utloggning

Switaska till applikationsdetaljsidan i Logto Console. Lägg till en inbyggd omdirigerings-URI (till exempel io.logto://callback), klicka sedan på "Spara".

  • För iOS, spelar omdirigerings-URI-schema egentligen ingen roll eftersom klassen ASWebAuthenticationSession kommer att lyssna på omdirigerings-URI oavsett om den är registrerad.

  • För Android, måste omdirigerings-URI-schema fyllas i Expos app.json-fil, till exempel:

Nu tillbaka till din app, du kan använda useLogto-hook för att logga in och logga ut:

Visa användarinformation

För att visa användarens information kan du använda metoden getIdTokenClaims():

Kontrollpunkt: Kör applikationen

Nu kan du köra applikationen och försöka logga in/ut med Logto:

  1. Öppna applikationen i din webbläsare, du borde se knappen "Logga in".
  2. Klicka på knappen "Logga in", och du borde omdirigeras till Logtos inloggningssida.
  3. Efter att du har loggat in, borde du omdirigeras tillbaka till applikationen, och du borde se användardata och knappen "Logga ut".
  4. Klicka på knappen "Logga ut", och du borde omdirigeras till Logtos utloggningssida, och sedan omdirigeras tillbaka till applikationen med ett utloggat tillstånd.

Om du stöter på några problem under integrationen, tveka inte att gå med i vår Discord-server för att chatta med communityn och Logto-teamet!

Ytterligare läsning

Prova Logto idag