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 tra siti web, e l'hosting è per impostazione predefinita 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 Suo modulo. All'invio, il Suo componente React o Next.js invia il token generato al Suo backend, dove lo verifica con il pacchetto @forge12interactive/silentshield-sdk-js. Gli utenti non vedono mai un rompicapo e il Suo 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. Aggiunge lo script https://api.silentshield.io/client.js?k=YOUR_API_KEY, legge il token nel Suo componente e lo conferma rispetto a https://api.silentshield.io/v1/verify utilizzando l'header api-key da un route handler o una route API.
Procedura di configurazione
Crei un account e copi la Sua chiave API. Aggiunga lo script client SilentShield alla Sua applicazione e catturi il token quando il modulo viene inviato. Installi @forge12interactive/silentshield-sdk-js sul Suo server, crei il client con la Sua chiave API e chiami verify con il token. Se il risultato è umano, elabori la richiesta; altrimenti la rifiuti.
Privacy e accessibilità per impostazione predefinita
SilentShield non usa cookie né tracciamento tra siti web; l'indirizzo IP serve solo per la verifica e non viene memorizzato in chiaro. Così può proteggere la Sua applicazione in conformità al GDPR. La verifica viene eseguita per impostazione predefinita sui nostri server in Germania. Il controllo invisibile soddisfa lo standard WCAG 2.1 AA, che mantiene i Suoi moduli utilizzabili per gli utenti di tastiera e screen reader senza alcuna sfida visiva.
Integra React ora
Aggiunga lo script, verifichi con @forge12interactive/silentshield-sdk-js — pronto in pochi minuti.