Aller au contenu principal

Tester l’expérience utilisateur avec l’aperçu en direct

Vous pouvez utiliser la fonctionnalité Aperçu en direct pour tester facilement vos configurations d’expérience de connexion.

Aperçu en direct​

En naviguant vers Console > Expérience de connexion et en cliquant sur le bouton "Aperçu en direct" en haut à droite, une nouvelle fenêtre de navigateur s’ouvrira avec une démo entièrement fonctionnelle des capacités de Logto. Cette démo met en avant notre approche de conception de l’expérience pour les flux de connexion et d’inscription. Elle est hautement personnalisable et peut être intégrée sans effort à votre application.

remarque:

Dans cet aperçu, vous devez d’abord créer un compte pour tester l’expérience. Vous pourrez ensuite gérer ce compte dans Console > Gestion des utilisateurs.

Si vous essayez de vous connecter avec le compte utilisateur que vous avez créé et que le processus réussit sans problème, vous serez redirigé vers une page de succès affichant vos identifiants et votre ID.

Panneau développeur​

Après une connexion réussie via l’Aperçu en direct de Logto, vous arriverez sur un tableau de bord contenant deux actions principales :

  • Bouton de déconnexion de l’aperçu en direct : Termine la session en cours.
  • Bouton ouvrir le panneau développeur : Lance des outils de débogage pour analyser votre flux d’authentification.

Le panneau de développement fournit des informations en temps réel pour le dépannage de l’intégration OIDC, l’inspection des jetons et des revendications, et le test de scénarios d’identité avancés.

Configuration Logto​

L’Aperçu en direct repose sur une application de démonstration cachée proposant par défaut une expérience de connexion unifiée. Dans la section Configuration Logto, vous pouvez configurer les paramètres d’authentification inclus dans les requêtes d’authentification pour indiquer à l’endpoint OIDC de Logto comment gérer le processus d’authentification. Cela inclut la définition de l’ID de votre application, l’attribution d’un ID d’organisation, la demande de portées spécifiques, etc. Cette configuration est similaire à l’initialisation du LogtoClient avec le LogtoProvider, qui établit un contexte Logto pour votre application.

remarque:

N’oubliez pas d’enregistrer vos modifications de configuration. Elles prendront effet lors de votre prochaine connexion avec l’Aperçu en direct.

  • ID de l’application : Spécifiez votre ID d’application unique. Il est essentiel pour tester l’expérience de connexion par application, les politiques de protection des ressources.
  • Paramètres supplémentaires de connexion : Fournissez des paramètres d’authentification supplémentaires pour tester le processus de connexion personnalisé. Par exemples :
  • Prompt : Ajoutez des valeurs de prompt OIDC (séparées par des espaces) pour spécifier si le serveur d’autorisation doit demander à l’utilisateur final de se réauthentifier et de donner son consentement. Les valeurs définies sont :
    • login : Force la réauthentification de l’utilisateur final.
    • consent : Nécessite le consentement de l’utilisateur avant de partager des informations avec le client.
    • none : Indique qu’aucune interface utilisateur ne doit être affichée. Cette option est utilisée pour vérifier l’existence d’une authentification ou d’un consentement préalable.
  • Portée (Scope) : Spécifiez les portées (séparées par des espaces) pour les demandes de revendications. Par exemple :
    • Pour demander les détails d’organisation de l’utilisateur, utilisez deux portées : urn:logto:scope:organizations urn:logto:scope:organization_roles
    • Pour demander des permissions API, indiquez les noms de portées dans le champ Portée et saisissez l’identifiant API correspondant dans le champ Ressource ci-dessous.
  • Ressource : Saisissez les identifiants des ressources API (séparés par des espaces) auxquels votre application doit accéder. Ce champ permet à votre application de demander des jetons d’accès à des ressources spécifiques selon les besoins.

Attribution du jeton de rafraîchissement​

Cette section détaille comment rafraîchir les jetons pour différents types d’accès.

  • Ressource : Saisissez l’identifiant API spécifique (séparé par des espaces) si vous devez rafraîchir des jetons d’accès à des ressources API.
  • ID d’organisation : Saisissez l’ID d’organisation (séparé par des espaces) si vous devez rafraîchir des jetons d’organisation.

Consultez Autorisation pour plus de détails sur l’utilisation de l’attribution du jeton de rafraîchissement.

remarque:

Incluez consent dans le paramètre prompt pour offline_access. Un jeton de rafraîchissement (Refresh token) ne sera émis que si le prompt inclut consent.

Informations utilisateur​

Vérifiez les données utilisateur récupérées depuis votre flux d’authentification :

  • Obtenir les revendications du jeton d’identifiant (ID token) : Récupérez toutes les revendications contenues dans le jeton d’identifiant (ID token), telles que at_hash, aud, auth_time, exp, iat, issu, et les profils utilisateur additionnels. Ceci est utile pour valider le jeton et extraire les informations utilisateur nécessaires.
  • Récupérer les informations utilisateur : Récupérez uniquement les informations de profil utilisateur en interrogeant l’endpoint userinfo.
remarque:

Utilisez les outils de développement de Chrome (F12 → Console) pour inspecter les requêtes réseau et examiner les jetons et revendications.