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."}
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.print
a la variable$recaptchaResult
?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 elsite key
y elsecret key
.