Compartir las claves y tokens de la API de reCAPTCHA

Los artículos de la categoría Manual del desarrollador abordan temas que requieren conocimiento técnico. Ten cuidado y utiliza las técnicas descritas a continuación bajo tu propia responsabilidad. Si no tienes experiencia en desarrollo, y necesitas ayuda, te recomendamos solicitar el apoyo de un profesional.

Con la capacidad de integración de Contact Form 7 con reCAPTCHA (v3), puedes proteger tus formularios de contacto de los robots de mensajes no deseados (spam). Ya que un robot de spam apunta a todo, no solo a los formularios de contacto, también puedes proteger otros componentes en tu web (como los formularios de comentarios) usando la tecnología reCAPTCHA.

Afortunadamente, la integración de Contact Form 7 con reCAPTCHA está diseñada para ser abierta y accesible a otros componentes. En este fragmento de código, te diré cómo puedes recuperar las claves y tokens de la API de reCAPTCHA desde Contact Form 7 y reutilizar los datos dentro de tu propio plugin reCAPTCHA.

Compartir las claves de la API de reCAPTCHA

Para recuperar las claves de la API de reCAPTCHA que configuraste a través de la página del menú «Integración» de Contact Form 7, ejecuta el código PHP en tu plugin de la siguiente manera:

$service = WPCF7_RECAPTCHA::get_instance();
$sitekey = $service->get_sitekey();
$secret = $service->get_secret( $sitekey );

Nota: necesitas conocer la clave del sitio para recuperar la clave secreta, así que primero recupere la clave del sitio.

Compartir los tokens de reCAPTCHA

La API de reCAPTCHA responde a una solicitud grecaptcha.execute() con un token. Al verificar el token, se te informa sobre la probabilidad de que el acceso al sitio sea realizado por un humano o un robot de spam.

Dado que esta información es global en el sitio, no solo sobre formularios de contacto, los tokens también son útiles para otros componentes del sitio.

Cuando Contact Form 7 llama a grecaptcha.execute() y obtiene un token de la API, desencadena un evento DOM personalizado wpcf7grecaptchaexecuted. Puedes acceder al token a través del objeto de evento con un código JavaScript en la vista pública.

Por ejemplo, Contact Form 7 también usa este evento para pasar un token a un campo de formulario de la siguiente manera:

document.addEventListener( 'wpcf7grecaptchaexecuted', function( event ) {
  var fields = document.querySelectorAll(
    "form.wpcf7-form input[name='g-recaptcha-response']"
  );

  for ( var i = 0; i < fields.length; i++ ) {
    var field = fields[ i ];
    field.setAttribute( 'value', event.detail.token );
  }
} );