Cómo Integrar Google reCAPTCHA en PrestaShop para Evitar Spam en el Registro y Formularios

Por /

En este artículo, aprenderás cómo integrar Google reCAPTCHA v3 en tu tienda PrestaShop para proteger tus formularios de registro y contacto contra el spam, utilizando la versión más reciente y menos intrusiva de reCAPTCHA.

Paso 1: Obtener las claves de Google reCAPTCHA

  1. Accede a Google reCAPTCHA:
  2. Registrar tu sitio web:
    • Completa el formulario de registro:
      • Etiqueta: Escribe un nombre para identificar tu proyecto (ej. «Mi Tienda PrestaShop»).
      • Tipo de reCAPTCHA: Selecciona reCAPTCHA v3.
      • Dominios: Añade el dominio de tu tienda (ej. mitienda.com).
    • Acepta los términos y haz clic en Registrar.
  3. Obtén las claves:
    • Copia la Clave del Sitio y la Clave Secreta. Las usarás en los siguientes pasos.

Paso 2: Añadir reCAPTCHA al formulario de registro

2.1 Modificar el formulario en customer-form.tpl

  1. Accede a tu servidor mediante un cliente FTP o desde el panel de control de tu hosting.
  2. Navega a la ruta:bashCopiar códigothemes/<nombre_de_tu_tema>/templates/customer/_partials/customer-form.tpl
  3. Abre el archivo customer-form.tpl y realiza los siguientes cambios:
  • Añadir el script de reCAPTCHA v3: Coloca el siguiente código antes del formulario:htmlCopiar código<script src="https://www.google.com/recaptcha/api.js?render=TU_CLAVE_DEL_SITIO"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('TU_CLAVE_DEL_SITIO', {action: 'submit'}).then(function(token) { document.getElementById('g-recaptcha-response').value = token; }); }); </script>
  • Insertar un campo oculto para almacenar el token: Antes del botón de envío del formulario, añade:htmlCopiar código<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

Tu archivo customer-form.tpl debería quedar así:

smartyCopiar código{block name='customer_form'}
  {block name='customer_form_errors'}
    {include file='_partials/form-errors.tpl' errors=$errors['']}
  {/block}

  <script src="https://www.google.com/recaptcha/api.js?render=TU_CLAVE_DEL_SITIO"></script>
  <script>
    grecaptcha.ready(function() {
        grecaptcha.execute('TU_CLAVE_DEL_SITIO', {action: 'submit'}).then(function(token) {
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
  </script>

  <form action="{block name='customer_form_actionurl'}{$action}{/block}" id="customer-form" method="post">
    <div>
      {block "form_fields"}
        {foreach from=$formFields item="field"}
          {form_field field=$field}
        {/foreach}
      {/block}
    </div>
    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">
    <footer>
      <button type="submit">{l s='Register' d='Shop.Theme.Actions'}</button>
    </footer>
  </form>
{/block}

2.2 Validar reCAPTCHA en el servidor

  1. Abre el archivo del controlador de autenticación:bashCopiar códigocontrollers/front/AuthController.php
  2. Busca el método initContent y agrega la validación de reCAPTCHA:phpCopiar códigopublic function initContent() { if (Tools::isSubmit('create_account')) { $recaptchaResponse = Tools::getValue('g-recaptcha-response'); $secretKey = 'TU_CLAVE_SECRETA'; $response = file_get_contents( 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secretKey . '&response=' . $recaptchaResponse . '&remoteip=' . $_SERVER['REMOTE_ADDR'] ); $responseKeys = json_decode($response, true); if (!$responseKeys['success'] || $responseKeys['score'] < 0.5) { $this->errors[] = $this->trans('Your action was flagged as suspicious. Please try again.', [], 'Shop.Notifications.Error'); return; } } parent::initContent(); }
  3. Guarda los cambios.

Paso 3: Añadir reCAPTCHA al formulario de contacto

3.1 Modificar contact.tpl

  1. Navega a:bashCopiar códigothemes/<nombre_de_tu_tema>/templates/contact.tpl
  2. Realiza los siguientes cambios:
    • Añadir el script de reCAPTCHA v3 antes del formulario:htmlCopiar código<script src="https://www.google.com/recaptcha/api.js?render=TU_CLAVE_DEL_SITIO"></script> <script> grecaptcha.ready(function() { grecaptcha.execute('TU_CLAVE_DEL_SITIO', {action: 'submit'}).then(function(token) { document.getElementById('g-recaptcha-response').value = token; }); }); </script>
    • Insertar el campo oculto para almacenar el token:htmlCopiar código<input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

3.2 Validar reCAPTCHA en el servidor

  1. Abre el archivo controlador del formulario de contacto:bashCopiar códigocontrollers/front/ContactController.php
  2. Busca la función postProcess y agrega la validación:phpCopiar códigopublic function postProcess() { if (Tools::isSubmit('submitMessage')) { $recaptchaResponse = Tools::getValue('g-recaptcha-response'); $secretKey = 'TU_CLAVE_SECRETA'; $response = file_get_contents( 'https://www.google.com/recaptcha/api/siteverify?secret=' . $secretKey . '&response=' . $recaptchaResponse . '&remoteip=' . $_SERVER['REMOTE_ADDR'] ); $responseKeys = json_decode($response, true); if (!$responseKeys['success'] || $responseKeys['score'] < 0.5) { $this->errors[] = $this->trans('Your action was flagged as suspicious. Please try again.', [], 'Shop.Notifications.Error'); return; } } parent::postProcess(); }
  3. Guarda los cambios.

Paso 4: Probar y limpiar caché

  1. Limpia la caché de PrestaShop:
    • Ve a Parámetros Avanzados > Rendimiento.
    • Haz clic en Borrar caché.
  2. Prueba la integración:
    • Accede a los formularios de registro y contacto.
    • Intenta enviarlos sin completar el captcha y verifica que aparece el mensaje de error.
    • Completa el captcha y verifica que el formulario se envía correctamente.

Conclusión

Con esta integración de Google reCAPTCHA v3, habrás reforzado la seguridad de tu tienda PrestaShop contra el spam en los formularios más utilizados. Este paso mejora la experiencia del usuario y protege tanto tus datos como los de tus clientes. ¡Tu tienda está lista para operar de manera más segura! 🚀

Deja un comentario

Scroll al inicio