SilentShield on nähtamatu, GDPR-iga kooskõlas olev CAPTCHA alternatiiv React- ja Next.js-rakendustele. Laadite kerge kliendiskripti, saate märgise ja kontrollite seda serveris paketiga @forge12interactive/silentshield-sdk-js ja ühe API võtmega. Küpsiseid, jälgimist ega isikuandmeid ei ole ning majutus toimub vaikimisi ainult ELis.
Nähtamatu CAPTCHA — React & Next.js
Töötab iga React või Next.js rakendusega kerge SilentShieldi skripti abil: hankige esitamisel nonce ja kontrollige seda taustsüsteemis @forge12interactive/silentshield-sdk-js abil. Nähtamatu ja GDPR-iga vastavuses.
Developer Experience
Koodinäited
Kliendiskripti manustamine
<!-- 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 komponent
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>
);
}Taustsüsteemi kontroll (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 });
}Kuidas SilentShield Reactis töötab
SilentShield laadib väikese kliendiskripti, mis teostab nähtamatut kontrolli, kui kasutaja teie vormiga suhtleb. Esitamisel saadab teie React- või Next.js-komponent loodud märgise teie taustaprogrammi, kus te kontrollite seda paketiga @forge12interactive/silentshield-sdk-js. Kasutajad ei näe kunagi mõistatust ja teie bundle jääb kergeks, sest raskeid vidinaid ei ole vaja renderdada.
Kliendiskript pluss serveripoolne kontroll
Eraldi @silentshield/react veebipaketti ei ole vaja paigaldada — SilentShield töötab igas React- või Next.js-rakenduses kliendiskripti ja serveripoolse kontrolli kaudu. Lisate skripti https://api.silentshield.io/client.js?k=YOUR_API_KEY, loete märgise oma komponendis ja kinnitate selle aadressi https://api.silentshield.io/v1/verify vastu, kasutades api-key päist route handlerist või API marsruudist.
Seadistamise juhend
Looge konto ja kopeerige oma API võti. Lisage SilentShieldi kliendiskript oma rakendusse ja jäädvustage märgis, kui vorm esitatakse. Paigaldage @forge12interactive/silentshield-sdk-js oma serverisse, looge klient oma API võtmega ja kutsuge verify koos märgisega. Kui tulemus on inimene, töödelge päringut; vastasel juhul lükake see tagasi.
Privaatsus ja ligipääsetavus vaikimisi
SilentShield ei salvesta küpsiseid, ei teosta jälgimist ega kogu isikuandmeid, seega jääb teie rakendus GDPR-iga kooskõlla. Kontroll toimub vaikimisi ainult ELi infrastruktuuris. Nähtamatu kontroll vastab standardile WCAG 2.1 AA, mis hoiab teie vormid kasutatavana klaviatuuri- ja ekraanilugeja kasutajatele ilma ühegi visuaalse väljakutseta.
Integreerige Reactiga kohe
Lisage skript, kontrollige @forge12interactive/silentshield-sdk-js abil — valmis mõne minutiga.