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.
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.
Innan du börjar, säkerställ att du har följande:
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:
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.
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.
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.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.
Kör Capacitor-appen och klicka på inloggningsknappen. Ett webbläsarfönster öppnas och omdirigerar till Logtos inloggningssida.
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:
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!