Este artículo es una continuación Formulario de contacto (Hidrotecno), que debes haberlo leído, antes de continuar.
reCAPTCHA es un sistema de seguridad en línea desarrollado por Google que utiliza pruebas para determinar si un usuario es humano o un bot. Se utiliza comúnmente en formularios en línea para prevenir el spam y el abuso automatizado. Los usuarios deben completar tareas simples, como identificar objetos en imágenes o resolver acertijos, o en la V3 de reCAPTCHA se verifica usando historial de navegación para determinar que son humanos.
Lo primero es obtener las claves de recapcha, que la podemos ver en este video de youtube.
1. Vamos a añadirle al formulario un input oculto, en el cual guardaremos el token que necesitamos para poder hacerle la petición reCAPTCHA.
2. Para que el reCAPTCHA funcione, vamos a usar dos archivos con el mismo nombre de recaptcha, pero el uno será .js y el otro .php, En estos vamos a colocar las claves del sitio o secreta dependiendo de lo que se requiera.
recaptcha.js
recaptcha.php
Si todo sale bien podremos ver:
1. El logo de recapcha activo en la parte inferior derecha de la página.
Recomendación: Dejar el logo visible hasta que se configure la página migrada, en el servidor del cliente y después de configurar las claves del dominio final.
2. Cuando envíes el formulario podrás ver el mensaje de que se envió correctamente.
Archivos Usados
1.
recaptcha.js
JavaScript
wp-content/themes/depura_theme/frontend/js/components/
Logic Frontend
1.
recaptcha.js
JavaScript
wp-content/themes/depura_theme/frontend/js/components/
Logic Frontend
grecaptcha.ready(function() {
//Clave del sitio
let site_key = ''
grecaptcha.execute(site_key, {action: 'submit'}).then(function(token) {
document.querySelector('input[name="g-recaptcha-response"]').value = token;
});
});
2.
recaptcha.php
PHP
wp-content/themes/depura_theme/functions/settings/
Setting
2.
recaptcha.php
PHP
wp-content/themes/depura_theme/functions/settings/
Setting
<?php
function custom_recaptcha_script()
{ //Clave del sitio
$site_key = '';
wp_enqueue_script('custom-recaptcha-script', 'https://www.google.com/recaptcha/api.js?render='.$site_key);
}
add_action('wp_enqueue_scripts', 'custom_recaptcha_script');
function custom_recaptcha_verification($uri, $id_form)
{
if (isset($_POST['submit'])) {
$recaptcha_response = $_POST['g-recaptcha-response'];
//clave secreta
$secret_key = '';
$remote_ip = $_SERVER['REMOTE_ADDR'];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array(
'secret' => $secret_key,
'response' => $recaptcha_response,
'remoteip' => $remote_ip
);
$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
)
);
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
$result = json_decode($result);
if ($result->success) {
wp_redirect($uri . '?sent=1' . $id_form);
return true;
} else {
wp_redirect($uri . '?sent=-1' . $id_form);
return false;
}
exit;
}
}
3.
receive-contact.php
PHP
wp-content/themes/depura_theme/functions/posts/
Setting
3.
receive-contact.php
PHP
wp-content/themes/depura_theme/functions/posts/
Setting
Modificamos el archivo de receive-contact.php para llamar la función de reCAPTCHA y luego condicionamos el guardado de la información a la respuesta del reCAPTCHA.
Nota: elimínanos la función wp_redirect($uri); , ya que esta redirección se hará en el archivo de recaptcha.php
<?php
add_action('admin_post_nopriv_process_form_contact', 'receive_contact');
add_action('admin_post_process_form_contact', 'receive_contact');
function receive_contact()
{
//variables
$id_form = '#frm-contact';
$uri = sanitize_url( $_POST['uri'] );
$name = sanitize_text_field($_POST['name']);
$email = sanitize_email($_POST['email']);
$interest = sanitize_text_field($_POST['interest']);
$interest_term = get_term_by('slug', $interest, 'interest', 'post_contact');
$message = sanitize_text_field($_POST['message']);
//Cuerpo del mensaje
$msg = "Tema de Interés: " . $interest_term->name . "\n";
$msg .= "Nombre: " . $name . "\n";
$msg .= "Correo: " . $email . "\n";
$msg .= $message;
$recaptcha = custom_recaptcha_verification($uri, $id_form);
//Guardar el post en DB
if ($recaptcha){
$post_id = wp_insert_post([
'post_title' => 'Mensaje de ' . $name,
'post_type' => 'post_contact',
'post_content' => $msg,
'post_status' => 'private',
]);
wp_set_object_terms($post_id, $interest, 'interest', false);
}
}
