2

Estoy intentando hacer una verificación por ReCaptcha cuando un usuario se registra, pero me encuentro con un error que no me deja seguir, se trata del error {"success":false,"message":"Error en el reCAPTCHA. Por favor, completa la verificaci\u00f3n."}

He estado utilizando ReCaptcha V3, pero me aparece ese error. Mi código consta de varias partes, de un HTML, un JS y un PHP.

(He incluido la biblioteca de Javascript:

<!-- Recapchta -->
    <script src="https://www.google.com/recaptcha/api.js"></script>

)

Primero, mi HTML es un formulario y en el boton submit del formulario tengo este codigo:

<button type="submit" id="btnSubmit" name="g-recaptcha-response"
class="g-recaptcha w-full text-white bg-orange-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
data-sitekey="my-key" data-callback='onSubmit'data-action='submit'>Regístrate</button>

Luego, manejo el envío del formulario con AJAX de esta manera:

function onSubmit(token) {
            document.getElementById("demo-form").submit();
            document.getElementById('registroForm').addEventListener('submit', function (event) {
                event.preventDefault();

                var formData = new FormData(this);

                fetch('register.php', {
                    method: 'POST',
                    body: formData
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            // Mostrar mensaje de éxito
                            alert(data.message);
                            // Redirigir al usuario a una página específica
                            window.location.href = './tests.html';
                        } else {
                            // Mostrar mensaje de error
                            alert(data.message);
                        }
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            });
        }

Y por último, tengo mi PHP que realiza la verificación del lado del servidor:

<?php
// Verificar el reCAPTCHA
if(isset($_POST['g-recaptcha-response'])) {
    $recaptchaResponse = $_POST['g-recaptcha-response'];

    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query([
        'secret' => '6LffLykmAAAAAOf2KJq3XTaRG280E9CWuI5DS-fi',
        'response' => $recaptchaResponse
    ]));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    $response = curl_exec($ch);
    curl_close($ch);

    $recaptchaResult = json_decode($response);

    if ($recaptchaResult->success) {

        // Conexión a la base de datos
        $servername = "***";
        $username = "***";
        $db_password = "***";
        $dbname = "****";
        $port = 3306;

        $conn = new mysqli($servername, $username, $db_password, $dbname, $port);

        // Comprobar la conexión
        if ($conn->connect_error) {
            error_log("Conexión fallida: " . $conn->connect_error);
            die("Conexión fallida: " . $conn->connect_error);
        }

        // Verificar si se recibieron los datos del formulario
        if ($_SERVER["REQUEST_METHOD"] === "POST") {
            // Obtener los valores del formulario
            $nombre = sanitizeInput($_POST["nombre"]);
            $apellido = sanitizeInput($_POST["apellido"]);
            $email = sanitizeEmail($_POST["email"]);
            $password = sanitizeInput($_POST["password"]);

            // Consulta de inserción
            $query = "INSERT INTO users (nombre, apellido, email, password) VALUES (?,?,?,?)";
            $stmt = $conn->prepare($query);

            // Verificar si la preparación de la consulta tuvo éxito
            if ($stmt === false) {
                error_log("Error en la consulta: " . $conn->error);
                die("Error en la consulta: " . $conn->error);
            }

            // Encriptar la contraseña (por ejemplo, usando Argon2)
            $hashedPassword = password_hash($password, PASSWORD_ARGON2I);

            // Asignar los valores a los parámetros de la consulta
            $stmt->bind_param("ssss", $nombre, $apellido, $email, $hashedPassword);

            // Ejecutar la consulta
            if ($stmt->execute()) {
                // Registro insertado correctamente
                $response = array(
                    'success' => true,
                    'message' => 'Registro insertado correctamente.'
                );

                // Establecer las cookies
                setcookie('remember', '1', time() + (10 * 24 * 60 * 60), '/', '');
                setcookie("sesion", true, time() + 1 * 24 * 60 * 60, "/", "");
                header('Location: tests.html');
            } else {
                // Error al insertar el registro
                $response = array(
                    'success' => false,
                    'message' => 'Error al insertar el registro: ' . $stmt->error
                );
            }

            // Cerrar la consulta
            $stmt->close();
        }

        // Cerrar la conexión
        $conn->close();
    } else {
        $response = array(
            'success' => false,
            'message' => 'Error en el reCAPTCHA. Por favor, completa la verificación.'
        );
    }
} else {
    $response = array(
        'success' => false,
        'message' => 'No se proporcionó el reCAPTCHA. Por favor, completa la verificación.'
    );
}

echo json_encode($response);

function sanitizeInput($input) {
    // Aplica la sanitización adecuada según tus necesidades
    $sanitizedInput = trim($input);
    $sanitizedInput = stripslashes($sanitizedInput);
    $sanitizedInput = htmlspecialchars($sanitizedInput);
    return $sanitizedInput;
}

function sanitizeEmail($email) {
    // Sanitiza el correo electrónico utilizando el filtro de correo electrónico de PHP
    $sanitizedEmail = filter_var($email, FILTER_SANITIZE_EMAIL);
    return $sanitizedEmail;
}
?>

EDITADO El error específico es: {"success":false,"message":"Respuesta de entrada no válida."}

12
  • Puedes pintar el error que te aparece en el llamado a la API de Google? Veo que muestras el error: Error en el reCAPTCHA. Por favor, completa la verificación., el error de la API debería coincidir con alguno de los mencionados en la documentación. el 22 may. a las 22:18
  • Hola! El error específico es: {"success":false,"message":"Respuesta de entrada no válida."} el 22 may. a las 22:45
  • Ahora podrías hacerle un print a la variable $recaptchaResult? el 22 may. a las 23:26
  • Esto es lo que devuelve: stdClass Object ( [success] => [error-codes] => Array ( [0] => invalid-input-response ) ) {"success":false,"message":"Respuesta de entrada no v\u00e1lida."} el 22 may. a las 23:42
  • Comprobando que el error code es invalid-input-response podrían ser varios motivos, podrías probar estas cosas: 1.- Comprobar que tu host/sitio esté dado de alta correctamente en el panel de administración de reCaptcha. 2.- Comprobar que no estés mezclando el site key y el secret key. el 22 may. a las 23:56

1 respuesta 1

2
+50

Te diré como lo tengo yo funcionando y trataré de adecuarlo a lo tuyo

1.- Cargo la librería

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"async defer> </script>

Cuando carga la Liberia llama a la función onloadCallback

var onloadCallback = function() {
        return new Promise(function(resolve, reject) { 
            grecaptcha.render('captc', {
                      'sitekey' : '6Leot4YUAAAAACTXXXX_PTYASDADVUxIiP-7',
                      'callback' : verifyCallback,
                    });
            resolve();
       });

  };

Esto hace que se llame a la función verifyCallback cuando valida el captcha

var verifyCallback = function(response) {
        return new Promise(function(resolve, reject) { 
            document.getElementById("btnSubmit").setAttribute('disabled', false);
            resolve();
       });
    };

La función anterior es para habilitar el botón submit

2.- El Form

<form id="registroForm">
  <!-- Aquí todos los inputs  -->
  <div  id="captc" class="g-recaptcha"></div>
  <button id="btnSubmit" type="button"> Enviar</button>
</form>

Si te fijas el botón y el g-recaptcha los tengo separados

3.- Javascript

window.addEventListener("DOMContentLoaded", (event) => {
  
  const boton=document.getElementById("btnSubmit");
  
  //deshabilito el botón enviar
  boton.setAttribute('disabled', true);

  boton.addEventListener("click",Enviar);
});

function Enviar(){

    var formData = new FormData(document.getElementById("registroForm"));

    fetch('register.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Mostrar mensaje de éxito
            alert(data.message);
            // Redirigir al usuario a una página específica
            window.location.href = './tests.html';
        } else {
            // Mostrar mensaje de error
            alert(data.message);
        }
    }).catch(console.error);
}

4.- El PHP

if(isset($_POST['g-recaptcha-response']))
{
   $captcha=$_POST['g-recaptcha-response'];
   $response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6Lfeot4Y3455435fjw8kp_P41ffHcURofsdfsdfEdt&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true); 

  if($response['success'])
  {
     //etc

  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.