Passer au contenu principal
À l’heure actuelle, les efforts de développement d’Auth0 sont axés sur Universal Login, et Classic Login n’est plus mis à jour. Pour personnaliser vos pages de connexion, Auth0 recommande les personnalisations avancées pour Universal Login.
Classic Login est une expérience de connexion hébergée par Auth0 qui s’appuie sur JavaScript pour la personnalisation avancée. La mise en œuvre de Classic Login est moins complexe que l’intégration directe du processus d’authentification à votre application, et elle peut aider à prévenir les risques liés à l’authentification inter-origines. Par défaut, la page Classic Login utilise le widget Lock pour authentifier les utilisateurs. Cependant, vous pouvez aussi personnaliser les modèles Lock en mode ou une interface utilisateur personnalisée créée avec le SDK Auth0.js. Pour personnaliser les modèles de votre page Classic Login, vous devez d’abord activer la personnalisation avancée. Pour ce faire, suivez les étapes ci-dessous :
  1. Dans l’Auth0 Dashboard, accédez à Branding > Universal Login > Login tab.
  2. Activez le bouton bascule Customize Login Page.
  3. Au-dessus de l’éditeur de code HTML, sélectionnez le menu Default Templates et choisissez l’option souhaitée.
Les modèles disponibles sont les suivants :
  • Lock
  • Lock (Passwordless)
  • Custom Login Form
Les deux modèles Lock vous permettent de personnaliser le widget Lock utilisé pour l’authentification. Le widget Lock offre un ensemble standard de comportements et une interface utilisateur personnalisable. Vous pouvez aussi utiliser le modèle Custom Login Form pour personnaliser votre page de connexion avec le SDK Auth0 pour le Web ou l’Authentication API. Les SDK Auth0 sont des bibliothèques côté client qui n’offrent pas d’interface utilisateur, mais qui permettent une personnalisation plus poussée du comportement et de l’apparence de la page de connexion. L’Authentication API fournit une intégration directe sans utiliser les SDK Auth0. Le modèle utilisé pour personnaliser votre page de connexion dépendra des besoins propres à votre application. Les sections ci-dessous présentent un aperçu de chaque option : Lock, les SDK Auth0 ou l’Authentication API.

​
Utilisation du widget Lock

Lock est un formulaire de connexion qui permet à vos utilisateurs de s’authentifier facilement à l’aide d’une connexion choisie. Lock gère automatiquement la plupart des aspects liés à la création et à l’authentification des utilisateurs. Avec Lock, vous mettrez en place une interface utilisateur qui :
  • Est robuste et offre une excellente expérience utilisateur sur n’importe quel appareil, quelle que soit la résolution
  • Présente une conception simple qui s’intègre à la plupart des sites Web moyennant quelques ajustements de couleur
  • S’adapte à votre configuration en affichant les champs appropriés pour chaque connexion disponible, et uniquement ceux qui sont autorisés (comme l’inscription ou la réinitialisation du mot de passe)
  • Sélectionne automatiquement la bonne connexion. Vous pouvez définir un comportement par défaut pour les cas ambigus
  • Se souvient de la dernière connexion utilisée pour un utilisateur donné
  • Prend automatiquement en charge l’internationalisation
  • Fournit une validation instantanée de la stratégie de mot de passe lors de l’inscription
Bien que vous ne puissiez pas modifier considérablement le comportement de Lock, vous pouvez configurer plusieurs options de base pour en changer l’apparence et le fonctionnement. Envisagez d’utiliser Lock si :
  • Vous aimez la structure et l’apparence du widget.
  • Vous préférez une implémentation simplifiée de Classic Login avec une interface utilisateur adaptative prête à l’emploi.
  • Votre processus comprend plusieurs des cas d’utilisation que Lock prend en charge d’emblée :
    • Connexions d’entreprise
    • Bases de données avec des stratégies de mot de passe
    • Inscription des utilisateurs et réinitialisation du mot de passe
    • Authentification à l’aide de fournisseurs sociaux
    • Avatars

​
Exemples de scripts pour personnaliser la connexion

L’exemple de script ci-dessous permet de personnaliser le logo de chaque application, ou de définir un logo par défaut. La résolution minimale recommandée est de 200 pixels de largeur sur 200 pixels de hauteur. Ajoutez la configuration logouturl au bloc <scripts> : 
var logourl = "https://example.com/defaultlogo1.png"; //définir le logo par défaut
if(config.clientID === "HUXwC72R3qr9JJo9ImPsdzJbtY8aD5kS")
{
    logourl = "https://example.com/defaultlogo2.png";
}
theme: {
    logo: logourl,
    primaryColor: colors.primary ? colors.primary : 'green'
},

​
Personnaliser les conditions d’inscription

L’exemple ci-dessous montre comment personnaliser les conditions d’inscription de votre application. Vous pouvez ajouter un texte personnalisé à afficher lorsque les utilisateurs s’inscrivent. 
var languageDictionary;

languageDictionary = {
    signUpTerms: "I agree to the <a href='https://my-app-url.com/terms' target='_blank'>terms of service</a> and <a href='https://my-app-url.com/privacy' target='_blank'>privacy policy</a>."
};

​
Utilisation du SDK Auth0 pour le Web

Si les exigences de votre application ne peuvent pas être satisfaites par le comportement standard de Lock, ou si vous avez un processus d’authentification personnalisé complexe, vous aurez besoin d’une interface utilisateur personnalisée. Vous pouvez aussi privilégier cette option si vous avez déjà une interface utilisateur que vous souhaitez utiliser. Avec la bibliothèque Web d’Auth0, vous pouvez personnaliser le comportement et le déroulement du processus utilisé pour déclencher l’inscription et l’authentification. Vous pouvez aussi utiliser directement l’Authentication API, sans aucune couche d’abstraction, si vous le souhaitez. Contrairement à Lock, aucune de ces options n’inclut d’interface utilisateur. Vous aurez un contrôle complet sur l’expérience utilisateur pour l’inscription et le flux d’authentification, ainsi que sur les aspects de l’interface utilisateur comme la mise en page, l’apparence, l’image de marque, l’internationalisation, la prise en charge RTL, et plus encore. Envisagez d’implémenter une interface utilisateur personnalisée avec une bibliothèque Auth0 ou l’Authentication API pour votre application si :
  • Vous avez des exigences strictes quant à l’apparence de l’interface utilisateur
  • Vous avez des exigences strictes en matière de taille des fichiers - les bibliothèques Auth0 sont nettement plus petites que Lock, et si vous choisissez plutôt d’utiliser l’API directement, cela n’ajoutera aucun poids supplémentaire.
  • Vous êtes à l’aise avec HTML, CSS et JavaScript - vous créerez votre propre interface utilisateur
  • Vous n’avez besoin de prendre en charge que l’authentification par nom d’utilisateur/mot de passe et via des fournisseurs sociaux
  • Vous avez plusieurs connexions de base de données ou Active Directory
Vous pouvez aussi consulter des exemples précis de l’utilisation de Lock et des SDK Auth0 pour une grande variété de langages de programmation et de plateformes dans nos Quickstarts. Ces guides peuvent aussi vous aider à déterminer ce qui convient le mieux aux besoins particuliers de votre application.

​
En savoir plus