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.
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:
- Logga in på Logto Console.
- I den vänstra navigeringsbaren, klicka på Applikationer.
- Klicka på Skapa applikation.
- På den öppnade sidan, hitta sektionen "Native" och lokalisera kortet "Expo (React Native)".
- Klicka på Börja bygga och ange namnet på din applikation.
- 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.
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:
- Öppna applikationen i din webbläsare, du borde se knappen "Logga in".
- Klicka på knappen "Logga in", och du borde omdirigeras till Logtos inloggningssida.
- Efter att du har loggat in, borde du omdirigeras tillbaka till applikationen, och du borde se användardata och knappen "Logga ut".
- 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!