Configurer Universal Login
Dans votre Auth0 Dashboard, vous pouvez choisir l’expérience à utiliser pour les pages de connexion par défaut sous Image de marque > Universal Login > Options avancées. Auth0 offre deux expériences de connexion hébergées :- Universal Login offre une expérience simplifiée aux utilisateurs et ne nécessite pas l’utilisation de JavaScript pour la personnalisation.
- Classic Login utilise des contrôles JavaScript pour chaque page du flux de connexion.
Accessibilité
Auth0 applique les normes suivantes pour améliorer l’accessibilité des flux Universal Login pour les personnes qui utilisent des technologies d’assistance : Auth0 Universal Login prend en charge ces normes par défaut. Voici les aspects qui pourraient avoir une incidence sur les personnalisations des clients :- Les erreurs de validation s’affichent dans le formulaire plutôt que sous forme d’infobulles afin d’être accessibles aux lecteurs d’écran.
- Les couleurs par défaut des composants de l’interface respectent les directives WCAG en matière de contraste.
- Les formulaires utilisent l’autocorrection.
- Les attributs ARIA et les autres attributs des composants de l’interface facilitent la navigation avec les lecteurs d’écran.
- Les adresses courriel sont validées côté client et suivent les mêmes règles de formatage que la validation côté serveur.
- Les libellés HTML sont accessibles et associés à leurs champs de saisie respectifs.
- Les exigences de complexité des mots de passe et les messages d’erreur affichés dans le formulaire sont annoncés par les lecteurs d’écran.
- Tous les écrans du ont un titre de page clair et distinct.
- Les champs obligatoires comportent un indicateur visuel sur leur libellé.
Personnaliser la page de connexion
Après avoir activé Universal Login, vous pouvez personnaliser votre page de connexion directement depuis le Auth0 Dashboard. Plus précisément, vous pouvez personnaliser les modèles de page et les thèmes, les écrans d’inscription et de connexion, ainsi que d’autres éléments textuels. Pour en savoir plus, consultez Personnaliser Universal Login. Si vous décidez d’implanter Classic Login, vous pouvez personnaliser les options de base liées à l’image de marque depuis le Auth0 Dashboard. Vous pouvez ensuite configurer des personnalisations avancées à l’aide du SDK utilisé pour créer votre flux de connexion. Pour en savoir plus, consultez Personnaliser Classic Login.Mettre en œuvre Universal Login
Après avoir activé Universal Login ou Classic Login dans votre tenant, suivez les étapes ci-dessous pour mettre en œuvre cette expérience :- Enregistrez votre application auprès d’Auth0.
- Configurez votre application pour effectuer une requête vers le point de terminaison Login de l’Authentication API afin de déclencher le flux de connexion et de gérer la réponse. Vous pouvez le configurer directement ou utiliser l’un des SDKs d’Auth0.
- Créez une connexion Database, Enterprise ou Social, puis activez-la pour votre application.
Accéder à la page de connexion
Vous pouvez envoyer une requête directement au point de terminaison Login depuis n’importe quel navigateur : La requête doit inclure les valeurs suivantes :-
response_type(soitcode, soittoken) -
client_id -
redirect_uri -
state- Pour mieux comprendre pourquoi cette valeur est requise, consultez Prévenir les attaques et rediriger les utilisateurs à l’aide des paramètres d’état OAuth 2.0.
connection pour demander aux utilisateurs de s’authentifier avec la connexion spécifiée.
ID de corrélation
Universal Login prend en charge les événements corrélés dans tous les flux d’authentification. Après avoir implémenté Universal Login, votre application génère un ID unique que vous transmettez commecorrelation_id au point de terminaison /authorize. Cet ID unique est conservé pendant les événements d’authentification suivants :
- Inscription
- Connexion
- Inscription à l’authentification multifacteur (MFA) et demandes de vérification
- Réinitialisation du mot de passe
correlation_id transmis, vous pouvez suivre les événements d’authentification dans les journaux Auth0.
Pour en savoir plus, consultez ID de corrélation.