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.
GaoFounder
Arrêtez de perdre des semaines sur l'authentification des utilisateurs
Lancez des applications sécurisées plus rapidement avec Logto. Intégrez l'authentification des utilisateurs en quelques minutes et concentrez-vous sur votre produit principal.
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.
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 :
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.
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.
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.
É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.
