> ## 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.

> Aprende a habilitar y configurar la detección de bots al usar páginas de inicio de sesión personalizadas creadas con la biblioteca auth0.js.

# Agregar detección de bots a páginas de inicio de sesión personalizadas

Si creas una página de inicio de sesión personalizada con la biblioteca auth0.js, puedes habilitar <Tooltip tip="Detección de bots: mecanismo de protección contra ataques en el que Auth0 bloquea el tráfico sospechoso de bots al habilitar un CAPTCHA durante el proceso de inicio de sesión." cta="Ver glosario" href="/es/docs/glossary?term=Bot+Detection">Detección de bots</Tooltip> para mostrar un paso de CAPTCHA en los casos en que Auth0 determine que una solicitud presenta un alto riesgo.

El código de tu formulario de inicio de sesión personalizado debe manejar los casos en los que se le pida al usuario que complete un paso de CAPTCHA. Si no contemplas este escenario, tu aplicación puede generar un error.

<Callout icon="file-lines" color="#0EA5E9" iconType="regular">
  La detección de bots solo es compatible con páginas de inicio de sesión personalizadas alojadas por Auth0. Es posible que debas ponerte en contacto con tu representante de cuenta para habilitar esta función en tu inquilino.
</Callout>

<div id="use-custom-login-page-template">
  ## Usar una plantilla personalizada para la página de inicio de sesión
</div>

Auth0 proporciona una plantilla para usar con código y gestionar inicios de sesión de alto riesgo.

1. Ve a [Dashboard > Branding > Universal Login](https://manage.auth0.com/#/login_settings) y selecciona **Classic**.
2. Haz clic en la pestaña **Login** y activa el interruptor **Customize Login Page** si aún no está activado.
3. Busca el menú desplegable **Default Templates** y selecciona **Custom Login Form**.

   <Frame>
     <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/b311bdbc6c48b4910eac49cc8f1b9ba8/2025-02-26_15-17-18.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=56fab9e9b970808c2b646078137305ea" alt="Dashboard Branding Universal Login Classic Login Tab Custom Login Form" width="902" height="1350" data-path="docs/images/cdy7uua7fh8z/4m3WA0sKMoR0C1KVnVmZ1G/b311bdbc6c48b4910eac49cc8f1b9ba8/2025-02-26_15-17-18.png" />
   </Frame>
4. Usa la plantilla proporcionada para empezar a personalizar tu página de inicio de sesión.

   <Callout icon="file-lines" color="#0EA5E9" iconType="regular">
     Te recomendamos usar software de control de versiones para gestionar el código fuente de tus páginas de inicio de sesión personalizadas. Para obtener más información, consulta [Classic Login Page Version Control](/es/docs/customize/login-pages/classic-login/version-control).
   </Callout>
5. Si no usas software de control de versiones, puedes reemplazar la plantilla por tu código fuente directamente en el Dashboard.
6. Selecciona **Preview** para ver tu nuevo formulario.
7. Selecciona **Save Changes**.

<div id="customize-the-login-form">
  ## Personaliza el formulario de inicio de sesión
</div>

Si quieres habilitar detección de bots, debes usar la versión `9.28` o una posterior de la biblioteca `auth0.js`.

`<script src="https://cdn.auth0.com/js/auth0/9.28/auth0.min.js"></script>`

1. Agrega un elemento para mostrar el CAPTCHA debajo del campo de contraseña y encima de los botones de registro e inicio de sesión. Por ejemplo: `<div class="captcha-container"></div>`

2. Inicializa los componentes `loginCaptcha` y `signupCaptcha` después del constructor `WebAuth`.

   ```javascript lines theme={null}
   var webAuth = new auth0.WebAuth(params);

   var loginCaptcha = webAuth.renderCaptcha(
       document.querySelector('.captcha-container'),
       null,
       (error, payload) => {
           if (payload) {
               triggerCaptcha = payload.triggerCaptcha;
           }
       }
   );

   var signupCaptcha = webAuth.renderSignupCaptcha(
       document.querySelector('.captcha-container'),
       null,
       (error, payload) => {
           if (payload) {
               triggerCaptcha = payload.triggerCaptcha;
           }
       }
   );
   ```

3. Cuando llames al método `login`, asigna a la propiedad `captcha` el valor de `loginCaptcha.getValue()`:

   ```text lines theme={null}
   webAuth.login({
       realm: connection,
       username: username,
       password: password,
       captcha: loginCaptcha.getValue()
   }, function(err) {
       displayError(err);
       //...
   });
   ```

   Para obtener más información sobre el parámetro de la función de callback (`cb`) del método `login`, consulta la [documentación de WebAuth en auth0.js](https://auth0.github.io/auth0.js/global.html#login).

4. Cuando llames al método `signupAndLogin`, asigna a la propiedad `captcha` el valor de `signupCaptcha.getValue()`:

   ```text lines theme={null}
   webAuth.redirect.signupAndLogin({
       connection: databaseConnection,
       email: email,
       password: password,
       captcha: signupCaptcha.getValue()
   }, function(err) {
       displayError(err);
       //...
   });
   ```

   Para obtener más información sobre el parámetro de la función de callback (`cb`) del método `signupAndLogin`, consulta la [documentación de WebAuth en auth0.js](https://auth0.github.io/auth0.js/global.html#login).

5. Vuelve a cargar los componentes `loginCaptcha` y `signupCaptcha` en la lógica genérica de manejo de errores.

   ```javascript lines theme={null}
   function displayError(err) {
     loginCaptcha.reload();
     signupCaptcha.reload();

     var errorMessage = document.getElementById('error-message');
     errorMessage.innerHTML = err.description;
     errorMessage.style.display = 'block';
   }
   ```

<div id="configure-captcha-templates">
  ### Configurar plantillas de CAPTCHA
</div>

Al llamar a los métodos `renderCaptcha` y `renderSignupCaptcha`, puede configurar la plantilla de cada [proveedor de CAPTCHA compatible](/es/docs/secure/attack-protection/bot-detection/configure-captcha) mediante el parámetro `options`.

La propiedad `templates` del parámetro `options` admite las siguientes propiedades:

| Nombre                 | Descripción                                                                                                                                        |
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| `auth0`                | Función de plantilla que recibe el desafío y devuelve una cadena.                                                                                  |
| `recaptcha_v2`         | Función de plantilla que recibe el desafío y devuelve una cadena.                                                                                  |
| `recaptcha_enterprise` | Función de plantilla que recibe el desafío y devuelve una cadena.                                                                                  |
| `hcaptcha`             | Función de plantilla que recibe el desafío y devuelve una cadena.                                                                                  |
| `friendly_captcha`     | Función de plantilla que recibe el desafío y devuelve una cadena.                                                                                  |
| `arkose`               | Función de plantilla que recibe el desafío y devuelve una cadena.                                                                                  |
| `auth0_v2`             | Función de plantilla que recibe el desafío y devuelve una cadena.                                                                                  |
| `error`                | Función de plantilla que devuelve un mensaje de error personalizado cuando no se pudo recuperar el desafío; recibe el error como primer argumento. |

Para obtener más información sobre las funciones de plantilla predeterminadas de cada proveedor, consulte [auth0.js/src/web-auth/captcha.js en GitHub](https://github.com/auth0/auth0.js/blob/a3ddc0905a5da33aa190a9098467576976b95ec8/src/web-auth/captcha.js#L28).

<div id="support-passwordless-flows">
  ## Admite flujos sin contraseña
</div>

Si deseas admitir detección de bots para flujos de <Tooltip tip="Sin contraseña: forma de autenticación que no depende de una contraseña como primer factor." cta="Ver glosario" href="/es/docs/glossary?term=passwordless">sin contraseña</Tooltip>, debes usar la versión `9.24` o superior de la biblioteca auth0.js.

`<script src="https://cdn.auth0.com/js/auth0/9.24/auth0.min.js"></script>`

1. Agrega un elemento para mostrar el CAPTCHA sobre el botón de envío. Si también admites un inicio de sesión con username y contraseña, debes crear un elemento independiente para el CAPTCHA de sin contraseña. Por ejemplo:
   `<div class="passwordless-captcha-container"></div>`

2. Inicializa el componente CAPTCHA para flujos sin contraseña después del constructor de WebAuth.

   ```javascript lines theme={null}
   var passwordlessCaptcha = webAuth.renderPasswordlessCaptcha(
     document.querySelector('.passwordless-captcha-container')
   );
   ```

3. Agrega la propiedad captcha a la llamada de sin contraseña y vuelve a cargar el componente CAPTCHA si se producen errores.

   ```text lines theme={null}
   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: 'foo@bar.com',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // manejar errores
     }
     // continuar
   });
   ```

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

* [Añadir la detección de bots a aplicaciones nativas](/es/docs/secure/attack-protection/bot-detection/bot-detection-native-apps)