Personnalisation de l’interface utilisateur de Lock

Personnaliser l’apparence de votre widget Lock peut être important pour votre image de marque et pour offrir une interface utilisateur cohérente. Cette ressource présente les différentes façons de le faire lorsque vous intégrez Lock à votre projet.

Vous pouvez personnaliser l’apparence de votre widget Lock de plusieurs façons. La meilleure et la plus sûre consiste à utiliser les options Javascript fournies.

Options Javascript

Vous pouvez configurer diverses personnalisations de votre Lock au moyen du paramètre options lorsque vous instanciez votre Lock. Certaines de ces options vous permettent de personnaliser votre interface utilisateur. Les options de personnalisation de l’interface utilisateur sont encore en cours d’élaboration; nous prévoyons d’en ajouter d’autres au fil du temps.

Vous commencerez par définir l’objet options, qui contient les options que vous souhaitez personnaliser. Vous devrez ensuite inclure cet objet options comme troisième paramètre lorsque vous instanciez Lock; vous trouverez plus de détails à ce sujet ci-dessous.

Options de thème

Quelques options de thème sont actuellement offertes sous l’espace de noms de la propriété theme.

logo

La valeur de logo est l’URL d’une image qui sera placée dans l’en-tête de Lock; par défaut, le logo d’Auth0 est utilisé. La résolution minimale recommandée est de 200 pixels (largeur) sur 200 pixels (hauteur).

var options = {
  theme: {
    logo: 'https://example.com/logo.png'
  }
};

primaryColor

La propriété primaryColor définit la couleur principale du Lock; toutes les couleurs utilisées dans le widget seront calculées à partir de celle-ci. Cette option est utile lorsque vous fournissez un logo personnalisé, afin de veiller à ce que toutes les couleurs s’harmonisent bien avec la palette du logo. La valeur par défaut est #ea5323.

var options = {
  theme: {
    logo: 'https://example.com/logo.png',
    primaryColor: '#31324F'
  }
};

authButtons {Object}

Permet de personnaliser les boutons dans Lock. Chaque connexion personnalisée dont vous voulez personnaliser le bouton doit être indiquée par son nom, avec son propre ensemble de paramètres. Les paramètres personnalisables sont énumérés ci-dessous :

• displayName {String}: Le nom à afficher à la place du nom de la connexion lors de la création du libellé du bouton, par exemple LOGIN WITH MYCONNECTION pour la connexion.
• primaryColor {String}: La couleur d’arrière-plan du bouton. La valeur par défaut est #eb5424.
• foregroundColor {String}: La couleur du texte du bouton. La valeur par défaut est #FFFFFF.
• icon {String}: L’URL de l’icône de cette connexion. Par exemple : http://site.com/logo.png.

var options = {
  theme: {
    authButtons: {
      "testConnection": {
        displayName: "Test Conn",
        primaryColor: "#b7b7b7",
        foregroundColor: "#000000",
        icon: "http://example.com/icon.png"
      },
      "testConnection2": {
        primaryColor: "#000000",
        foregroundColor: "#ffffff",
      }
    }
  }
};

Personnaliser le texte

L’option languageDictionary permet de personnaliser tout le texte affiché dans Lock. La valeur par défaut est . Voir ci-dessous un exemple.

var options = {
  languageDictionary: {
    emailInputPlaceholder: "[e-mail]",
    title: "Log me in"
  },
};

Pour obtenir la liste complète des éléments pouvant être personnalisés avec languageDictionary, consultez la spécification anglaise du Language Dictionary dans le dépôt.

Instancier Lock

Enfin, vous pouvez instancier votre Lock à l’aide de l’objet options que vous avez défini, lequel contient vos options personnalisées.

var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);

Redéfinition du CSS

Il n’est pas recommandé de personnaliser votre Lock en redéfinissant son CSS. Le problème, c’est qu’avec les nouvelles versions de Lock, certains styles peuvent changer, ce qui peut entraîner des problèmes imprévus si vous redéfinissez le CSS. De plus, il est facile de ne pas remarquer l’utilisation de styles à d’autres endroits : même si le changement peut sembler correct dans une vue, il pourrait ne pas l’être dans une autre.

Si vous comptez quand même redéfinir le CSS pour personnaliser davantage votre Lock, nous vous recommandons d’utiliser une version de correctif précise de Lock plutôt qu’une version majeure ou mineure, afin de limiter les résultats inattendus qui peuvent survenir lorsque vous modifiez les styles et qu’un autre correctif est ensuite déployé, ce qui pourrait provoquer un comportement inattendu dans votre interface utilisateur en raison de ces changements. Vous pouvez le faire en veillant à préciser cette version de correctif (x.y.z) lorsque vous incluez Lock, ou en la téléchargeant.

De plus, nous vous recommandons bien sûr de tester vos modifications CSS de façon exhaustive, afin de vous assurer que l’expérience correspond bien à celle que vous souhaitez offrir à vos clients.

Pour en savoir plus

Si vous cherchez de l’information plus détaillée pour personnaliser Lock pour votre application, consultez la page des options de configuration ou la page de l’API Lock !

Si vous souhaitez l’ajout de certaines option de thème de personnalisation visuelle, faites-le-nous savoir. Nous travaillons à améliorer les options de personnalisation offertes par Javascript, et cette liste sera mise à jour à mesure que de nouvelles options s’ajouteront.