SilentShield este o alternativă CAPTCHA invizibilă și conformă cu GDPR pentru aplicațiile React și Next.js. Încărcați un script de client ușor, obțineți un token și îl verificați pe server cu pachetul @forge12interactive/silentshield-sdk-js și o singură cheie API. Nu există cookie-uri, nici urmărire și nici date cu caracter personal, iar găzduirea este implicit doar în UE.
CAPTCHA invizibil pentru React & Next.js
Funcționează cu orice aplicație React sau Next.js prin scriptul ușor SilentShield: obțineți un nonce la trimitere și verificați-l în backend cu @forge12interactive/silentshield-sdk-js. Invizibil și conform GDPR.
Developer Experience
Exemple de cod
Încorporarea scriptului de 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);
})();Componentă 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>
);
}Verificare în 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 });
}Cum funcționează SilentShield în React
SilentShield încarcă un mic script de client care efectuează o verificare invizibilă în timp ce un utilizator interacționează cu formularul dvs. La trimitere, componenta dvs. React sau Next.js trimite tokenul generat către backendul dvs., unde îl verificați cu pachetul @forge12interactive/silentshield-sdk-js. Utilizatorii nu văd niciodată un puzzle, iar bundle-ul dvs. rămâne ușor deoarece nu există niciun widget greu de randat.
Script de client plus verificare pe server
Nu există un pachet web @silentshield/react separat de instalat — SilentShield funcționează în orice aplicație React sau Next.js prin scriptul de client și o verificare pe partea serverului. Adăugați scriptul https://api.silentshield.io/client.js?k=YOUR_API_KEY, citiți tokenul în componenta dvs. și îl confirmați față de https://api.silentshield.io/v1/verify folosind antetul api-key dintr-un route handler sau o rută API.
Ghid de configurare
Creați un cont și copiați cheia API. Adăugați scriptul de client SilentShield în aplicația dvs. și capturați tokenul când formularul este trimis. Instalați @forge12interactive/silentshield-sdk-js pe serverul dvs., creați clientul cu cheia API și apelați verify cu tokenul. Dacă rezultatul este uman, procesați cererea; în caz contrar, respingeți-o.
Confidențialitate și accesibilitate în mod implicit
SilentShield nu stochează cookie-uri, nu efectuează urmărire și nu colectează date cu caracter personal, astfel încât aplicația dvs. rămâne conformă cu GDPR. Verificarea rulează implicit pe infrastructură exclusiv în UE. Verificarea invizibilă respectă WCAG 2.1 AA, ceea ce menține formularele dvs. utilizabile pentru utilizatorii de tastatură și de cititoare de ecran, fără nicio provocare vizuală.
Integrați cu React acum
Adăugați scriptul, verificați cu @forge12interactive/silentshield-sdk-js — gata în câteva minute.