HATCHA

CAPTCHA доказывает, что вы человек. HATCHA доказывает, что вы нет.

Модальное окно HATCHA в действии

HATCHA (Hyperfast Agent Test for Computational Heuristic Assessment — сверхбыстрый агентный тест для вычислительной эвристической оценки) — это обратная CAPTCHA, которая ограничивает доступ задачами, тривиальными для ИИ-агентов, но мучительными для людей: умножение больших чисел, реверс строк, двоичное декодирование и т.д.

Проверка на стороне сервера — ответы никогда не попадают к клиенту. Токены с HMAC-подписью, без состояния, база данных не требуется.
5 встроенных типов задач — математика, реверс строк, подсчёт символов, сортировка, двоичное декодирование.
Расширяемость — регистрируйте собственные генераторы задач во время выполнения.
Настраиваемые темы — тёмная, светлая или автоматически через CSS-свойства.
Адаптеры фреймворков — Next.js App Router и Express middleware из коробки.

Быстрый старт (Next.js)

1. Установка

npm install @mondaycom/hatcha-react @mondaycom/hatcha-server

2. Добавление маршрута API

// 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;

3. Обёртка макета

// 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>
  );
}

4. Запуск проверки

"use client";
import { useHatcha } from "@mondaycom/hatcha-react";

function AgentModeButton() {
  const { requestVerification } = useHatcha();

  return (
    <button
      onClick={() =>
        requestVerification((token) => {
          console.log("Агент подтверждён!", token);
        })
      }
    >
      Войти в режим агента
    </button>
  );
}

5. Установка секрета

# .env.local
HATCHA_SECRET=ваш-случайный-секрет-здесь

Как это работает

Клиент                            Сервер
  │                                 │
  │  GET /api/hatcha/challenge      │
  │────────────────────────────────►│
  │                                 │  Генерация задачи
  │                                 │  Хэширование ответа
  │                                 │  HMAC-подпись { hash, срок }
  │  { challenge (без ответа), token }
  │◄────────────────────────────────│
  │                                 │
  │  Агент решает задачу            │
  │                                 │
  │  POST /api/hatcha/verify        │
  │  { answer, token }              │
  │────────────────────────────────►│
  │                                 │  Проверка HMAC-подписи
  │                                 │  Проверка срока
  │                                 │  Сравнение хэша ответа
  │  { success, verificationToken } │
  │◄────────────────────────────────│

Ответ никогда не попадает к клиенту. Подписанный токен непрозрачен и содержит только хэшированный ответ + срок. Проверка не имеет состояния — база данных не нужна.

Типы задач

Пользовательские задачи

import { registerChallenge } from "@mondaycom/hatcha-server";

registerChallenge({
  type: "hex",
  generate() {
    const n = Math.floor(Math.random() * 0xffffff);
    return {
      display: {
        type: "hex",
        icon: "0x",
        title: "Шестнадцатеричное декодирование",
        description: "Преобразуйте это шестнадцатеричное число в десятичное.",
        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>.

Express

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.

Лицензия

MIT

`math`	×	Умножение 5-значных чисел	30 с
`string`	↔	Реверс строки из 60–80 случайных символов	30 с
`count`	#	Подсчёт определённого символа в ~250 символах	30 с
`sort`	⇅	Сортировка 15 чисел, вернуть k-е наименьшее	30 с
`binary`	01	Декодирование двоичных октетов в ASCII	30 с

HATCHA

Популярное

HATCHA

Быстрый старт (Next.js)

1. Установка

2. Добавление маршрута API

3. Обёртка макета

4. Запуск проверки

5. Установка секрета

Как это работает

Типы задач

Пользовательские задачи

Настройка темы

Express

Пакеты

Разработка

Вклад

Лицензия