Skip to main content
Puedes personalizar la apariencia de tu widget Lock de varias maneras. La mejor y más segura de hacerlo es mediante las opciones de JavaScript disponibles.

​
Opciones de JavaScript

Puedes configurar varias personalizaciones de tu Lock mediante el parámetro options cuando lo instancies. Algunas te permiten personalizar la interfaz de usuario. Las opciones de personalización de la interfaz de usuario aún están en desarrollo; esperamos ir añadiendo más con el tiempo. Primero, definirás el objeto options, con las opciones que quieras personalizar. Luego, deberás incluir ese objeto options como tercer parámetro al instanciar Lock; encontrarás más información al respecto más abajo.

​
Opciones de tema

Actualmente hay un par de opciones de tema disponibles, agrupadas bajo la propiedad theme.
Personalización de la IU de Lock - Logotipo
El valor de logo es la URL de una imagen que se colocará en el encabezado de Lock y que, de forma predeterminada, será el logotipo de Auth0. La resolución mínima recomendada es de 200 píxeles (ancho) por 200 píxeles (alto). 
var options = {
  theme: {
    logo: 'https://example.com/logo.png'
  }
};

​
primaryColor

Personalización de la interfaz de Lock: color principal
La propiedad primaryColor define el color principal de Lock; a partir de él se calcularán todos los colores usados en el widget. Esta opción resulta útil cuando se proporciona un logo personalizado, para asegurar que todos los colores armonicen con la paleta de colores del logo. El valor predeterminado es #ea5323. 
var options = {
  theme: {
    logo: 'https://example.com/logo.png',
    primaryColor: '#31324F'
  }
};

​
authButtons {Object}

Permite personalizar los botones de Lock. Cada conexión personalizada cuyo botón quiera personalizarse debe indicarse por nombre, cada una con su propio conjunto de parámetros. Los parámetros que se pueden personalizar se enumeran a continuación:
  • displayName {String}: El nombre que se mostrará en lugar del nombre de la conexión al generar el título del botón, por ejemplo, INICIAR SESIÓN CON MYCONNECTION para el inicio de sesión).
  • primaryColor {String}: El color de fondo del botón. El valor predeterminado es #eb5424.
  • foregroundColor {String}: El color del texto del botón. El valor predeterminado es #FFFFFF.
  • icon {String}: La URL del icono de esta conexión. Por ejemplo: 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",
      }
    }
  }
};

​
Personalización del texto

La opción languageDictionary permite personalizar todos los textos que se muestran en Lock. El valor predeterminado es . Consulte el ejemplo a continuación. 
var options = {
  languageDictionary: {
    emailInputPlaceholder: "something@youremail.com",
    title: "Log me in"
  },
};
Personalización del texto en la interfaz de usuario de Lock con la opción languageDictionary
Para ver una lista completa de los elementos que se pueden personalizar con languageDictionary, consulte la especificación del diccionario de idioma inglés en el repositorio.

​
Instanciar Lock

Por último, instancie Lock con el objeto options que definió con sus opciones personalizadas. var lock = new Auth0Lock('{yourClientId}', '{yourDomain}', options);

​
Sobrescritura de CSS

No se recomienda personalizar Lock sobrescribiendo su CSS. El problema es que, con las nuevas versiones de Lock, algunos estilos pueden cambiar, lo que puede provocar problemas no deseados si sobrescribe el CSS. Además, es fácil pasar por alto el uso de estilos en otras partes y, aunque el cambio pueda verse bien en una vista, puede que no se vea bien en otra. Si aun así desea sobrescribir el CSS para seguir personalizando Lock, le recomendamos usar una versión de parche específica de Lock en lugar de una versión mayor o menor, para limitar la cantidad de resultados inesperados que pueden producirse al modificar los estilos y, posteriormente, desplegarse otro parche que podría causar un comportamiento imprevisto en su interfaz de usuario debido a esos cambios. Esto puede hacerse asegurándose de especificar esa versión de parche (x.y.z) al incluir Lock o al descargarlo. Además, por supuesto, le recomendamos que pruebe exhaustivamente los cambios en el CSS para asegurarse de que la experiencia sea la que pretende ofrecer a sus clientes.

​
Más información

Si buscas información más detallada para personalizar Lock en tu aplicación, consulta la página de opciones de configuración o la página de la API de Lock. Si hay opciones de tema específicas que te gustaría que se añadieran, háznoslo saber. Estamos trabajando para mejorar las opciones de personalización disponibles a través de JavaScript, y esta lista se actualizará a medida que se incorporen nuevas opciones.