mondaycom/hatchaتُثبت CAPTCHA أنّك إنسان. وتُثبت HATCHA أنّك لست كذلك.
CAPTCHA تثبت أنك إنسان. HATCHA تثبت أنك لست كذلك.
HATCHA (Hyperfast Agent Test for Computational Heuristic Assessment) هي CAPTCHA معكوسة تجعل الوصول مشروطًا بتحديات تافهة للوكلاء الاصطناعيين ولكنها مرهقة للبشر — ضرب أعداد كبيرة، عكس سلاسل نصية، فك ترميز ثنائي، والمزيد.
npm install @mondaycom/hatcha-react @mondaycom/hatcha-server
// app/api/hatcha/[...hatcha]/route.ts
import { createHatchaHandler } from "@mondaycom/hatcha-server/nextjs";
const handler = createHatchaHandler({
secret: process.env.HATCHA_SECRET!,
});
export const GET = handler;
export const POST = handler;
// app/layout.tsx
import { HatchaProvider } from "@mondaycom/hatcha-react";
import "@mondaycom/hatcha-react/styles.css";
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<HatchaProvider>{children}</HatchaProvider>
</body>
</html>
);
}
"use client";
import { useHatcha } from "@mondaycom/hatcha-react";
function AgentModeButton() {
const { requestVerification } = useHatcha();
return (
<button
onClick={() =>
requestVerification((token) => {
console.log("Agent verified!", token);
})
}
>
Enter Agent Mode
</button>
);
}
# .env.local
HATCHA_SECRET=your-random-secret-here
Client Server
│ │
│ GET /api/hatcha/challenge │
│────────────────────────────────►│
│ │ Generate challenge
│ │ Hash answer
│ │ HMAC-sign { hash, expiry }
│ { challenge (no answer), token }
│◄────────────────────────────────│
│ │
│ Agent solves the challenge │
│ │
│ POST /api/hatcha/verify │
│ { answer, token } │
│────────────────────────────────►│
│ │ Verify HMAC signature
│ │ Check expiry
│ │ Compare answer hash
│ { success, verificationToken } │
│◄────────────────────────────────│
الإجابة لا تصل أبدًا إلى العميل. الرمز الموقّع معتم ولا يحتوي إلا على إجابة مجزّأة (hash) وتاريخ انتهاء. التحقق بلا حالة — لا حاجة إلى قاعدة بيانات.
import { registerChallenge } from "@mondaycom/hatcha-server";
registerChallenge({
type: "hex",
generate() {
const n = Math.floor(Math.random() * 0xffffff);
return {
display: {
type: "hex",
icon: "0x",
title: "Hex Decode",
description: "Convert this hex number to decimal.",
prompt: `0x${n.toString(16).toUpperCase()}`,
timeLimit: 30,
answer: String(n),
},
answer: String(n),
};
},
});
تستخدم HATCHA خصائص CSS مخصصة بنطاق --hatcha-*. يمكنك تجاوزها على أي عنصر أب:
[data-hatcha-theme] {
--hatcha-accent: #3b82f6;
--hatcha-accent-light: #60a5fa;
--hatcha-bg: #060b18;
--hatcha-fg: #e4eaf6;
--hatcha-success: #22c55e;
--hatcha-danger: #ef4444;
}
مرّر theme="dark" أو theme="light" أو theme="auto" إلى <HatchaProvider> أو <Hatcha>.
import express from "express";
import { hatchaRouter } from "@mondaycom/hatcha-server/express";
const app = express();
app.use(express.json());
app.use("/api/hatcha", hatchaRouter({ secret: process.env.HATCHA_SECRET! }));
app.listen(3000);
| الحزمة | الوصف |
|---|---|
@mondaycom/hatcha-core |
git clone https://github.com/mondaycom/HATCHA.git
cd HATCHA
pnpm install
pnpm build
cd examples/nextjs-app
pnpm dev
المساهمات مرحّب بها! راجع CONTRIBUTING.md لمعرفة تعليمات الإعداد والإرشادات.
| النوع | الأيقونة | ما يفعله | الحد الزمني |
|---|
math | × | ضرب عددين من 5 أرقام | 30 ثانية |
string | ↔ | عكس سلسلة نصية عشوائية من 60–80 حرفًا | 30 ثانية |
count | # | عدّ حرفًا معيّنًا في ~250 حرفًا | 30 ثانية |
sort | ⇅ | فرز 15 رقمًا وإرجاع أصغر رقم في المرتبة k | 30 ثانية |
binary | 01 | فك ترميز الثُمانيات الثنائية إلى ASCII | 30 ثانية |
| توليد التحديات والتحقق التشفيري |
@mondaycom/hatcha-react | مكوّن React والمزوّد والأنماط |
@mondaycom/hatcha-server | معالجات خادم Next.js وExpress |