SilentShield는 React 및 Next.js 앱을 위한 보이지 않는 GDPR 준수 CAPTCHA 대안입니다. 가벼운 클라이언트 스크립트를 로드하고 토큰을 얻은 다음, @forge12interactive/silentshield-sdk-js 패키지와 단일 API 키로 서버에서 검증합니다. 쿠키도 사이트 간 추적도 없으며, 호스팅은 기본적으로 EU에서 이루어집니다.
보이지 않는 CAPTCHA — React & Next.js
가벼운 SilentShield 스크립트로 모든 React 또는 Next.js 앱에서 작동합니다. 제출 시 nonce를 수집하고 백엔드에서 @forge12interactive/silentshield-sdk-js로 검증하세요. 보이지 않으며 GDPR을 준수합니다.
Developer Experience
코드 예제
클라이언트 스크립트 삽입
<!-- 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>
);
}백엔드 검증 (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 });
}React에서 SilentShield가 작동하는 방식
SilentShield는 작은 클라이언트 스크립트를 로드하여 사용자가 양식과 상호 작용하는 동안 보이지 않는 검사를 실행합니다. 제출 시 React 또는 Next.js 컴포넌트가 생성된 토큰을 백엔드로 보내면 거기서 @forge12interactive/silentshield-sdk-js 패키지로 검증합니다. 사용자는 퍼즐을 전혀 보지 않으며, 렌더링할 무거운 위젯이 없으므로 번들은 가볍게 유지됩니다.
클라이언트 스크립트와 서버 검증
설치할 별도의 @silentshield/react 웹 패키지는 없습니다. SilentShield는 클라이언트 스크립트와 서버 측 검증을 통해 모든 React 또는 Next.js 앱에서 작동합니다. 스크립트 https://api.silentshield.io/client.js?k=YOUR_API_KEY를 추가하고, 컴포넌트에서 토큰을 읽은 다음, route handler 또는 API 라우트에서 api-key 헤더를 사용하여 https://api.silentshield.io/v1/verify에 대해 확인합니다.
설정 안내
계정을 만들고 API 키를 복사합니다. SilentShield 클라이언트 스크립트를 앱에 추가하고 양식이 제출될 때 토큰을 캡처합니다. 서버에 @forge12interactive/silentshield-sdk-js를 설치하고 API 키로 클라이언트를 만든 다음 토큰으로 verify를 호출합니다. 결과가 사람이면 요청을 처리하고, 그렇지 않으면 거부합니다.
기본적으로 개인정보 보호와 접근성
SilentShield는 쿠키와 사이트 간 추적을 사용하지 않습니다. IP 주소는 검증에만 사용되며 평문으로 저장되지 않습니다. 따라서 앱을 GDPR에 맞춰 보호할 수 있습니다. 검증은 기본적으로 독일에 있는 당사 서버에서 실행됩니다. 보이지 않는 검사는 WCAG 2.1 AA를 충족하여 시각적 과제 없이 키보드 및 스크린 리더 사용자가 양식을 사용할 수 있도록 유지합니다.