Bygg CapacitorJS-autentisering med Logto
I denna handledning visar vi hur du skapar autentiseringsflödet med Logto i Capacitor. Detta gör att du enkelt kan skapa flöden för inloggning och registrering på flera plattformar.
Introduktion
- Logto är ett modernt alternativ till Auth0 för att bygga kundidentitetsinfrastruktur med minimal ansträngning. Det stöder olika inloggningsmetoder, inklusive användarnamn, e-post, telefonnummer och populära sociala inloggningar som Google och GitHub.
- Capacitor är en open-source-nativ runtime för att bygga webbnativa appar.
I denna handledning visar vi hur du skapar autentiseringsflödet med Logto i Capacitor. Detta möjliggör enkla flöden för inloggning och registrering på flera plattformar.
Förutsättningar
Innan du börjar, säkerställ att du har följande:
- Ett Logto-konto. Om du inte har ett kan du registrera dig gratis.
- Ett Capacitor-projekt. Du kan följa den officiella guiden för att skapa ett.
Skapa en Logto-applikation
För att börja, skapa en Logto-applikation av typen "Native". Logto-applikationer fungerar som klientapplikationer i OAuth 2.0 och OpenID Connect (OIDC) flöden. Följ dessa steg för att skapa en Logto-applikation:
- Logga in på Logto Cloud Console.
- I den vänstra navigeringsraden klickar du på Applikationer.
- Klicka på Skapa applikation.
- Välj Native som applikationstyp och ange applikationsnamnet.
- Klicka på Skapa.
Efter att du har skapat Logto-applikationen, konfigurera omdirigerings-URI:n. Omdirigerings-URI:n används för att omdirigera användaren tillbaka till din applikation efter autentiseringsflödet.
Säkerställ att URI:n omdirigerar till Capacitor-appen, till exempel com.example.app://callback
. Värdet kan variera beroende på din Capacitor-apps konfiguration. För mer information, se Capacitor Deep Links.
Kom ihåg att klicka på Spara ändringar efter att du uppdaterat omdirigerings-URI:n.
Om du är osäker på omdirigerings-URI:n kan du lämna den tom för nu och uppdatera den senare.
Sätt upp Capacitor
Förutsatt att du redan har ett Capacitor-projekt är denna handledning ramverksoberoende, så du kan använda vilket UI-ramverk du föredrar och uppdatera koden därefter.
Installera beroenden
Initiera Logto-klienten
endpoint
är Logto API-endpointen. Du kan hitta den i den inbyggda guiden eller under Domäner i hyresinställningarna.appId
är Logto-applikations-ID:t. Du kan hitta det på applikationsdetaljsidan.
Implementera inloggningsknappen
Lägg till följande kod i onClick
-hanteraren för inloggningsknappen:
Ersätt com.example.app://callback
med den omdirigerings-URI du konfigurerade i Logto-applikationen.
Kontrollpunkt: Starta autentiseringsflödet
Kör Capacitor-appen och klicka på inloggningsknappen. Ett webbläsarfönster öppnas och omdirigerar till Logtos inloggningssida.
Logga ut
Eftersom Capacitor använder Safari View Controller på iOS och Chrome Custom Tabs på Android kan autentiseringstillståndet behållas ett tag. Dock kan användaren ibland vilja logga ut från applikationen omedelbart. I detta fall kan vi använda signOut
-metoden för att logga ut användaren:
signOut
-metoden har en valfri parameter för omdirigerings-URI efter utloggning. Om den inte anges kommer användaren att omdirigeras till Logtos utloggningssida:
Användaren behöver klicka "Klar" för att stänga webbvisningen och återgå till Capacitor-appen. Om du vill omdirigera användaren automatiskt tillbaka till Capacitor-appen kan du ange omdirigerings-URI efter utloggning:
Säkerställ att omdirigerings-URI:n efter utloggning omdirigerar till Capacitor-appen, och kom ihåg att lägga till omdirigerings-URI:n efter utloggning till Logto Console:
Kontrollpunkt: Slutför autentiseringsflödet
Kör Capacitor-appen igen och klicka på inloggningsknappen. Om allt går bra, när autentiseringsflödet är slutfört, kommer Capacitor-appen få inloggningsresultatet och skriva ut användarens krav i konsolen.
Klicka sedan på utloggningsknappen, och Capacitor-appen kommer omdirigeras till Logtos utloggningssida. Den kommer automatiskt omdirigera tillbaka till Capacitor-appen om omdirigerings-URI:n efter utloggning är konfigurerad.
Nu kan du konfigurera autentiseringsflödet i Logto Cloud Console utan att skriva komplex kod. Konfigurationen kommer att gälla för alla klientapplikationer, vilket säkerställer en konsekvent användarupplevelse.
Om du stöter på några problem under integrationen, tveka inte att kontakta oss via e-post på [email protected] eller gå med i vår Discord-server!