Personnaliser les pages Classic Login avec Lock ou un SDK

Découvrez comment personnaliser la page Classic Login avec Lock ou une interface personnalisée basée sur un SDK Auth0.

Pour le moment, les efforts de développement actifs d’Auth0 sont axés sur Universal Login, et Classic Login ne reçoit plus de mises à jour. Pour personnaliser vos pages de connexion, Auth0 recommande Advanced Customizations for 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 dans 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 l’authentification des utilisateurs. Toutefois, vous pouvez aussi personnaliser les modèles de Lock en mode Passwordless ou avec une interface personnalisée créée à l’aide du SDK auth0.js.

Pour personnaliser vos modèles de 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 la 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 offerts comprennent :

• 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 Auth0 SDK for 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 de personnaliser davantage le comportement et l’apparence de la page de connexion. L’Authentication API permet une intégration directe sans avoir recours aux SDK Auth0.

Le modèle que vous utilisez pour personnaliser votre page de connexion dépendra des besoins particuliers de 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 sélectionnée. Lock gère automatiquement la plupart des détails liés à la création et à l’authentification des utilisateurs.

Avec Lock, vous mettrez en place une UI qui :

• Est robuste et offre une excellente expérience utilisateur sur n’importe quel appareil, quelle que soit la résolution
• A une conception simple qui s’intègre à la plupart des sites Web moyennant seulement quelques ajustements à la couleur personnalisée
• S’adapte à votre configuration en affichant les champs de formulaire 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 préciser un comportement par défaut dans les cas ambigus
• Se souvient de la dernière connexion utilisée pour un utilisateur donné
• Prend automatiquement en charge l’internationalisation
• Fournit une vérification instantanée de la politique de mot de passe à 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, l’apparence et la convivialité du widget.

• Vous préférez une mise en œuvre simplifiée de Classic Login avec une UI adaptative prête à l’emploi.

• Votre processus comprend bon nombre des cas d’utilisation que Lock prend en charge d’emblée :

  • Connexions Enterprise
  • Bases de données avec des politiques de mot de passe
  • Inscription des utilisateurs et réinitialisation du mot de passe
  • Authentification à l’aide de fournisseurs d’identité sociale
  • Avatars

​

Exemples de scripts de personnalisation de la connexion

​

Personnaliser le logo de l’application

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 (largeur) sur 200 pixels (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 personnalise les conditions d’inscription pour votre application. Vous pouvez ajouter du 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>."
};

​

Utiliser Auth0 SDK for 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, une interface utilisateur personnalisée s’impose. Vous pourriez aussi préférer cette option si vous avez déjà une interface utilisateur que vous souhaitez ré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 aucun wrapper, si vous le souhaitez.

Contrairement à Lock, aucune de ces options n’inclut d’interface utilisateur. Vous aurez un contrôle total sur l’expérience utilisateur liée à l’inscription et au 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 du RTL, et plus encore.

Envisagez de mettre en œuvre 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 quant à la taille des fichiers - les bibliothèques Auth0 sont beaucoup plus légères 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 gérer que l’authentification par nom d’utilisateur et mot de passe ainsi que par fournisseur social
• Vous avez plusieurs connexions de base de données ou connexions Active Directory

Vous pouvez aussi consulter, dans nos Quickstarts, des exemples précis d’utilisation de Lock et des SDK Auth0 pour un large éventail de langages de programmation et de plateformes. Ces guides peuvent également vous aider à déterminer laquelle de ces options convient le mieux aux besoins particuliers de votre application.

​

En savoir plus

• Expérience de connexion Classic Login
• Ajouter Bot Detection aux pages de connexion personnalisées