SilentShield es una alternativa a CAPTCHA invisible y conforme con el RGPD para aplicaciones de React y Next.js. Carga un ligero script de cliente, obtiene un token y lo verifica en el servidor con el paquete @forge12interactive/silentshield-sdk-js y una única clave de API. No hay cookies, ni seguimiento ni datos personales, y el alojamiento es exclusivamente en la UE de forma predeterminada.
CAPTCHA invisible para React & Next.js
Funciona con cualquier aplicación React o Next.js mediante el ligero script de SilentShield: obtén un nonce al enviar y verifícalo en tu backend con @forge12interactive/silentshield-sdk-js. Invisible y conforme al RGPD.
Developer Experience
Ejemplos de código
Incrustar el script de cliente
<!-- Add to <head> with SRI for security -->
(function () {
var KEY = "YOUR_API_KEY";
var SITE = location.hostname;
var V = "2025.09.1";
var s = document.createElement('script');
s.src = "https://api.silentshield.io/client.js?k=" + encodeURIComponent(KEY)
+ "&v=" + encodeURIComponent(V)
+ "&site=" + encodeURIComponent(SITE);
s.async = true;
s.crossOrigin = "anonymous";
document.head.appendChild(s);
})();Componente de React
import React, { useState } from "react";
export default function ContactForm() {
const [loading, setLoading] = useState(false);
const [message, setMessage] = useState("");
const handleSubmit = async (e) => {
e.preventDefault();
setLoading(true);
try {
// client.js injects a hidden behavior_nonce input into the form —
// read it from the form data (there is no global SilentShield object).
const formData = new FormData(e.currentTarget);
const nonce = formData.get("behavior_nonce");
// Verify on your backend
const res = await fetch("/api/verify", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ nonce }),
});
const data = await res.json();
if (res.ok && data.success) {
setMessage("Successfully verified!");
// Process form submission
} else {
setMessage("Bot detected. Please try again.");
}
} catch (error) {
console.error("Verification failed:", error);
setMessage("Verification failed. Please try again.");
} finally {
setLoading(false);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="email" placeholder="Email" required />
<button type="submit" disabled={loading}>
{loading ? "Verifying..." : "Submit"}
</button>
{message && <p>{message}</p>}
</form>
);
}Verificación en el backend (Next.js)
// app/api/verify/route.ts
import { SilentShield } from "@forge12interactive/silentshield-sdk-js";
export async function POST(req: Request) {
const { nonce } = await req.json();
const result = await SilentShield.verifyNonce(nonce, process.env.SILENTSHIELD_API_KEY);
const human = result.ok && result.verdict === "human" && result.confidence >= 0.7;
if (!human) {
return Response.json({ error: "Bot detected" }, { status: 403 });
}
// Human — process the form
return Response.json({ success: true });
}Cómo funciona SilentShield en React
SilentShield carga un pequeño script de cliente que ejecuta una comprobación invisible mientras un usuario interactúa con tu formulario. Al enviar, tu componente de React o Next.js envía el token generado a tu backend, donde lo verificas con el paquete @forge12interactive/silentshield-sdk-js. Los usuarios nunca ven un rompecabezas y tu bundle se mantiene ligero porque no hay ningún widget pesado que renderizar.
Script de cliente más verificación en servidor
No hay ningún paquete web @silentshield/react independiente que instalar: SilentShield funciona en cualquier aplicación de React o Next.js mediante el script de cliente y una verificación del lado del servidor. Añades el script https://api.silentshield.io/client.js?k=YOUR_API_KEY, lees el token en tu componente y lo confirmas contra https://api.silentshield.io/v1/verify usando la cabecera api-key desde un route handler o una ruta de API.
Guía de configuración
Crea una cuenta y copia tu clave de API. Añade el script de cliente de SilentShield a tu aplicación y captura el token cuando se envíe el formulario. Instala @forge12interactive/silentshield-sdk-js en tu servidor, crea el cliente con tu clave de API y llama a verify con el token. Si el resultado es humano, procesa la solicitud; de lo contrario, recházala.
Privacidad y accesibilidad de forma predeterminada
SilentShield no almacena cookies, no realiza seguimiento y no recopila datos personales, por lo que tu aplicación sigue siendo conforme con el RGPD. La verificación se ejecuta en infraestructura exclusivamente en la UE de forma predeterminada. La comprobación invisible cumple con WCAG 2.1 AA, lo que mantiene tus formularios utilizables para usuarios de teclado y lectores de pantalla sin ningún desafío visual.
Integra React ahora
Añade el script, verifica con @forge12interactive/silentshield-sdk-js — listo en minutos.