Αόρατο CAPTCHA για React & Next.js

Πακέτο NPM με υποστήριξη TypeScript, React Hooks API και συμβατότητα SSR Next.js. Μόνο 3KB gzipped.

Εμπειρία Προγραμματιστή

Εγγενές TypeScript – πλήρης ασφάλεια τύπων

React Hooks API – Hook useSilentShield()

Συμβατό με Next.js SSR – λειτουργεί με App Router

Μέγεθος bundle: μόνο 3KB gzipped

Tree-shakeable – μόνο ό,τι χρειάζεστε

Μηδέν εξαρτήσεις – χωρίς περιττό κώδικα

Παραδείγματα κώδικα

Εγκατάσταση

npm install @silentshield/react

React Hook API

import { useSilentShield } from '@silentshield/react';

function ContactForm() {
  const { verify, isVerifying } = useSilentShield({
    siteKey: 'YOUR_SITE_KEY',
  });

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const token = await verify();

    // Send token to backend
    await fetch('/api/contact', {
      method: 'POST',
      body: JSON.stringify({ ...formData, token }),
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* Your form fields */}
      <button disabled={isVerifying}>
        Submit
      </button>
    </form>
  );
}

Next.js App Router

// app/api/contact/route.ts
import { verifySilentShield } from '@silentshield/node';

export async function POST(req: Request) {
  const { token, ...data } = await req.json();

  const result = await verifySilentShield({
    secret: process.env.SILENTSHIELD_SECRET!,
    token,
  });

  if (!result.success) {
    return Response.json(
      { error: 'Bot detected' },
      { status: 403 }
    );
  }

  // Process form data...
}

Μοτίβο Provider

import { SilentShieldProvider } from '@silentshield/react';

function App() {
  return (
    <SilentShieldProvider siteKey="YOUR_SITE_KEY">
      <MyApp />
    </SilentShieldProvider>
  );
}

Ενσωματώστε με React τώρα

npm install @silentshield/react – έτοιμο σε 5 λεπτά.

Δοκιμάστε δωρεάν Δείτε τις τιμές