> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> Aprenda a personalizar la página de inicio de sesión para la experiencia de Classic Login.

# Personalizar las páginas de Classic Login

<Warning>
  En este momento, los esfuerzos de desarrollo activo de Auth0 se centran en Universal Login, y Classic Login ya no recibe actualizaciones. Para personalizar sus páginas de inicio de sesión, Auth0 recomienda [Personalizaciones avanzadas para Universal Login](/es/docs/customize/login-pages/advanced-customizations).
</Warning>

[Classic Login](/es/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience) es una experiencia de inicio de sesión alojada en Auth0 que se basa en JavaScript para personalizar las páginas.

Desde el <Tooltip tip="Auth0 Dashboard: el producto principal de Auth0 para configurar sus servicios." cta="Ver glosario" href="/es/docs/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>, puede configurar opciones básicas de personalización que se aplican a todas las páginas de inicio de sesión. Para una personalización avanzada, puede modificar directamente la plantilla HTML de una o varias páginas.

Además, puede administrar el contenido de su página mediante el [sistema de control de versiones](/es/docs/customize/login-pages/classic-login/version-control) que prefiera.

<div id="basic-customization">
  ## Personalización básica
</div>

Puede configurar las siguientes opciones desde el Auth0 Dashboard en [Marca > Universal Login > pestaña Configuración](https://manage.auth0.com/#/login_settings):

* Logotipo de la empresa (tamaño recomendado: 150 x 150 píxeles)
* Color principal
* Color de fondo

De forma predeterminada, esta configuración afecta a todas las páginas de Classic Login, como la pantalla de inicio de sesión o la página de restablecimiento de contraseña. Si modifica directamente la plantilla HTML de una o más páginas y edita algún atributo relacionado con estas opciones, esos atributos tendrán prioridad sobre esta configuración.

<div id="advanced-customization">
  ## Personalización avanzada
</div>

Para una mayor personalización, puede modificar directamente la plantilla HTML de las siguientes páginas:

* Inicio de sesión (consulte a continuación)
* [Restablecimiento de contraseña](/es/docs/customize/login-pages/classic-login/customize-password-reset-page)
* [Autenticación multifactor](/es/docs/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)

<div id="responsibility-for-updates">
  ### Responsabilidad de las actualizaciones
</div>

**Cuando habilita la personalización para una página específica, asume la responsabilidad de mantener esa página**, ya que dejará de recibir actualizaciones automáticas de Auth0. Este mantenimiento incluye actualizar los números de versión de los SDK o widgets de Auth0 incluidos.

Dado que la página de inicio de sesión suele procesar información confidencial relacionada con la seguridad, la introducción de vulnerabilidades de secuencias de comandos entre sitios (XSS) es motivo de preocupación. Además, si su organización usa [home realm discovery](/es/docs/get-started/architecture-scenarios/business-to-business/authentication#home-realm-discovery) junto con Classic Login, una lista de las conexiones disponibles queda visible públicamente en la propiedad Auth0.setClient. Teniendo esto en cuenta, Auth0 le recomienda extremar la precaución al usar JavaScript de terceros en su página de inicio de sesión.

<div id="enable-page-customization">
  ### Habilitar la personalización de la página
</div>

Para habilitar la personalización de una página específica, siga estos pasos:

1. En el Auth0 Dashboard, vaya a [Branding > Universal Login](https://manage.auth0.com/#/login_settings).
2. Seleccione una de las siguientes pestañas:

   * **Inicio de sesión**
   * **Restablecimiento de contraseña**
   * **Autenticación multifactor**
3. Active el interruptor **Customize Page** ubicado en la parte superior de la pestaña.
4. Repita los pasos 2 y 3 según sea necesario.

Después de habilitar la personalización de una página, puede modificar su plantilla HTML en el editor de código ubicado debajo del interruptor.

<Warning>
  Si habilita la personalización para inspeccionar el código de la página, pero decide no personalizarla, asegúrese de desactivar el interruptor **Customize Page** al finalizar para que Auth0 pueda mostrar las páginas predeterminadas.
</Warning>

<div id="customize-the-login-page">
  ### Personalizar la página de inicio de sesión
</div>

Para personalizar la plantilla de la página de inicio de sesión, primero debe elegir una plantilla base con la que trabajar.

1. En el Auth0 Dashboard, vaya a [Branding > Universal Login > pestaña Login](https://manage.auth0.com/#/login_page).
2. Active el interruptor **Customize Login Page**.
3. Encima del editor de código HTML, seleccione una opción del menú **Default Templates**.

Las plantillas disponibles usan las siguientes bibliotecas:

* [Lock](/es/docs/libraries/lock)
* [Lock (modo sin contraseña)](/es/docs/libraries/lock)
* [Auth0.js](/es/docs/libraries/auth0js)
* [API de autenticación](https://auth0.com/docs/api/authentication)

Puede usar estas bibliotecas en Classic Login o integrarlas directamente en una aplicación. Para comprender mejor cómo puede personalizar la experiencia de inicio de sesión, consulte la documentación de la biblioteca que prefiera.

<div id="lock-template">
  #### Plantilla de Lock
</div>

Si planea usar la página de inicio de sesión predeterminada y solo necesita realizar cambios mínimos, puede usar la plantilla de Lock para modificar el comportamiento del widget Lock en la página de inicio de sesión.

Por ejemplo, puede configurar el widget Lock para que:

* Dirija a los usuarios a la página de registro en lugar de a la página de inicio de sesión de forma predeterminada
* Personalice la página de inicio de sesión con distintos colores, textos o idiomas predeterminados
* Muestre a los usuarios solo uno o varios métodos de inicio de sesión específicos

Para obtener más información sobre cómo personalizar el widget Lock, consulte [Lock Configuration Options](/es/docs/libraries/lock/lock-configuration).

<div id="custom-login-form-template">
  #### Plantilla de formulario de inicio de sesión personalizado
</div>

Si desea modificar significativamente la página de inicio de sesión, puede usar la plantilla Custom Login Form como guía. Esta plantilla le muestra cómo obtener los valores que necesita con el SDK de Auth0.js. Luego, puede modificar el estilo y el diseño de la página de inicio de sesión como desee. Cualquier personalización de CSS **debe** estar en línea, ya que no puede alojar un archivo CSS independiente en su inquilino de Auth0.

<div id="learn-more">
  ## Más información
</div>

* [Classic Login Experience](/es/docs/authenticate/login/auth0-universal-login/universal-login-vs-classic-login/classic-experience)
* [Personaliza las páginas de Classic Login con Lock o SDK](/es/docs/customize/login-pages/classic-login/customize-with-lock-sdk)
* [Personaliza MFA para Classic Login](/es/docs/secure/multi-factor-authentication/customize-mfa/customize-mfa-classic-login)