Options Javascript
Vous pouvez configurer diverses personnalisations de votre Lock au moyen du paramètreoptions 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

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).
primaryColor

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.
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 MYCONNECTIONpour 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.
Personnaliser le texte
L’optionlanguageDictionary permet de personnaliser tout le texte affiché dans Lock. La valeur par défaut est . Voir ci-dessous un exemple.

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’objetoptions 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.