## Inleiding - [Logto](https://logto.io/) is een modern alternatief voor Auth0 om klantidentiteitsinfrastructuur met minimale inspanning te bouwen. Het ondersteunt verschillende aanmeldmethoden, waaronder gebruikersnaam, e-mail, telefoonnummer en populaire sociale aanmeldingen zoals Google en GitHub. - [Capacitor](https://capacitorjs.com/) is een open-source native runtime voor het bouwen van Web Native apps. In deze handleiding demonstreren we hoe je de authenticatiestroom kunt bouwen met Logto in Capacitor. Hiermee kun je eenvoudig platformonafhankelijke aanmeld- en registratiestromen creëren. ## Vereisten Voordat je begint, zorg ervoor dat je het volgende hebt: - Een Logto-account. Als je er nog geen hebt, kun je [gratis aanmelden](https://cloud.logto.io/). - Een Capacitor-project. Je kunt de [officiële handleiding](https://capacitorjs.com/docs/getting-started) volgen om er een te maken. ## Maak een Logto-toepassing Om te beginnen, maak je een Logto-toepassing van het type "Native". Logto-toepassingen dienen als clienttoepassingen in de OAuth 2.0- en OpenID Connect (OIDC)-stromen. Volg deze stappen om een Logto-toepassing te maken: 1. Meld je aan bij de [Logto Cloud Console](https://cloud.logto.io/). 2. Klik in de linker navigatiebalk op **Toepassingen**. 3. Klik op **Toepassing maken**. 4. Selecteer **Native** als het type toepassing en voer de toepassingsnaam in. 5. Klik op **Maken**. Maak Logto-toepassing

Na het maken van de Logto-toepassing, configureer je de omleidings-URI. De omleidings-URI wordt gebruikt om de gebruiker na de authenticatiestroom terug te leiden naar je toepassing. Zorg ervoor dat de URI verwijst naar de Capacitor-app, bijvoorbeeld `com.example.app://callback`. De waarde kan variëren, afhankelijk van je Capacitor-appconfiguratie. Voor meer details, zie [Capacitor Deep Links](https://capacitorjs.com/docs/guides/deep-links). Vergeet niet op **Wijzigingen opslaan** te klikken na het bijwerken van de omleidings-URI. Als je niet zeker weet wat de omleidings-URI moet zijn, kun je deze voorlopig leeg laten en later bijwerken. ## Capacitor instellen Ervan uitgaande dat je al een Capacitor-project hebt, is deze handleiding framework-agnostisch, dus je kunt elk UI-framework gebruiken dat je verkiest en de code dienovereenkomstig aanpassen. ### Installeer vereisten ```bash # of yarn, pnpm npm install @logto/capacitor # Installeer peer dependencies npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Initialiseer Logto-client ```ts import LogtoClient from '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - De `endpoint` is het Logto API-eindpunt. Je kunt het vinden in de ingebouwde gids of de **Domeinen** sectie in de tenant-instellingen. - De `appId` is de Logto-toepassings-ID. Je kunt het vinden op de toepassingsdetailpagina. ### Implementeer de aanmeldknop Voeg de volgende code toe aan de `onClick`-handler van de aanmeldknop: ```ts const onClick = async () => { await logtoClient.signIn('com.example.app://callback'); console.log(await logtoClient.isAuthenticated()); // true console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... } }; ``` Vervang `com.example.app://callback` door de omleidings-URI die je configureerde in de Logto-toepassing. ### Checkpoint: Start de authenticatiestroom Voer de Capacitor-app uit en klik op de aanmeldknop. Een browservenster wordt geopend en leidt door naar de Logto-aanmeldpagina.

Als de gebruiker het browservenster sluit zonder de authenticatiestroom te voltooien, ontvangt de Capacitor app een `LogtoClientError`. ## Uitloggen Aangezien Capacitor gebruikmaakt van de Safari View Controller op iOS en Chrome Custom Tabs op Android, kan de authenticatiestatus een tijdje bewaard blijven. Soms wil de gebruiker echter meteen uit de toepassing uitloggen. In dit geval kunnen we de `signOut`-methode gebruiken om de gebruiker uit te loggen: ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` De `signOut`-methode heeft een optionele parameter voor de omleidings-URI na het uitloggen. Als deze niet is opgegeven, wordt de gebruiker naar de Logto-uitlogpagina geleid:

De gebruiker moet op "Gereed" klikken om de webweergave te sluiten en terug te keren naar de Capacitor-app. Als je de gebruiker automatisch terug wilt leiden naar de Capacitor-app, kun je de omleidings-URI na het uitloggen opgeven: ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` Zorg ervoor dat de omleidings-URI na het uitloggen verwijst naar de Capacitor-app, en vergeet niet de omleidings-URI na het uitloggen toe te voegen aan de Logto-console: Logto omleidings-URI-configuratie

## Checkpoint: Voltooi de authenticatiestroom Voer de Capacitor-app opnieuw uit en klik op de aanmeldknop. Als alles goed gaat, ontvangt de Capacitor-app het aanmeldresultaat wanneer de authenticatiestroom is voltooid en print de gebruikersclaims in de console. Capacitor iOS-app

Klik dan op de uitlogknop en de Capacitor-app wordt omgeleid naar de Logto-uitlogpagina. Het zal automatisch terugleiden naar de Capacitor-app als de omleidings-URI na het uitloggen is ingesteld. Nu kun je de authenticatiestroom configureren in de Logto Cloud Console zonder complexe code te schrijven. De configuratie wordt toegepast op alle clienttoepassingen, waardoor een consistente gebruikerservaring wordt verzekerd. Als je problemen ondervindt tijdens de integratie, aarzel dan niet om contact met ons op te nemen via e-mail op contact@logto.io of [sluit je aan bij onze Discord-server](https://discord.gg/UEPaF3j5e6)! ## Verdere leestips - [Pas de aanmeldervaring aan](https://docs.logto.io/docs/recipes/customize-sie/) - [Configureer connectoren](https://docs.logto.io/docs/recipes/configure-connectors/) - [Bescherm je API](https://docs.logto.io/docs/recipes/protect-your-api/) Probeer Logto Vandaag