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" dans le coin supérieur droit, une nouvelle fenêtre de navigateur s'ouvrira avec une démonstration entièrement fonctionnelle des capacités de Logto. Cette démonstration met en avant notre approche de conception d'expérience pour les flux de connexion et d'inscription. Elle est hautement personnalisable et peut être intégrée de manière transparente dans votre application.

remarque:

Dans cet aperçu, vous devez d'abord créer un compte pour tester l'expérience. Vous pouvez gérer ce compte plus tard 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 de développement​

Après une connexion réussie en utilisant 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 d'ouverture du panneau de développement : 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 résoudre les problèmes d'intégration OIDC, inspecter les jetons et revendications, et tester des scénarios d'identité avancés.

Configuration Logto​

L'Aperçu en direct repose sur une application de démonstration cachée présentant une expérience de connexion unifiée par défaut. Dans la section Configuration Logto, vous pouvez configurer les paramètres d'authentification inclus dans les requêtes d'authentification pour indiquer au point de terminaison OIDC de Logto comment gérer le processus d'authentification. Cela inclut la définition de votre ID d'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 de sauvegarder vos modifications de configuration. Elles prendront effet la prochaine fois que vous vous connecterez avec l'Aperçu en direct.

  • ID d'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 exemple :
  • Invite : Ajoutez des valeurs d'invite OIDC (séparées par des espaces) pour spécifier si le serveur d'autorisation invite l'utilisateur final à se réauthentifier et à 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éexistant.
  • Portée : Spécifiez les portées (séparées par des espaces) pour les demandes de revendications. Par exemple :
    • Pour demander des détails sur l'organisation de l'utilisateur, utilisez deux portées : urn:logto:scope:organizations urn:logto:scope:organization_roles
    • Pour demander des permissions API, fournissez les noms des portées dans le champ Portée et entrez l'identifiant API correspondant dans le champ Ressource ci-dessous.
  • Ressource : Entrez les identifiants des ressources API (séparés par des espaces) auxquels votre application a besoin d'accéder. Ce champ permet à votre application de demander des jetons d'accès à des ressources spécifiques selon les besoins.

Octroi de jeton de rafraîchissement​

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

Si à la fois une Ressource et un ID d'organisation sont fournis, la requête de rafraîchissement renverra un jeton d’accès qui prend en charge la protection des ressources API avec le modèle d'organisation.

remarque:

Incluez consent dans le paramètre d'invite pour offline_access. Un jeton de rafraîchissement ne sera émis que si l'invite inclut consent.

Informations utilisateur​

Vérifiez les données utilisateur récupérées de votre flux d'authentification :

  • Obtenir les revendications du jeton d’identifiant : Récupérez toutes les revendications contenues dans le jeton d’identifiant, telles que at_hash, aud, auth_time, exp, iat, issu, et des profils utilisateur supplémentaires. Cela 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 le point de terminaison 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.