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는 쿠키를 저장하지 않고 추적을 수행하지 않으며 개인 데이터를 수집하지 않으므로 앱은 GDPR을 준수한 상태로 유지됩니다. 검증은 기본적으로 EU 내 전용 인프라에서 실행됩니다. 보이지 않는 검사는 WCAG 2.1 AA를 충족하여 시각적 과제 없이 키보드 및 스크린 리더 사용자가 양식을 사용할 수 있도록 유지합니다.