Το SilentShield είναι μια αόρατη, συμβατή με τον GDPR εναλλακτική λύση CAPTCHA για εφαρμογές React και Next.js. Φορτώνετε ένα ελαφρύ σενάριο πελάτη, λαμβάνετε ένα token και το επαληθεύετε στον διακομιστή με το πακέτο @forge12interactive/silentshield-sdk-js και ένα μόνο κλειδί API. Δεν υπάρχουν cookies, ούτε παρακολούθηση ούτε προσωπικά δεδομένα, και η φιλοξενία γίνεται εξ ορισμού αποκλειστικά στην ΕΕ.
Αόρατο CAPTCHA για React & Next.js
Λειτουργεί με οποιαδήποτε εφαρμογή React ή Next.js μέσω του ελαφριού script της SilentShield: συλλέξτε ένα nonce κατά την υποβολή και επαληθεύστε το στο backend σας με το @forge12interactive/silentshield-sdk-js. Αόρατο και συμβατό με τον GDPR.
Developer Experience
Παραδείγματα κώδικα
Ενσωμάτωση του script πελάτη
<!-- 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
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 (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 });
}Πώς λειτουργεί το SilentShield στο React
Το SilentShield φορτώνει ένα μικρό σενάριο πελάτη που εκτελεί έναν αόρατο έλεγχο ενώ ο χρήστης αλληλεπιδρά με τη φόρμα σας. Κατά την υποβολή, το στοιχείο React ή Next.js σας στέλνει το παραγόμενο token στο backend σας, όπου το επαληθεύετε με το πακέτο @forge12interactive/silentshield-sdk-js. Οι χρήστες δεν βλέπουν ποτέ έναν γρίφο, και το bundle σας παραμένει ελαφρύ επειδή δεν υπάρχει βαρύ widget προς απόδοση.
Σενάριο πελάτη συν επαλήθευση διακομιστή
Δεν υπάρχει ξεχωριστό πακέτο web @silentshield/react προς εγκατάσταση — το SilentShield λειτουργεί σε οποιαδήποτε εφαρμογή React ή Next.js μέσω του σεναρίου πελάτη και μιας επαλήθευσης από την πλευρά του διακομιστή. Προσθέτετε το σενάριο https://api.silentshield.io/client.js?k=YOUR_API_KEY, διαβάζετε το token στο στοιχείο σας και το επιβεβαιώνετε έναντι του https://api.silentshield.io/v1/verify χρησιμοποιώντας την κεφαλίδα api-key από έναν route handler ή μια διαδρομή API.
Οδηγός εγκατάστασης
Δημιουργήστε έναν λογαριασμό και αντιγράψτε το κλειδί API σας. Προσθέστε το σενάριο πελάτη SilentShield στην εφαρμογή σας και συλλάβετε το token όταν υποβάλλεται η φόρμα. Εγκαταστήστε το @forge12interactive/silentshield-sdk-js στον διακομιστή σας, δημιουργήστε τον πελάτη με το κλειδί API σας και καλέστε το verify με το token. Εάν το αποτέλεσμα είναι άνθρωπος, επεξεργαστείτε το αίτημα· διαφορετικά απορρίψτε το.
Απόρρητο και προσβασιμότητα εξ ορισμού
Το SilentShield δεν αποθηκεύει cookies, δεν εκτελεί παρακολούθηση και δεν συλλέγει προσωπικά δεδομένα, οπότε η εφαρμογή σας παραμένει συμβατή με τον GDPR. Η επαλήθευση εκτελείται εξ ορισμού σε υποδομή αποκλειστικά στην ΕΕ. Ο αόρατος έλεγχος πληροί το WCAG 2.1 AA, το οποίο διατηρεί τις φόρμες σας χρήσιμες για χρήστες πληκτρολογίου και αναγνωστών οθόνης χωρίς καμία οπτική πρόκληση.
Ενσωματώστε το React τώρα
Προσθέστε το script, επαληθεύστε με το @forge12interactive/silentshield-sdk-js — έτοιμο σε λίγα λεπτά.