Recientemente he tenido que configurar Google reCaptcha v3 para un cliente por motivos de spam y a continuación os damos la solución que hemos realizado.
Google lanzó en 2018 reCAPTCHA v3 para evitar bots de spam sin ninguna interacción del usuario.
En este tutorial, os mostraré cómo integrar Google reCAPTCHA v3 en tu página web.
Registra tu página web y obtén la clave secreta
Lo primero que tienes que hacer es registrar tu página web en Google reCAPTCHA. Para ello puedes hacerlo pinchando aquí.
Para ello, necesitarás inicar sesión en tu cuenta de Google y crea la aplicación completando el formulario. Seleccione el reCAPTCHA v3 y seleccione la casilla de verificación «No soy un robot».
Una vez enviado, Google te proporcionará las siguientes dos informaciones.
- Clave del sitio
- Llave secreta
Cómo integrar Google reCAPTCHA en tu página web
Para integrar google reCAPTCHA en tu página web, debes colocarlo en el lado del cliente y en el lado del servidor. En la página HTML del cliente, debes integrar esta línea entre las etiquetas <head></head> de la página del formulario
📄 DESCARGAR CÓDIGO | https://bit.ly/codigoGoogleReCAPTCHA
<script src='https://www.google.com/recaptcha/api.js?render=CLAVE_SITIO_WEB'>
</script>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('CLAVE_SITIO_WEB', {action: 'formulario'})
.then(function(token) {
var recaptchaResponse = document.getElementById('recaptchaResponse');
recaptchaResponse.value = token;
});});
</script>* Reemplace ‘CLAVE_SITIO_WEB‘ con la clave que se le proporcionó en el panel de control de reCAPTCHA
Luego ponemos un campo oculto en el formulario para el reCAPTCHA:
📄 DESCARGAR | https://bit.ly/CampoOculto
<input type="hidden" name="recaptcha_response" id="recaptchaResponse">Insertar reCAPTCHA en PHP para la integración del lado del servidor
A continuación os dejamos dos métodos para insertarlo ya que los servidores o distintos hostings pueden tener distinta configuración y tendrás que utilizar uno u otro código de reCaptcha v3:
MÉTODO 1
📄 DESCARGAR CÓDIGO 1 | https://bit.ly/codigo1ReCAPTCHA
if (isset($_POST['action']) && ($_POST['action'] == 'process')) {
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'CLAVE_SECRETA';
$recaptcha_response = $_POST['recaptcha_response'];
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
$recaptcha = json_decode($recaptcha);
if($recaptcha->score >= 0.7){
// código para procesar los campos y enviar el form
} else {
// código para lanzar aviso de error en el envío
}
}MÉTODO 2
📄 DESCARGAR CÓDIGO 2 | https://bit.ly/codigo2ReCAPTCHA
$recaptcha_secret = 'CLAVE_SECRETA';
$recaptcha_response = $_POST['recaptcha_response'];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array( 'secret' => $recaptcha_secret, 'response' => $recaptcha_response, 'remoteip' => $_SERVER['REMOTE_ADDR'] );
$curlConfig = array( CURLOPT_URL => $url, CURLOPT_POST => true, CURLOPT_RETURNTRANSFER => true, CURLOPT_POSTFIELDS => $data );
$ch = curl_init();
curl_setopt_array($ch, $curlConfig);
$response = curl_exec($ch);
curl_close($ch);
$jsonResponse = json_decode($response);
if ($jsonResponse->success === true) {
// Código para procesar el formulario
} else {
// Código para aviso de error
}* Reemplace ‘CLAVE_SECRETA‘ con la clave que se le proporcionó en el panel de control de reCAPTCHA
Una vez realizado este proceso. Cuando entres en la página web, verá en el extremo derecho un ícono de Google reCAPTCHA:
Más información | https://developers.google.com/recaptcha
