SilentShield ir neredzama, VDAR atbilstoša CAPTCHA alternatīva React un Next.js lietotnēm. Jūs ielādējat vieglu klienta skriptu, iegūstat marķieri un pārbaudāt to serverī, izmantojot pakotni @forge12interactive/silentshield-sdk-js un vienu API atslēgu. Nav sīkdatņu, izsekošanas vai personas datu, un mitināšana pēc noklusējuma notiek tikai ES.
Neredzams CAPTCHA — React & Next.js
Darbojas ar jebkuru React vai Next.js lietotni, izmantojot vieglo SilentShield skriptu: iesniegšanas brīdī iegūstiet nonce un pārbaudiet to aizmugursistēmā ar @forge12interactive/silentshield-sdk-js. Neredzams un atbilst GDPR.
Developer Experience
Koda piemēri
Klienta skripta iegulšana
<!-- 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 komponente
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>
);
}Aizmugursistēmas pārbaude (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 });
}Kā SilentShield darbojas React vidē
SilentShield ielādē mazu klienta skriptu, kas veic neredzamu pārbaudi, kamēr lietotājs mijiedarbojas ar jūsu veidlapu. Iesniedzot jūsu React vai Next.js komponents nosūta ģenerēto marķieri uz jūsu aizmuguri, kur jūs to pārbaudāt ar pakotni @forge12interactive/silentshield-sdk-js. Lietotāji nekad neredz mīklu, un jūsu pakotne paliek viegla, jo nav smaga logrīka, ko atveidot.
Klienta skripts plus servera pārbaude
Nav atsevišķas @silentshield/react tīmekļa pakotnes, ko instalēt — SilentShield darbojas jebkurā React vai Next.js lietotnē, izmantojot klienta skriptu un servera puses pārbaudi. Jūs pievienojat skriptu https://api.silentshield.io/client.js?k=YOUR_API_KEY, nolasāt marķieri savā komponentē un apstiprināt to attiecībā pret https://api.silentshield.io/v1/verify, izmantojot api-key galveni no route handler vai API maršruta.
Iestatīšanas ceļvedis
Izveidojiet kontu un nokopējiet savu API atslēgu. Pievienojiet SilentShield klienta skriptu savai lietotnei un tveriet marķieri, kad veidlapa tiek iesniegta. Instalējiet @forge12interactive/silentshield-sdk-js savā serverī, izveidojiet klientu ar savu API atslēgu un izsauciet verify ar marķieri. Ja rezultāts ir cilvēks, apstrādājiet pieprasījumu; pretējā gadījumā noraidiet to.
Privātums un pieejamība pēc noklusējuma
SilentShield neuzglabā sīkdatnes, neveic izsekošanu un nevāc personas datus, tāpēc jūsu lietotne paliek atbilstoša VDAR. Pārbaude pēc noklusējuma darbojas tikai ES infrastruktūrā. Neredzamā pārbaude atbilst WCAG 2.1 AA, kas saglabā jūsu veidlapas lietojamas tastatūras un ekrāna lasītāju lietotājiem bez jebkāda vizuāla izaicinājuma.
Integrējiet ar React tagad
Pievienojiet skriptu, pārbaudiet ar @forge12interactive/silentshield-sdk-js — gatavs dažās minūtēs.