## Introduktion - [Logto](https://logto.io/) ä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](https://capacitorjs.com/) ä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](https://cloud.logto.io/). - Ett Capacitor-projekt. Du kan följa den [officiella guiden](https://capacitorjs.com/docs/getting-started) 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: 1. Logga in på [Logto Cloud Console](https://cloud.logto.io/). 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](https://capacitorjs.com/docs/guides/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 ```bash # eller yarn, pnpm npm install @logto/capacitor # Installera peerberoenden npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Initiera Logto-klienten ```ts import LogtoClient från '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - `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: ```ts const onClick = async () => { await logtoClient.signIn('com.example.app://callback'); console.log(await logtoClient.isAuthenticated()); // true console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... } }; ``` 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

Om användaren stänger webbläsarfönstret utan att slutföra autentiseringsflödet kommer Capacitor appen att få ett `LogtoClientError`. ## 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: ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` `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: ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` 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å contact@logto.io eller [gå med i vår Discord-server](https://discord.gg/UEPaF3j5e6)! ## Vidare läsning - [Anpassa inloggningsupplevelsen](https://docs.logto.io/docs/recipes/customize-sie/) - [Konfigurera anslutningar](https://docs.logto.io/docs/recipes/configure-connectors/) - [Skydda din API](https://docs.logto.io/docs/recipes/protect-your-api/) Prova Logto Idag