Svenska
  • auth
  • autentisering
  • identitet
  • integration
  • kapacitor
  • capacitorjs
  • oidc
  • oauth
  • plattformöverskridande

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.

Gao
Gao
Founder

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:

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:

  1. Logga in på Logto Cloud Console.
  2. I den vänstra navigeringsraden klickar du på Applikationer.
  3. Klicka på Skapa applikation.
  4. Välj Native som applikationstyp och ange applikationsnamnet.
  5. Klicka på Skapa.
Skapa 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.

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.

Logto 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:

Logto 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:

Logto omdirigerings-URI-konfiguration

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.

Capacitor iOS-app

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!

Vidare läsning

Prova Logto Idag