Aprende a implementar el famoso reCAPTCHA de google en una forma de tu proyecto Symfony.

Implementando Google reCAPTCHA en un formulario en Symfony 3

Que es reCAPTCHA

reCAPTCHA es un servicio gratuito que protege su sitio web del spam y el abuso. reCAPTCHA utiliza un motor de análisis de riesgo avanzado y CAPTCHA adaptables para evitar que el software automatizado participe en actividades abusivas en su sitio. Hace esto mientras deja que sus usuarios válidos pasen con facilidad. 

reCAPTCHA no depende únicamente de las distorsiones del texto para separar al hombre de las máquinas. En su lugar, utiliza técnicas avanzadas de análisis de riesgo, considerando el compromiso total del usuario con el CAPTCHA, y evalúa una amplia gama de señales que distinguen a los humanos de los bots. ReCAPTCHA sabe cuándo ser fácil con las personas y duro con los bots. Los CAPTCHA fáciles son muy sencillos para los usuarios legítimos.

Requisitos

Para utilizar reCAPTCHA en su sitio web, deberá:

Después de registrarse en su sitio web, será redirigido al panel de administración, habrá todos los sitios web que tiene. Haga clic en el que desee utilizar.

Encontrará un menú con las claves, un ejemplo de integración del lado del cliente y un ejemplo de integración del lado del servidor. Asegúrese de guardar la clave de su sitio y la clave secreta, ya que las necesitaremos más adelante.

Keys recaptcha example

Eso debería ser suficiente para manejar la integración del lado del cliente.

  • Incluya la biblioteca php de google recaptcha en su proyecto usando composer.

Para incluir la biblioteca php de google recaptcha, agregue la siguiente línea a su archivo composer.json (en la propiedad require):

"google/recaptcha": "~1.1"

O solicítelo directamente en la consola del compositor ejecutando:

composer require google/recaptcha "~1.1"

Si no usas composer, lea cómo instalarlo usando require_once aquí .

Eso debería ser suficiente para manejar la integración del lado del servidor, ¡comencemos!

Implementar

Para este ejemplo, vamos a usar un formulario html de contacto simple, obviamente puede usar un formulario Symfony hecho por usted mismo o un formulario generado por crud. Solo asegúrese de agregar el nuevo campo dentro del formulario.

<!-- Importante agregar la api recaptcha en su documento -->
<script src='https://www.google.com/recaptcha/api.js'></script>

<form method="post" action="path/to/action" id="contact-form">
  <input type="text" name="name" />
  <input type="subject" name="subject" />
  <textarea rows="5" name="message"></textarea>
  <!-- Ahora agregue el widget con la clave del sitio que recupera en el registro -->
  <div class="g-recaptcha" data-sitekey="mypublicdata-sitekey-ofthe-google-panel"></div>
  <button type="submit">Send message</button>
</form>

 {# o si estás usando twig #}

{{form_start(form)}}
   {{form_widget(form.name)}}
   {{form_widget(form.subject)}}
   {{form_widget(form.message)}}
   <!-- Ahora agregue el widget con la clave del sitio que recupera en el registro --> 
   <div class="g-recaptcha" data-sitekey="mypublicdata-sitekey-ofthe-google-panel"></div>

   {{form_widget(form.submit)}}
{{form_end(form)}}

No importa la forma en que renderice su formulario, solo asegúrese de que el widget esté dentro del formulario . Ahora el widget debería aparecer en su formulario sin ningún problema si su valor de data-sitekey es correcto y coincide con su sitio web. Con el captcha api, este div será un elemento de formulario dentro del formulario, este contendrá un valor que recuperaremos con php en el evento de envío para validarlo.

Ahora solo necesita procesar la acción de envío en el controlador, donde apunta su formulario.

Su controlador ahora debería verse algo como:

use Symfony\Component\HttpFoundation\Request; // Manejar la solicitud en el controlador
use ReCaptcha\ReCaptcha; // Incluir la biblioteca recaptcha

public function mysubmitedAction(Request $request){
  $recaptcha = new ReCaptcha('here-is-the-secret-key-that-no-one-but-you-shouldKnow');
  $resp = $recaptcha->verify($request->request->get('g-recaptcha-response'), $request->getClientIp());

  if (!$resp->isSuccess()) {
    // ¡Haz algo si el envío no es válido! Usa el mensaje para mostrar algo
    $message = "El reCAPTCHA no se ingresó correctamente. Vuelve atrás e inténtalo de nuevo." . "(reCAPTCHA said: " . $resp->error . ")";
  }else{
    // Todo funciona bien;) tu contacto se ha guardado.
  }
}

El método de verificación tiene 3 parámetros, puede leer más sobre los métodos aquí o consultar la documentación en el repositorio oficial .

Usando una macro en Twig para renderizar el campo reCAPTCHA

Normalmente, para un elemento personalizado en una forma de Symfony, necesitaríamos crear un FormType personalizado , sin embargo, como el campo reCAPTCHA no es realmente un elemento de formulario (seleccionar, casilla de verificación o radio), no podemos hacerlo de esa manera. Pero si desea que su código sea más fácil de mantener, puede crear una macro si está usando Twig.

Cree un nuevo archivo twig con el nombre form_elements.html.twig App/Resources/views/Macroscon el siguiente contenido (si decidió cambiar la ruta, lea más sobre cómo funciona una macro en twig aquí ):

{#app/Resources/views/Macros/form_elements.html.twig#}
{# 
 # El método recaptcha le permite renderizar un elemento reCAPTCHA. Espera como primer parámetro la clave del sitio.
 #}
{% macro recaptcha(siteKey)%}
    <script src='https://www.google.com/recaptcha/api.js'></script>
    <div class="g-recaptcha" data-sitekey="{{siteKey}}"></div>
{% endmacro %}

Y ahora, en lugar de crear en cada formulario el div de recaptcha y la etiqueta de script donde lo necesite, simplemente puede usarlo en su formulario:

{% import "Macros/form_elements.html.twig" as formElements %}

{{form_start(form)}}
   {{form_widget(form.name)}}
   {{form_widget(form.subject)}}
   {{form_widget(form.message)}}
   <!-- Ahora agregue el widget con la clave del sitio que recupera en el registro --> 
   {{formElements.recaptcha("mypublicdata-sitekey-ofthe-google-panel")}}
   
   {{form_widget(form.submit)}}
{{form_end(form)}}

Ahora tu formulario debería estar protegido contra robots, ¡que te diviértas!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores