SilentShield est une alternative aux CAPTCHA invisible et conforme au RGPD pour les applications React et Next.js. Vous chargez un script client léger, obtenez un jeton et le vérifiez sur le serveur avec le paquet @forge12interactive/silentshield-sdk-js et une seule clé API. Il n'y a ni cookies, ni suivi, ni données personnelles, et l'hébergement se fait par défaut exclusivement dans l'UE.
CAPTCHA invisible pour React & Next.js
Fonctionne avec toute application React ou Next.js grâce au script léger SilentShield : récupérez un nonce à l'envoi, vérifiez-le côté serveur avec @forge12interactive/silentshield-sdk-js. Invisible et conforme au RGPD.
Developer Experience
Exemples de code
Intégrer le 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);
})();Composant 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>
);
}Vérification côté serveur (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 });
}Comment SilentShield fonctionne dans React
SilentShield charge un petit script client qui exécute une vérification invisible pendant que l'utilisateur interagit avec votre formulaire. À la soumission, votre composant React ou Next.js envoie le jeton généré à votre backend, où vous le vérifiez avec le paquet @forge12interactive/silentshield-sdk-js. Les utilisateurs ne voient jamais d'énigme, et votre bundle reste léger car il n'y a aucun widget lourd à afficher.
Script client plus vérification serveur
Il n'y a aucun paquet web @silentshield/react distinct à installer — SilentShield fonctionne dans toute application React ou Next.js grâce au script client et à une vérification côté serveur. Vous ajoutez le script https://api.silentshield.io/client.js?k=YOUR_API_KEY, lisez le jeton dans votre composant et le confirmez auprès de https://api.silentshield.io/v1/verify en utilisant l'en-tête api-key depuis un route handler ou une route API.
Guide de configuration
Créez un compte et copiez votre clé API. Ajoutez le script client SilentShield à votre application et capturez le jeton lors de la soumission du formulaire. Installez @forge12interactive/silentshield-sdk-js sur votre serveur, créez le client avec votre clé API et appelez verify avec le jeton. Si le résultat est humain, traitez la requête ; sinon, rejetez-la.
Confidentialité et accessibilité par défaut
SilentShield ne stocke aucun cookie, n'effectue aucun suivi et ne collecte aucune donnée personnelle, de sorte que votre application reste conforme au RGPD. La vérification s'exécute par défaut sur une infrastructure exclusivement dans l'UE. La vérification invisible respecte la norme WCAG 2.1 AA, ce qui maintient vos formulaires utilisables pour les utilisateurs de clavier et de lecteur d'écran sans aucun défi visuel.
Intégrez React dès maintenant
Ajoutez le script, vérifiez avec @forge12interactive/silentshield-sdk-js — prêt en quelques minutes.