Personnaliser les pages de connexion classiques avec Lock ou une trousse SDK

La connexion classique est une expérience de connexion hébergée par Auth0 qui s’appuie sur JavaScript pour la personnalisation avancée. L’implémentation d’une connexion classique est moins complexe que l’intégration du processus d’authentification directement dans votre application, et elle peut aider à prévenir les dangers de l’authentification cross-origin.

Par défaut, la page de connexion classique utilise le gadget logiciel Lock pour l’authentification des utilisateurs. Cependant, vous pouvez également personnaliser des modèles pour Lock en mode sans mot de passe ou une interface utilisateur personnalisée créée avec la trousse SDK Auth0.js.

Pour personnaliser vos modèles de page de connexion classique, vous devez d’abord activer la personnalisation avancée. Pour ce faire, suivez les étapes ci-dessous :

1. Dans Auth0 Dashboard, rendez-vous à l’onglet Branding (Image de marque) > Universal Login (Connexion universelle) > Login (Connexion).

2. Activez le bouton bascule Customize Login Page (Personnalisation de la page de connexion).

3. Au-dessus de l’éditeur de code HTML, sélectionnez le menu (Modèles par défaut et choisissez l’option souhaitée.

Les modèles disponibles incluent :

• Lock

• Lock (sans mot de passe)

• Formulaire de connexion personnalisé

Les deux modèles de Lock vous permettent de personnaliser le gadget logiciel Lock utilisé pour l’authentification. Le gadget logiciel Lock fournit un ensemble standard de comportements et une interface utilisateur personnalisable. Sinon, vous pouvez utiliser le modèle Formulaire de connexion personnalisé pour personnaliser votre page de connexion avec la trousse SDK Auth0 pour le Web ou l’Authentication API.

Les trousses SDK Auth0 sont des bibliothèques côté client qui n’offrent pas d’interface utilisateur, mais qui permettent une personnalisation étendue du comportement et de l’apparence de la page de connexion. L’Authentication API fournit une intégration directe sans utiliser de trousse SDK Auth0.

Le modèle que vous utiliserez pour personnaliser votre page de connexion dépendra des besoins uniques de l’application. Les sections ci-dessous donnent un aperçu de chaque option : Lock, trousse SDK Auth0, ou l’Authentication API.

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 impliqués dans la création et l’authentification des utilisateurs.

Avec Lock, vous metterez en oeuvre une interface utilisateur qui :

• est robuste et offre une excellente expérience utilisateur sur n’importe quel appareil avec n’importe quelle résolution

• a un design simple qui s’adapte à la plupart des sites Web avec seulement quelques ajustements à sa couleur personnalisée

• s’adapte à votre configuration, affichant les contrôles de formulaire appropriés pour chaque connexion disponible et uniquement celles qui sont autorisées (comme l’inscription ou la réinitialisation du mot de passe)

• Sélectionne automatiquement la connexion adéquate. Vous pouvez spécifier le comportement par défaut souhaité pour les cas ambigus

• Mémorise la dernière connexion utilisée pour un utilisateur donné

• S’adapte automatiquement à l’internationalisation

• Fournit une vérification instantanée de la politique de mot de passe lors de l’inscription

Bien que vous ne puissiez pas modifier de manière significative le comportement de Lock, vous pouvez configurer plusieurs options de base pour que Lock ait une apparence et un comportement différents.

Considérez d’utiliser Lock, si :

• Vous aimez la structure, l’apparence et la convivialité du gadget logiciel.

• Vous préférez la mise en oeuvre simplifiée de la connexion classique avec une interface utilisateur réactive prête à l’emploi.

• Votre processus comprend de nombreux cas d’utilisation que Lock gère immédiatement :

  • Connexions d’entreprise

  • Bases de données avec politiques de mot de passe

  • Inscription de l’utilisateur et réinitialisation du mot de passe

  • Authentification à l’aide de fournisseurs sociaux

  • Avatars

L’exemple de script ci-dessous personnalise le logo pour chaque application, ou vous pouvez en définir un par défaut. La résolution minimale recommandée est de 200 pixels (largeur) par 200 pixels (hauteur). Ajoutez la configuration logouturl au bloc <scripts> :

var logourl = "https://example.com/defaultlogo1.png"; //set default logo
if(config.clientID === "HUXwC72R3qr9JJo9ImPsdzJbtY8aD5kS")
{
    logourl = "https://example.com/defaultlogo2.png";
}
theme: {
    logo: logourl,
    primaryColor: colors.primary ? colors.primary : 'green'
},

L’exemple ci-dessous personnalise les conditions d’inscription pour votre application. Vous pouvez ajouter une langue personnalisée à afficher lors de l’inscription des utilisateurs.

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>."
};

Si les exigences de votre application ne peuvent pas être satisfaites par le comportement standardisé de Lock, ou si vous disposez d’un processus d’authentification personnalisé complexe, une interface utilisateur personnalisée est nécessaire. Vous pouvez également préférer cette option si vous disposez d’une interface utilisateur existante que vous souhaitez utiliser.

Avec la bibliothèque Auth0 pour le Web, vous pouvez personnaliser le comportement et le flux du processus utilisé pour déclencher l’inscription et l’authentification. Vous pouvez également 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 pour le flux d’inscription et d’authentification, ainsi que sur les aspects de l’interface utilisateur tels que la mise en page, l’apparence, l’image de marque, l’internationalisation, le soutien RTL, etc.

Envisagez de mettre en œuvre une interface utilisateur personnalisée en conjonction avec une bibliothèque Auth0 ou l’Authentication API pour votre application si :

• Vous avez des exigences strictes concernant l’apparence de l’interface utilisateur

• Vous avez des exigences strictes en matière de tailles de fichier - les bibliothèques Auth0 sont nettement plus petites que celles de Lock, et si vous choisissez plutôt de traiter directement avec l’API, cela ne nécessiterait aucun poids supplémentaire.

• Vous êtes confortable avec HTML, CSS, et JavaScript - vous créerez votre propre interface utilisateur

• Il vous suffit de gérer l’authentification du nom d’utilisateur/mot de passe et du fournisseur social

• Vous disposez de plusieurs connexions à une base de données ou à Entra ID

Vous pouvez également voir des exemples spécifiques d’utilisation des trousses SDK de Lock et Auth0 pour une grande variété de langages et de plateformes de programmation dans nos Démarrages rapides. Ces guides peuvent vous aider à décider quelle approche utiliser pour vos besoins spécifiques en matière d’application.

• l’expérience de connexion classique
• Ajouter la détection de robots aux pages de connexion personnalisées
• Erreurs d’obsolescence