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

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.

Si creas una página de inicio de sesión personalizada con la biblioteca auth0.js, puedes habilitar Detección de bots 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.

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.

​

Usar una plantilla personalizada para la página de inicio de sesión

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

   

4. Usa la plantilla proporcionada para empezar a personalizar tu página de inicio de sesión.

   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.

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.

​

Personaliza el formulario de inicio de sesión

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.

   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():

   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.

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

   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.

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

   function displayError(err) {
     loginCaptcha.reload();
     signupCaptcha.reload();
   
     var errorMessage = document.getElementById('error-message');
     errorMessage.innerHTML = err.description;
     errorMessage.style.display = 'block';
   }
   

​

Configurar plantillas de CAPTCHA

Al llamar a los métodos renderCaptcha y renderSignupCaptcha, puede configurar la plantilla de cada proveedor de CAPTCHA compatible 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.

​

Admite flujos sin contraseña

Si deseas admitir detección de bots para flujos de sin contraseña, 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.

   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.

   webAuth.passwordlessStart({
     connection: 'email',
     send: 'code',
     email: '[e-mail]',
     captcha: passwordlessCaptcha.getValue()
   }, function (err,res) {
     if (err) {
       passwordlessCaptcha.reload();
       // manejar errores
     }
     // continuar
   });
   

​

Más información

• Añadir la detección de bots a aplicaciones nativas