Tópicos:  Tutoriales

Implementar formularios con reCAPTCHA v3

Con este artículo podrás implementar formularios Prontus que usen reCaptcha v3 como validación de captcha de los requests.

Publicado: Martes 28 de enero de 2020 por Adriano Varoli Piazza
Última modificación: Miércoles 29 de septiembre de 2021
ReCAPTCHA Versión 3
Parámetro score
Parámetro action
Implementación en Prontus Form
RECAPTCHA_API_URL, RECAPTCHA_SECRET_CODE,  RECAPTCHA_V3_SCORE, RECAPTCHA_SITEKEY
Plantilla de Formulario Prontus
Configuración en los FID
Implementación en Prontus Form Posting
subir
ReCAPTCHA Versión 3

Desde Octubre de 2018 Google ofrece una nueva versión de reCAPTCHA para implementar validaciones en sitios. La característica principal de esta versión es que funciona de modo transparente al usuario, quien ya no tiene que completar campos interpretando imágenes o resolviendo ecuaciones o cuentas. En reCAPTCHA v3, Google implementa un algoritmo propietario que, posiblemente, revisa cómo alguien se mueve por la web para determinar con un puntaje la probabilidad de que sea un bot/spammer o un usuario legítimo.

subir
Parámetro score

De este modo, la validación hecha en prontus_form.cgi u otro script lado servidor recibirá una respuesta con un parámetro score. Este parámetro contendrá un valor entre 0 y 1, y el implementador/administrador de cada sitio deberá decidir cuál es el mínimo puntaje necesario para considerar como válida una request.

Por defecto, Google aclara que se puede validar contra un puntaje de 0.5. Requests con score menores son consideradas como spammers/bots, requests con puntajes mayores son consideradas usuarios válidos.

subir
Parámetro action

Además del score, otro parámetro importante de reCAPTCHA v3 es el action. Este parámetro te permite discriminar distintos usos de reCAPTCHA en tu sitio, por ejemplo para discriminar entre distintos formularios, o para discriminar entre el recaptcha usado en la homepage de tu sitio y aquel usado en un formulario. Según Google, el parámetro action te permite:

  • Una discriminación detallada de datos para las diez principales actions de tu sitio en la consola de administración de recaptcha.
  • Análisis de riesgo adaptativo basado en el contexto de la acción, porque el comportamiento abusivo es variable.

Las actions son parámetros alfanuméricos, y no deben ser individuales para cada usuario.

subir
Implementación en Prontus Form

Para la implementación necesitarás cumplir los siguientes pasos:

subir
RECAPTCHA_API_URL, RECAPTCHA_SECRET_CODE,  RECAPTCHA_V3_SCORE, RECAPTCHA_SITEKEY

En la página Administración - Configuración - Configuración Global deberás completar los siguientes parámetros:

  • RECAPTCHA_API_URL: el valor de esta URL actualmente es https://www.google.com/recaptcha/api/siteverify
  • RECAPTCHA_SECRET_CODE: ingresa aquí la clave secreta obtenida al registrar tus sitios en https://www.google.com/recaptcha/admin/create
  • RECAPTCHA_V3_SCORE: este valor puede ser 0, 1 o un número decimal entre 0 y 1. Por defecto Prontus lo configura en 0.5.
  • RECAPTCHA_SITEKEY: la clave de configuración entregada por google al configurar recaptcha. Queda disponible con la marca reservada %%_recaptcha_sitekey%%.
subir
Plantilla de Formulario Prontus

En la plantilla de formulario, debes incluir código como el siguiente:

<head>
...
<!-- esta es la key pública obtenida al registrar tu sitio en recaptcha. -->
<script src="https://www.google.com/recaptcha/api.js?render=_reCaptcha_SITE_KEY_"></script>
<script>
function enviaFormConsulta() { // función gatillada onsubmit
    if (confirm('¿Estás seguro que deseas enviar los datos?')) {
        grecaptcha.ready(function() {
            grecaptcha.execute('%%_recaptcha_sitekey%%', {action: 'prontus_form'}).then(function(token) {
                // input creado en el form para pasar el token recibido
                $('#g-recaptcha-response').val(token);
                $('#g-recaptcha-action').val('prontus_form');
                return true;
            });
        });
    }
    return false;
}
</script>
...
</head>
<body>
<form id="miForm" onsubmit="return enviaFormConsulta();" action="/%%_prontus_id%%/cgi-bin/prontus_form.cgi" method="POST">
    <!-- otros campos del Form Prontus -->
    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response" value="">
    <input type="hidden" name="g-recaptcha-action" id="g-recaptcha-action" value="">
    <!-- otros campos del Form Prontus -->
</form>
<body>
subir
Configuración en los FID

De desearlo, puedes hacer configurable el parámetro action en tus formularios, creando un campo de texto en la plantilla de FID y luego usándolo en la plantilla de formulario. Por ejemplo, en el FID podrías crear un input

<input type="text" name="recaptcha_action" value="%%recaptcha_action%%">

y luego en la plantilla de formulario usarías

grecaptcha.execute('_reCaptcha_SITE_KEY_', {action: '%%recaptcha_action%%'}).then(function(token) { ...  });
subir
Implementación en Prontus Form Posting

La implementación es básicamente la misma: debes configurar el código onsubmit u onload u otro (según prefieras, pero recordando que cada token devuelto por recaptcha tiene una validez de 2 minutos), y enviar el formulario. El parámetro score es global para todo Prontus, por lo que se aplicará del mismo modo que al Prontus Form, y puedes implementar el parámetro action pasándolo en duro en la llamada a grecaptcha.execute().

Tópicos:  Tutoriales