SilentShield yra nematoma, BDAR atitinkanti CAPTCHA alternatyva React ir Next.js programoms. Įkeliate lengvą kliento scenarijų, gaunate atpažinties žymą ir patikrinate ją serveryje naudodami paketą @forge12interactive/silentshield-sdk-js ir vieną API raktą. Nėra jokių slapukų, jokio sekimo ir jokių asmens duomenų, o priegloba pagal numatytuosius nustatymus vykdoma tik ES.
Nematoma CAPTCHA, skirta React & Next.js
Veikia su bet kuria React ar Next.js programa naudojant lengvą SilentShield skriptą: pateikimo metu gaukite nonce ir patvirtinkite jį serverio pusėje su @forge12interactive/silentshield-sdk-js. Nematoma ir atitinka BDAR.
Developer Experience
Kodo pavyzdžiai
Kliento skripto įterpimas
<!-- 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 komponentas
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>
);
}Serverio pusės patvirtinimas (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 });
}Kaip SilentShield veikia React aplinkoje
SilentShield įkelia mažą kliento scenarijų, kuris atlieka nematomą patikrą, kol naudotojas sąveikauja su jūsų forma. Pateikiant jūsų React arba Next.js komponentas siunčia sugeneruotą atpažinties žymą į jūsų vidinę sistemą, kur ją patikrinate paketu @forge12interactive/silentshield-sdk-js. Naudotojai niekada nemato galvosūkio, o jūsų paketas išlieka lengvas, nes nėra sunkaus valdiklio, kurį reikėtų atvaizduoti.
Kliento scenarijus ir serverio patikra
Nėra atskiro @silentshield/react žiniatinklio paketo, kurį reikėtų įdiegti — SilentShield veikia bet kurioje React arba Next.js programoje per kliento scenarijų ir serverio pusės patikrą. Pridedate scenarijų https://api.silentshield.io/client.js?k=YOUR_API_KEY, nuskaitote atpažinties žymą savo komponente ir patvirtinate ją adresu https://api.silentshield.io/v1/verify naudodami api-key antraštę iš route handler arba API maršruto.
Sąrankos vadovas
Sukurkite paskyrą ir nukopijuokite savo API raktą. Pridėkite SilentShield kliento scenarijų prie savo programos ir užfiksuokite atpažinties žymą, kai forma pateikiama. Įdiekite @forge12interactive/silentshield-sdk-js savo serveryje, sukurkite klientą su savo API raktu ir iškvieskite verify su atpažinties žyma. Jei rezultatas yra žmogus, apdorokite užklausą; priešingu atveju ją atmeskite.
Privatumas ir prieinamumas pagal numatytuosius nustatymus
SilentShield nesaugo slapukų, nevykdo sekimo ir nerenka asmens duomenų, todėl jūsų programa išlieka atitinkanti BDAR. Patikra pagal numatytuosius nustatymus vykdoma tik ES infrastruktūroje. Nematoma patikra atitinka WCAG 2.1 AA, todėl jūsų formos išlieka tinkamos naudoti klaviatūros ir ekrano skaitytuvo naudotojams be jokio vaizdinio iššūkio.
Integruokite su React dabar
Pridėkite skriptą, patvirtinkite su @forge12interactive/silentshield-sdk-js — paruošta per kelias minutes.