Personnalisation de l’interface utilisateur de Lock

Personnaliser l’apparence de votre widget Lock peut être important pour l’image de marque et pour assurer la cohérence de l’interface utilisateur. 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 méthode la meilleure et la plus sûre consiste à utiliser les options JavaScript fournies.

Options JavaScript

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

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

Options de personnalisation du thème

Quelques options de personnalisation du thème sont actuellement offertes sous la propriété theme.

logo

La valeur de logo est l’URL d’une image qui sera affichée dans l’en-tête de Lock et, 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 de Lock; toutes les couleurs utilisées dans le widget sont calculées à partir de celle-ci. Cette option est utile lorsque vous fournissez un logo personnalisé, afin de vous assurer 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 souhaitez personnaliser le bouton doit être répertoriée par nom, avec son propre ensemble de paramètres. Les paramètres pouvant être personnalisés sont indiqué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 pour 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",
      }
    }
  }
};

Personnalisation du texte

L’option languageDictionary permet de personnaliser chaque texte affiché dans Lock. La valeur par défaut est . Consultez l’exemple ci-dessous.

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

Pour obtenir la liste complète des éléments que vous pouvez personnaliser à l’aide de languageDictionary, consultez la spécification anglaise du Language Dictionary dans le dépôt.

Instanciation de Lock

Enfin, instanciez votre Lock à l’aide de l’objet options que vous avez défini et qui contient vos options personnalisées.

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

Surcharge du CSS

Il n’est pas recommandé de personnaliser votre Lock en surchargeant 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 surchargez le CSS. De plus, il est possible de passer simplement à côté de l’utilisation de styles ailleurs; ainsi, même si la modification peut sembler correcte dans une vue, elle pourrait ne pas l’être dans une autre.

Si vous comptez tout de même surcharger 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 pourraient survenir lorsque vous modifiez les styles, puis qu’un autre correctif est déployé et entraîne un comportement inattendu dans votre interface utilisateur en raison de ces changements. Pour ce faire, assurez-vous d’indiquer cette version de correctif (x.y.z) lorsque vous incluez Lock, ou téléchargez-la.

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.

Renseignements supplémentaires

Si vous cherchez des renseignements plus détaillés pour personnalner Lock pour votre application, consultez la page des options de configuration ou celle de l’API de Lock !

Si vous souhaitez voir ajouter des options précises de personnalisation du thème, 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 seront ajoutées.