Créer une authentification CapacitorJS avec Logto
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.
Founder
Introduction
- Logto 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 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.
- Un projet Capacitor. Tu peux suivre le guide officiel 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 :
- Connectez-vous à la Console Cloud Logto.
- Dans la barre de navigation de gauche, cliquez sur Applications.
- Cliquez sur Créer une application.
- Sélectionnez Natif comme type d'application et entrez le nom de l'application.
- Cliquez sur Créer.
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.
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
Initialiser le client Logto
- Le
endpointest 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
appIdest 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 :
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.
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 :
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 :
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 :
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 :
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.
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 à [email protected] ou rejoindre notre serveur Discord !