Dokümantasyon

trCAPTCHA'yı kendi Next.js projenize nasıl entegre edeceğinizi adım adım öğrenin. Tüm kodlar TypeScript strict kurallarına uygundur.

1. Kurulum

Gerekli bağımlılıkları yükleyin:

npm install border-beam lucide-react
# class-variance-authority ve tailwind-merge projede zaten var

2. Bileşeni kullanma

Formunuzun içine TrCaptcha bileşenini ekleyin:

<TrCaptcha
  siteName="Sitem"
  accentColor="#47c87c"
  defaultTheme="dark"
  defaultDifficulty="medium"
  onVerify={(ok, passToken) => {
    // ok=false ise buton pasif kalmalı
    // passToken'ı kendi sunucuna gönder ve doğrula
  }}
/>

3. Ortam değişkenleri

Doğru cevapları imzalayan iki sır gerekir (32+ karakter):

CAPTCHA_SECRET=   # token + geçiş bileti imzası
IMAGE_SECRET=     # görsel URL'leri için HMAC

4. Sunucu doğrulaması

Güvenlik için doğrulamayı her zaman kendi sunucunuzda yapın:

// app/api/verify/route.ts
import { verifyPassToken } from "@/lib/captcha/pass-token";

export async function POST(req: Request) {
  const { passToken } = await req.json();
  const claims = verifyPassToken(passToken ?? "");
  if (!claims) return Response.json({ ok: false }, { status: 400 });
  return Response.json({ ok: true });
}

Props referansı

Prop	Tip	Varsayılan	Açıklama
siteName	string	"trCAPTCHA"	Sağ altta görünen marka adı
logoUrl	string	—	Sağ üstteki logo; yoksa kalkan ikonu
theme	"dark" \| "light" \| "glass"	"dark"	Panel görünümü (cam = Liquid Glass)
beamColor	"colorful" \| "ocean" \| "sunset" \| "mono"	"colorful"	BorderBeam ışık rengi
beamSize	"sm" \| "md" \| "lg"	"md"	BorderBeam boyutu
accentColor	string	"#47c87c"	Buton, tik ve başlık şeridi rengi
defaultDifficulty	"easy" \| "medium" \| "hard"	"medium"	Açılıştaki zorluk seviyesi
showDifficultySelector	boolean	true	Kolay / Orta / Zor seçici
showThemeSelector	boolean	false	Light / Dark / Liquid seçici
onVerify	(ok, passToken?) => void	—	Doğrulama sonucu + sunucu imzalı bilet

Zorluk ve görev tipleri

easy — klasik 3x3 ızgara, tek doğru cevap.
medium — veri setindeki etiketlere dayalı görev; 2-3 doğru cevap.
hard — yapay zeka temalı oyunlar: halüsinasyon avı, prompt uzmanı, latent space.

Canlı demoyu dene →