S T A C K F I R E

Loading

  • contacto@stackfire.com

En este artículo te mostraremos cómo agregar reCAPTCHA v3 de Google a un formulario en tu sitio web PHP. El reCAPTCHA más reciente es diferente a las versiones anteriores — no requiere la interacción del usuario en absoluto. En esta publicación veremos cómo funciona y crearemos un ejemplo del mundo real para fines de demostración.

Por otro lado, si has utilizado soluciones anti-spam de terceros para tu sitio web, es probable que conozcas la solución reCAPTCHA proporcionada por Google. Con cada versión de reCAPTCHA, Google ha fortalecido sus capacidades para detectar y filtrar el spam. Específicamente, reCAPTCHA v2 es una de las mejores entre las diferentes soluciones anti-spam de terceros.

Puedes integrar reCAPTCHA v2 en tu sitio web de dos maneras diferentes. La primera es la famosa casilla de verificación “No soy un robot”. Y la otra es el método invisible en el que la interacción del usuario se requiere solamente en casos sospechosos. En esta publicación discutiremos reCAPTCHA v3, que es invisible ¡y no requiere la interacción del usuario en absoluto!

En la siguiente sección explicaré cómo funciona reCAPTCHA v3, y más adelante crearemos un ejemplo del mundo real como demostración.

¿Cómo funciona reCAPTCHA v3 de Google?

reCAPTCHA v3 overall flow

Tratemos de comprender el flujo general a detalle:

  1. El usuario final solicita una página web.
  2. La aplicación o el servidor web devuelven la página solicitada, que incluye código de reCAPTCHA v3.
  3. A continuación, el usuario rellena el formulario y hace clic en el botón de enviar.
  4. Antes de enviar los datos del formulario al servidor, el código de reCAPTCHA v3 en el cliente realiza una llamada AJAX al servidor Google y obtiene un token. Lo importante aquí es que tenemos que enviar el atributo action con un valor apropiado durante la llamada AJAX. Debes enviar el valor que identifica a tu formulario. Este es el valor que usarás para la verificación del lado del servidor, junto con otros parámetros.
  5. El token obtenido en el paso anterior se envía junto con los otros datos del formulario. En la mayoría de los casos agregamos dos variables ocultas al formulario, token y action, antes de enviarlo.
  6. Una vez que se envía el formulario, tenemos que realizar el paso de verificación para decidir si el formulario es enviado por un humano. Como primer paso, realizaremos una solicitud POST para verificar el token de respuesta. La solicitud POST envía el token junto con la clave secreta de Google al servidor Google.
  7. La respuesta es un objeto JSON, y lo usaremos para decidir si el formulario ha sido enviado por un humano. El formato del objeto JSON se muestra en el siguiente fragmento de código.
{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

Hay tres comprobaciones que debemos hacer para asegurarnos de que sea seguro continuar con el procesamiento del formulario. La puntuación de la respuesta debe ser mayor que 0.5, y la propiedad success debe ser TRUE. Además de eso, debes comparar el valor respuesta de action con el valor de la variable oculta action que se envía con el formulario.

La API reCAPTCHA v3 devuelve una puntuación determinada para cada solicitud en la que no se haya tenido problemas con el usuario. La puntuación de respuesta que recibes se basa en las interacciones del usuario con tu sitio — sus pulsaciones de teclas y movimientos del ratón. El reCAPTCHA v3 aprende del tráfico verdadero de tu sitio web. Por lo tanto, puede ser que las puntuaciones sean diferentes en ambientes distintos. Como punto de partida, puedes usar un umbral de 0.5 y ajustarlo posteriormente de acuerdo a tus requisitos.

Esa es una visión general del proceso. Toda la información para los desarrolladores está en la siguiente liga: https://developers.google.com/recaptcha