O SilentShield é uma alternativa a CAPTCHA invisível e compatível com o RGPD para aplicações React e Next.js. Você carrega um script de cliente leve, obtém um token e o verifica no servidor com o pacote @forge12interactive/silentshield-sdk-js e uma única chave de API. Não há cookies, nem rastreamento nem dados pessoais, e a hospedagem é, por predefinição, exclusivamente na UE.
CAPTCHA invisível para React & Next.js
Funciona com qualquer aplicação React ou Next.js através do leve script da SilentShield: obtenha um nonce ao enviar e verifique-o no seu backend com @forge12interactive/silentshield-sdk-js. Invisível e em conformidade com o RGPD.
Developer Experience
Exemplos de código
Incorporar o script de cliente
<!-- 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);
})();Componente 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>
);
}Verificação no 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 });
}Como o SilentShield funciona no React
O SilentShield carrega um pequeno script de cliente que executa uma verificação invisível enquanto o utilizador interage com o seu formulário. No envio, o seu componente React ou Next.js envia o token gerado para o seu backend, onde o verifica com o pacote @forge12interactive/silentshield-sdk-js. Os utilizadores nunca veem um enigma, e o seu bundle permanece leve porque não há nenhum widget pesado para renderizar.
Script de cliente mais verificação no servidor
Não há um pacote web @silentshield/react separado para instalar — o SilentShield funciona em qualquer aplicação React ou Next.js através do script de cliente e de uma verificação do lado do servidor. Você adiciona o script https://api.silentshield.io/client.js?k=YOUR_API_KEY, lê o token no seu componente e confirma-o em relação a https://api.silentshield.io/v1/verify utilizando o cabeçalho api-key a partir de um route handler ou de uma rota de API.
Guia de configuração
Crie uma conta e copie a sua chave de API. Adicione o script de cliente SilentShield à sua aplicação e capture o token quando o formulário for enviado. Instale o @forge12interactive/silentshield-sdk-js no seu servidor, crie o cliente com a sua chave de API e chame verify com o token. Se o resultado for humano, processe o pedido; caso contrário, rejeite-o.
Privacidade e acessibilidade por predefinição
O SilentShield não armazena cookies, não realiza rastreamento e não recolhe dados pessoais, pelo que a sua aplicação permanece compatível com o RGPD. A verificação é executada, por predefinição, em infraestrutura exclusivamente na UE. A verificação invisível cumpre a WCAG 2.1 AA, o que mantém os seus formulários utilizáveis para utilizadores de teclado e de leitores de ecrã sem qualquer desafio visual.
Integre com React agora
Adicione o script, verifique com @forge12interactive/silentshield-sdk-js — pronto em minutos.