En este artículo hemos intentado responder a todas las preguntas clave. Para empezar a resolver la tarea, primero hay que determinar qué sistema de protección se está utilizando. Para ello, puedes consultar la lista de captchas y sistemas de protección antibot más populares, donde se muestran ejemplos visuales y señales clave que te ayudarán a identificar rápidamente con qué estás tratando.
Si descubres que tu sitio web utiliza Prosopo Procaptcha, el siguiente paso será analizar con más detalle sus propiedades y su funcionamiento. En este mismo artículo también puedes consultar la guía de integración de Prosopo Procaptcha para comprender por completo cómo funciona en tu sitio. Esto te permitirá no solo entender la protección actual, sino también planificar correctamente su mantenimiento.
Al probar formularios que incluyen Prosopo Procaptcha, normalmente debes verificar que la captcha funcione y esté integrada correctamente.
Puedes comprobar manualmente la captcha incrustada en tu sitio.
Para la resolución automática puedes usar herramientas como CapMonster Cloud, que reciben los parámetros de la captcha, los procesan en sus servidores y devuelven un token listo para usar. Inserta ese token en el formulario para pasar la verificación sin interacción del usuario.
Trabajar con CapMonster Cloud mediante la API suele implicar los siguientes pasos:
type - ProsopoTask
websiteURL - URL completa de la página con captcha;
websiteKey - Valor del parámetro siteKey encontrado en la página.
https://api.capmonster.cloud/createTask
{
"clientKey": "API_KEY",
"task": {
"type": "ProsopoTask",
"websiteURL": "https://www.example.com",
"websiteKey": "5EZU3LG31uzq1Mwi8inwqxmfvFDpj7VzwDnZwj4Q3syyxBwV"
}
}
{
"errorId":0,
"taskId":407533072
}https://api.capmonster.cloud/getTaskResult{
"clientKey":"API_KEY",
"taskId": 407533072
}
{
"errorId":0,
"status":"ready",
"solution": {
"token": "0x00016c68747470733a2f2f70726f6e6f6465332e70726f736f706f2e696fc0354550516f4d5a454463354c704e376774784d4d7a5950547a4136..."
}
}
async function sendTokenToSite(token) {
// URL del formulario o endpoint donde se enviará el token
const formURL = "https://example..com/en/your-form-endpoint";
// Ejemplo de datos del formulario
const formData = {
email: "example@example.com",
password: "yourpassword",
"procaptcha-response": token // Token de Procaptcha
};
try {
const response = await fetch(formURL, {
method: "POST",
headers: {
"Content-Type": "application/json", // или 'application/x-www-form-urlencoded' dependiendo del sitio
},
body: JSON.stringify(formData),
});
const result = await response.text(); // o response.json() si el servidor devuelve JSON
console.log("Server response:", result);
} catch (err) {
console.error("Error sending token:", err);
}
}
// Función principal
async function solveAndSend() {
const client = CapMonsterCloudClientFactory.Create(
new ClientOptions({ clientKey: API_KEY })
);
const prosopoRequest = new ProsopoRequest({
websiteURL: "https://example.com/en/",
websiteKey: "5EZU3LG31uzq1Mwi8inwqxmfvFDpj7VzwDnZwj4Q3syyxBwV"
});
const balance = await client.getBalance();
console.log("Balance:", balance);
const result = await client.Solve(prosopoRequest);
console.log("Captcha solution:", result);
// Enviar token al sitio
await sendTokenToSite(result.solution); // result.solution contiene el token de Procaptcha
}
solveAndSend().catch(console.error);
1. Obtén las claves (sitekey y secret key)
2. Agrega tu dominio
3. Conecta el script de Procaptcha
Coloca la etiqueta en <head>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>>4. Opción 1: Renderizado implícito (automático) — MÁS FÁCIL
Agrega un contenedor donde el captcha aparecerá automáticamente:
<div class="procaptcha" data-sitekey="your_site_key"></div>Generalmente dentro del formulario.
<html>
<head>
<title>Procaptcha Demo</title>
<script type="module" src="https://js.prosopo.io/js/procaptcha.bundle.js" async defer></script>
</head>
<body>
<form action="" method="POST">
<input type="text" name="email" placeholder="Email" />
<input type="password" name="password" placeholder="Password" />
<div class="procaptcha" data-sitekey="your_site_key"></div>
<br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Después de la verificación exitosa del captcha, se agregará un parámetro oculto:
5. Opción 2: Renderizado explícito (manual) — MÁS CONTROL
<html>
<head>
<script
type="module"
id="procaptcha-script"
src="https://js.prosopo.io/js/procaptcha.bundle.js"
async
defer
></script>
</head>
<body>
<div id="procaptcha-container"></div>
</body>
</html>
document.getElementById('procaptcha-script').addEventListener('load', function () {
function onCaptchaVerified(output) {
console.log('Captcha verified, output: ' + JSON.stringify(output))
}
const captchaContainer = document.getElementById('procaptcha-container')
window.procaptcha.render(captchaContainer, {
siteKey: 'YOUR_SITE_KEY',
theme: 'dark',
callback: onCaptchaVerified,
})
})6. Configuración del tipo de captcha (opcional)
Se puede seleccionar explícitamente:
Por ejemplo:
<div class="procaptcha"
data-sitekey="your_site_key"
data-captcha-type="pow">
</div>7. Obligatorio: verificación del token en el servidor
Después del renderizado del captcha, el servidor debe verificar la respuesta. La verificación se realiza mediante API:
https://api.prosopo.io/siteverifyContenido de la solicitud:
{
"secret": "your_secret_key",
"token": "PROCAPTCHA-RESPONSE"
}8. Verificación del servidor en PHP
<?php
function verifyToken($token) {
$url = 'https://api.prosopo.io/siteverify';
$data = json_encode(["secret" => "your_secret_key", "token" => $token]);
$options = [
'http' => [
'header' => "Content-Type: application/json\r\n",
'method' => 'POST',
'content' => $data,
],
];
$context = stream_context_create($options);
$result = file_get_contents($url, false, $context);
$response = json_decode($result, true);
return $response["verified"] ?? false;
}
?>¿Qué se considera verificación exitosa?
Si el servidor de Procaptcha devuelve:
{
"verified": true
}— Captcha aprobado, se puede realizar la acción protegida (por ejemplo, registrar un usuario).
Si has heredado un sitio web que ya tiene un captcha u otro sistema de protección instalado y no tienes acceso al código, no pasa nada. Identificar qué tecnología se está utilizando es bastante sencillo. Para comprobar que todo funciona correctamente, puedes usar el servicio de reconocimiento CapMonster Cloud en un entorno de pruebas aislado, para asegurarte de que el mecanismo de procesamiento de tokens y la lógica de verificación funcionan correctamente.
En el caso de Prosopo Procaptcha, basta con detectar el sistema, analizar su comportamiento y confirmar que la protección funciona correctamente. En el artículo hemos mostrado cómo identificar Prosopo Procaptcha y dónde encontrar las instrucciones para su integración o reconfiguración, de modo que puedas mantener la protección con confianza y controlar su funcionamiento.