SilentShield è un'alternativa ai CAPTCHA invisibile e conforme al GDPR per le applicazioni React e Next.js. Carichi un leggero script client, ottieni un token e lo verifichi sul server con il pacchetto @forge12interactive/silentshield-sdk-js e un'unica chiave API. Non ci sono cookie, né tracciamento né dati personali, e l'hosting è per impostazione predefinita esclusivamente nell'UE.
CAPTCHA invisibile per React & Next.js
Funziona con qualsiasi app React o Next.js tramite il leggero script di SilentShield: ottieni un nonce all'invio e verificalo nel backend con @forge12interactive/silentshield-sdk-js. Invisibile e conforme al GDPR.
Developer Experience
Esempi di codice
Integra lo script client
<!-- 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 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>
);
}Verifica nel 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 });
}Come funziona SilentShield in React
SilentShield carica un piccolo script client che esegue un controllo invisibile mentre un utente interagisce con il tuo modulo. All'invio, il tuo componente React o Next.js invia il token generato al tuo backend, dove lo verifichi con il pacchetto @forge12interactive/silentshield-sdk-js. Gli utenti non vedono mai un rompicapo e il tuo bundle rimane leggero perché non c'è alcun widget pesante da renderizzare.
Script client più verifica sul server
Non esiste un pacchetto web @silentshield/react separato da installare: SilentShield funziona in qualsiasi applicazione React o Next.js tramite lo script client e una verifica lato server. Aggiungi lo script https://api.silentshield.io/client.js?k=YOUR_API_KEY, leggi il token nel tuo componente e lo confermi rispetto a https://api.silentshield.io/v1/verify utilizzando l'header api-key da un route handler o una route API.
Procedura di configurazione
Crea un account e copia la tua chiave API. Aggiungi lo script client SilentShield alla tua applicazione e cattura il token quando il modulo viene inviato. Installa @forge12interactive/silentshield-sdk-js sul tuo server, crea il client con la tua chiave API e chiama verify con il token. Se il risultato è umano, elabora la richiesta; altrimenti rifiutala.
Privacy e accessibilità per impostazione predefinita
SilentShield non memorizza cookie, non esegue tracciamento e non raccoglie dati personali, quindi la tua applicazione rimane conforme al GDPR. La verifica viene eseguita per impostazione predefinita su infrastruttura esclusivamente nell'UE. Il controllo invisibile soddisfa lo standard WCAG 2.1 AA, che mantiene i tuoi moduli utilizzabili per gli utenti di tastiera e screen reader senza alcuna sfida visiva.
Integra React ora
Aggiungi lo script, verifica con @forge12interactive/silentshield-sdk-js — pronto in pochi minuti.