A SilentShield egy láthatatlan, GDPR-kompatibilis CAPTCHA-alternatíva React és Next.js alkalmazásokhoz. Betölt egy könnyű kliensszkriptet, tokent kap, és a szerveren ellenőrzi azt a @forge12interactive/silentshield-sdk-js csomaggal és egyetlen API-kulccsal. Nincsenek sütik, nincs nyomon követés és nincsenek személyes adatok, a tárhely pedig alapértelmezés szerint kizárólag az EU-ban van.
Láthatatlan CAPTCHA ehhez: React & Next.js
Bármely React vagy Next.js alkalmazással működik a könnyűsúlyú SilentShield szkript segítségével: küldéskor lekér egy nonce-ot, és a backenden a @forge12interactive/silentshield-sdk-js segítségével ellenőrzi. Láthatatlan és GDPR-kompatibilis.
Developer Experience
Kódpéldák
A kliensszkript beágyazása
<!-- 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);
})();React komponens
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>
);
}Backend-ellenőrzés (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 });
}Hogyan működik a SilentShield a Reactben
A SilentShield betölt egy kis kliensszkriptet, amely láthatatlan ellenőrzést végez, miközben a felhasználó az űrlappal dolgozik. Beküldéskor a React vagy Next.js komponensed elküldi a generált tokent a háttérrendszeredhez, ahol a @forge12interactive/silentshield-sdk-js csomaggal ellenőrzöd. A felhasználók soha nem látnak rejtvényt, és a bundle könnyű marad, mert nincs megjelenítendő nehéz widget.
Kliensszkript és szerveroldali ellenőrzés
Nincs külön @silentshield/react webes csomag, amelyet telepíteni kellene — a SilentShield bármely React vagy Next.js alkalmazásban működik a kliensszkripten és egy szerveroldali ellenőrzésen keresztül. Hozzáadod a https://api.silentshield.io/client.js?k=YOUR_API_KEY szkriptet, kiolvasod a tokent a komponensedben, és megerősíted a https://api.silentshield.io/v1/verify címmel szemben az api-key fejléc használatával egy route handlerből vagy API útvonalból.
Beállítási útmutató
Hozz létre egy fiókot, és másold ki az API-kulcsodat. Add hozzá a SilentShield kliensszkriptet az alkalmazásodhoz, és rögzítsd a tokent az űrlap beküldésekor. Telepítsd a @forge12interactive/silentshield-sdk-js csomagot a szervereden, hozd létre a klienst az API-kulcsoddal, és hívd meg a verify függvényt a tokennel. Ha az eredmény ember, dolgozd fel a kérést; egyébként utasítsd el.
Adatvédelem és akadálymentesség alapértelmezés szerint
A SilentShield nem tárol sütiket, nem végez nyomon követést és nem gyűjt személyes adatokat, így az alkalmazásod GDPR-kompatibilis marad. Az ellenőrzés alapértelmezés szerint kizárólag EU-s infrastruktúrán fut. A láthatatlan ellenőrzés megfelel a WCAG 2.1 AA szabványnak, ami az űrlapjaidat használhatóvá teszi a billentyűzetet és képernyőolvasót használók számára bármilyen vizuális kihívás nélkül.
Integrálja most a Reacttel
Adja hozzá a szkriptet, ellenőrizze a @forge12interactive/silentshield-sdk-js segítségével — percek alatt kész.