En este artículo te mostraré 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.

Como propietario de un sitio web, siempre estás en búsqueda de una solución anti-spam sólida que pueda evitar el spam en tu sitio web y que solo permita la entrada de contenido legítimo. Atrás han quedado los días en los que podías integrar una simple solución CAPTCHA basada en texto, y eso era suficiente para detener a los traviesos robots.

• 

  Comparando los 5 mejores generadores de formularios en PHP

  ¿Buscas un generador de formularios PHP para tu sitio web? hoy comparamos los cinco mejores generadores de formularios PHP disponibles en CodeCanyon. Esta publicación te ayudará a decidir...
• 

  Las 12 mejores secuencias de comandos para formularios de contacto en PHP

  Los formularios de contacto son imprescindibles para todo sitio web, y ya sea que necesites un formulario de contacto simple de tres líneas o uno más complejo que ofrezca cientos de...
• 

  Crea un formulario de contacto en PHP

  Este tutorial te enseñará cómo crear tu propio formulario de contacto básico en PHP. También aprenderás a validar y desinfectar la entrada del usuario para lograr que el formulario...
• 

  Los 20 mejores formularios de correo electrónico en PHP

  Estos son algunos de los mejores formularios de correo electrónico en PHP que encontrarás en CodeCanyon y que harán que tu sitio web sea más impresionante.

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

¡Se dice que una imagen vale más que mil palabras! así que echemos un vistazo a la siguiente captura de pantalla para comprender qué está sucediendo exactamente en el fondo cuando integras reCAPTCHA v3 en tu sitio web.

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.

1

{

2

  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site

3

  "score": number             // the score for this request (0.0 - 1.0)

4

  "action": string            // the action name for this request (important to verify)

5

  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)

6

  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved

7

  "error-codes": [...]        // optional

8

}

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. En la siguiente sección veremos cómo registrar tu sitio con Google para obtener una clave de sitio y una clave secreta.

Registra la clave y clave secreta para reCAPTCHA v3

La biblioteca reCAPTCHA de Google requiere que registres claves para tu dominio antes de que puedas usarla. En esta sección veremos cómo puedes hacer su registro.

Primero, ve al panel administrativo de reCAPTCHA para crear un vínculo que te muestra un formulario pidiéndote algunos detalles, como se ve en la siguiente captura de pantalla.

En el campo reCAPTCHA Type (Tipo de reCAPTCHA) selecciona la opción reCAPTCHA v3. Completa la información de Domains (Dominios) y Owners (Propietarios) según sea necesario. A continuación lee y acepta los reCAPTCHA Terms of Service (Términos de servicio de reCAPTCHA). Finalmente haz clic en el botón Submit (Enviar) para guardar las configuraciones.

Al enviar el formulario, Google genera una clave de sitio y una clave secreta para tu dominio, como se muestra en la siguiente captura de pantalla.

Por favor cópialas y anótalas, ya que las necesitaremos más adelante cuando construyamos nuestro ejemplo del mundo real.

Construye un ejemplo del mundo real

En la sección anterior creamos las credenciales necesarias que podemos usar al configurar el reCAPTCHA v3. En esta sección crearemos un ejemplo para hacer una demostración de cómo integrarlo en tu página web PHP.

Crearemos dos archivos PHP: subscribe_newsletter_form.php y subscribe_newsletter_submit.php.

• El archivo subscribe_newsletter_form.php se usa para mostrar el formulario de suscripción al boletín de noticias, que permite al usuario escribir la dirección de correo electrónico y suscribirse a los boletines de noticias.
• El archivo subscribe_newsletter_submit.php gestiona el envío del formulario y realiza la validación necesaria.

Crea el formulario de suscripción al boletín de noticias

Continúa y crea el archivo subscribe_newsletter_form.php con el siguiente contenido.

1

<html>

2

  <head>

3

    <title>Subscribe to Newsletter</title>

4

    <script

5

      src="https://code.jquery.com/jquery-3.4.1.min.js"

6

      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

7

      crossorigin="anonymous"></script>

8

9

    <script src="https://www.google.com/recaptcha/api.js?render=6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y"></script>

10

  </head>

11

  <body>

12

    <div>

13

      <b>Subscribe Newsletter</b>

14

    </div>

15

16

    <form id="newsletterForm" action="subscribe_newsletter_submit.php" method="post">

17

      <div>

18

          <div>

19

              <input type="email" id="email" name="email">

20

          </div>

21

          <div>

22

              <input type="submit" value="submit">

23

          </div>

24

      </div>

25

    </form>

26

27

    <script>

28

    $('#newsletterForm').submit(function(event) {

29

        event.preventDefault();

30

        var email = $('#email').val();

31

32

        grecaptcha.ready(function() {

33

            grecaptcha.execute('6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y', {action: 'subscribe_newsletter'}).then(function(token) {

34

                $('#newsletterForm').prepend('<input type="hidden" name="token" value="' + token + '">');

35

                $('#newsletterForm').prepend('<input type="hidden" name="action" value="subscribe_newsletter">');

36

                $('#newsletterForm').unbind('submit').submit();

37

            });;

38

        });

39

  });

40

  </script>

41

  </body>

42

</html>

Revisemos los fragmentos de código importantes en este archivo.

Primero cargamos la biblioteca JavaScript de reCAPTCHA en la sección <head>. Es importante tener en cuenta que debes enviar tu site key como un parámetro de cadena de consulta render=YOUR_SITE_KEY. Además, hemos cargado la biblioteca jQuery también para poder usar métodos de utilidad relacionados con formularios. No es necesario usar jQuery — tú puedes usar cualquier otra biblioteca de tu elección, o incluso JavaScript estándar.

A continuación creamos un formulario básico que incluye el cuadro de texto para el correo electrónico y el botón de enviar — nada especial por aquí.

Por último, tenemos el fragmento de código en JavaScript al final del archivo, que es la parte clave para implementar reCAPTCHA. Hemos creado el controlador de envío con jQuery para el formulario, de manera que cuando el usuario envíe el formulario vamos a atrapar ese evento y haremos el procesamiento necesario antes del envío real del formulario. Usamos la función event.preventDefault() para detener el envío del formulario cuando normalmente se enviaría.

A continuación, el objeto grecaptcha llama al método execute, que obtiene el token del servidor de Google llevando a cabo una llamada AJAX. Es importante tomar en cuenta que tienes que enviar la clave de sitio y el action name al llamar al método execute. El action name te permite tener un desglose detallado de los datos en la consola de administración de Google. También se usa para verificar la respuesta del reCAPTCHA del lado del servidor, lo cuál veremos un poco más adelante.

Cuando el método execute recibe el token de respuesta, este envía el token a la función anónima proporcionada en el método then. A continuación agregamos dos nuevas variables ocultas al formulario, token y action, junto con sus valores. Finalmente, enviamos el formulario llamando al método submit de jQuery.

Gestiona el envío y la validación del formulario

Continúa y crea el archivo subscribe_newsletter_submit.php con el siguiente código para gestionar el envío del formulario.

1

<?php

2

define("RECAPTCHA_V3_SECRET_KEY", 'YOUR_SECRET_HERE');

3

4

if (isset($_POST['email']) && $_POST['email']) {

5

    $email = filter_var($_POST['email'], FILTER_SANITIZE_STRING);

6

} else {

7

    // set error message and redirect back to form...

8

    header('location: subscribe_newsletter_form.php');

9

    exit;

10

}

11

12

$token = $_POST['token'];

13

$action = $_POST['action'];

14

15

// call curl to POST request

16

$ch = curl_init();

17

curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");

18

curl_setopt($ch, CURLOPT_POST, 1);

19

curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => RECAPTCHA_V3_SECRET_KEY, 'response' => $token)));

20

curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

21

$response = curl_exec($ch);

22

curl_close($ch);

23

$arrResponse = json_decode($response, true);

24

25

// verify the response

26

if($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5) {

27

    // valid submission

28

    // go ahead and do necessary stuff

29

} else {

30

    // spam submission

31

    // show error message

32

}

La parte más importante después del envío del formulario es verificar el token que se envía junto con los otros valores del formulario. Para eso, necesitas hacer una solicitud POST al URL https://www.google.com/recaptcha/api/siteverify. Además, necesitas enviar la clave secreta y el token como datos a la solicitud POST. En el ejemplo anterior hemos usando las funciones de cURL de PHP para hacer la solicitud POST.

Como respuesta recibirás un objeto JSON que contiene la información necesaria que puedes usar para verificar. Como discutimos anteriormente, al menos debes verificar tres cosas para asegurarte de que el formulario haya sido enviado por un humano: la propiedad success, el valor respuesta de action y la puntuación.

De esta manera puedes usar reCAPTCHA v3 de Google en tus páginas web PHP para detectar y prevenir el spam.

Conclusión

Hoy discutimos cómo puedes usar una de las soluciones anti-spam más populares en la web: reCAPTCHA v3 de Google. Creamos un ejemplo del mundo real para demostrar cómo puedes integrarlo en un sitio web PHP.

• 
  PHP
  Comparando los 5 mejores generadores de formularios en PHP
  Nona Blackman
• 
  PHP
  Las 12 mejores secuencias de comandos para formularios de contacto en PHP
  Nona Blackman
• 
  PHP
  Crea un formulario de contacto en PHP
  Monty Shokeen
• 
  PHP
  Los 20 mejores formularios de correo electrónico en PHP
  Monty Shokeen
• 
  PHP
  Crea una secuencia de comandos y un formulario de correo electrónico en PHP
  Monty Shokeen
• 
  PHP
  Crea un formulario de inicio de sesión en PHP
  Monty Shokeen
• 
  PHP
  Crea una página de inicio de sesión de Google en PHP
  Sajal Soni
• 
  PHP
  Crea un formulario de contacto en PHP con ContactMe
  Sajal Soni