## Introduction - [Logto](https://logto.io/) est une alternative moderne à Auth0 pour construire une infrastructure d'identité client avec un minimum d'effort. Il prend en charge diverses méthodes de connexion, y compris le nom d'utilisateur, l'email, le numéro de téléphone et les connexions sociales populaires comme Google et GitHub. - [Capacitor](https://capacitorjs.com/) est un runtime natif open-source pour créer des applications Web Native. Dans ce tutoriel, nous allons démontrer comment créer le flux d'authentification avec Logto dans Capacitor. Cela vous permettra de créer facilement des flux d'inscription et de connexion multiplateformes. ## Prérequis Avant de commencer, assurez-vous d'avoir les éléments suivants : - Un compte Logto. Si tu n'en as pas, tu peux [t'inscrire gratuitement](https://cloud.logto.io/). - Un projet Capacitor. Tu peux suivre le [guide officiel](https://capacitorjs.com/docs/getting-started) pour en créer un. ## Créer une application Logto Pour commencer, créez une application Logto de type "Natif". Les applications Logto servent d'applications clientes dans les flux OAuth 2.0 et OpenID Connect (OIDC). Suivez ces étapes pour créer une application Logto : 1. Connectez-vous à la [Console Cloud Logto](https://cloud.logto.io/). 2. Dans la barre de navigation de gauche, cliquez sur **Applications**. 3. Cliquez sur **Créer une application**. 4. Sélectionnez **Natif** comme type d'application et entrez le nom de l'application. 5. Cliquez sur **Créer**. Créer une application Logto

Après avoir créé l'application Logto, configurez l'URI de redirection. L'URI de redirection est utilisé pour rediriger l'utilisateur vers votre application après le flux d'authentification. Assurez-vous que l'URI redirige vers l'application Capacitor, par exemple, `com.example.app://callback`. La valeur peut varier selon la configuration de votre application Capacitor. Pour plus de détails, voir [Capacitor Deep Links](https://capacitorjs.com/docs/guides/deep-links). N'oubliez pas de cliquer sur **Enregistrer les modifications** après avoir mis à jour l'URI de redirection. Si vous n'êtes pas sûr de l'URI de redirection, vous pouvez le laisser vide pour l'instant et le mettre à jour plus tard. ## Configurer Capacitor En supposant que vous avez déjà un projet Capacitor, ce tutoriel est agnostique au framework, vous pouvez donc utiliser le framework d'interface utilisateur de votre choix et mettre à jour le code en conséquence. ### Installer les dépendances ```bash # ou yarn, pnpm npm install @logto/capacitor # Installer les dépendances peer npm install @capacitor/browser @capacitor/app @capacitor/preferences ``` ### Initialiser le client Logto ```ts import LogtoClient from '@logto/capacitor'; const logtoClient = new LogtoClient({ endpoint: 'https://your-logto-endpoint', appId: '', }); ``` - Le `endpoint` est le point d'accès API de Logto. Tu peux le trouver dans le guide intégré ou la section **Domaines** des paramètres du locataire. - Le `appId` est l'identifiant de l'application Logto. Tu peux le trouver sur la page des détails de l'application. ### Implémenter le bouton de connexion Ajoute le code suivant au gestionnaire `onClick` du bouton de connexion : ```ts const onClick = async () => { await logtoClient.signIn('com.example.app://callback'); console.log(await logtoClient.isAuthenticated()); // true console.log(await logtoClient.getIdTokenClaims()); // { sub: '...', ... } }; ``` Remplace `com.example.app://callback` par l'URI de redirection que tu as configurée dans l'application Logto. ### Point de contrôle : Démarrer le flux d'authentification Exécutez l'application Capacitor et cliquez sur le bouton de connexion. Une fenêtre de navigateur s'ouvrira, redirigeant vers la page de connexion Logto.

Si l'utilisateur ferme la fenêtre du navigateur sans terminer le flux d'authentification, l'application Capacitor recevra une `LogtoClientError`. ## Déconnexion Étant donné que Capacitor utilise le Safari View Controller sur iOS et les Chrome Custom Tabs sur Android, l'état d'authentification peut persister un certain temps. Cependant, parfois l'utilisateur peut vouloir se déconnecter de l'application immédiatement. Dans ce cas, nous pouvons utiliser la méthode `signOut` pour déconnecter l'utilisateur : ```ts const onClick = async () => { await logtoClient.signOut(); console.log(await logtoClient.isAuthenticated()); // false }; ``` La méthode `signOut` a un paramètre optionnel pour l'URI de redirection après déconnexion. Si ce n'est pas fourni, l'utilisateur sera redirigé vers la page de déconnexion de Logto : Page de déconnexion Logto

L'utilisateur doit cliquer sur "Terminé" pour fermer la vue web et revenir à l'application Capacitor. Si tu veux rediriger automatiquement l'utilisateur vers l'application Capacitor, tu peux fournir l'URI de redirection après déconnexion : ```ts const onClick = async () => { await logtoClient.signOut('com.example.app://callback/sign-out'); }; ``` Assurez-vous que l'URI de redirection après déconnexion redirige vers l'application Capacitor, et n'oubliez pas d'ajouter l'URI de redirection après déconnexion à la Console Logto : Configuration URI de redirection Logto

## Point de contrôle : Compléter le flux d'authentification Exécutez à nouveau l'application Capacitor et cliquez sur le bouton de connexion. Si tout se passe bien, lorsque le flux d'authentification est terminé, l'application Capacitor recevra le résultat de la connexion et affichera les revendications de l'utilisateur dans la console. Application iOS Capacitor

Ensuite, cliquez sur le bouton de déconnexion, et l'application Capacitor sera redirigée vers la page de déconnexion de Logto. Elle redirigera automatiquement vers l'application Capacitor si l'URI de redirection après déconnexion est configurée. Maintenant tu peux configurer le flux d'authentification dans la Console Cloud Logto sans écrire de code complexe. La configuration s'appliquera à toutes les applications clientes, assurant une expérience utilisateur cohérente. Si tu rencontres des problèmes lors de l'intégration, n'hésite pas à nous contacter par e-mail à contact@logto.io ou [rejoindre notre serveur Discord](https://discord.gg/UEPaF3j5e6) ! ## Lectures complémentaires - [Personnaliser l'expérience de connexion](https://docs.logto.io/docs/recipes/customize-sie/) - [Configurer les connecteurs](https://docs.logto.io/docs/recipes/configure-connectors/) - [Protéger votre API](https://docs.logto.io/docs/recipes/protect-your-api/) Essayer Logto aujourd'hui