Добавь виджет на свой сайт

У тебя есть публичный ключ BananaSeed из предыдущего урока. Теперь мы поместим виджет на React-контактную форму, увидим, как панель подтверждает, что её прошёл настоящий посетитель, и затем добавим один серверный вызов, который превращает это в настоящую защиту.

Что у тебя будет в конце

• Виджет на твоей контактной форме, проверяющий посетителей в браузере.
• Твоя панель, показывающая эти проверки.
• Твой Node-бэкенд, отбрасывающий любую отправку без валидного токена.

1. Добавь виджет в свою React-форму

Установи пакет. Он регистрирует элемент <caputchin-widget> (и элемент <caputchin-game> для следующего урока):

npm install @caputchin/widget

Импортируй его один раз при старте, например в точке входа приложения (main.jsx):

import "@caputchin/widget";

Теперь помести виджет в контактную форму BananaSeed. Когда галочка пройдена, виджет добавляет в форму скрытое поле caputchin-token, так что ты читаешь его при отправке ровно как свои собственные поля. Замени cpt_pub_... своим публичным ключом:

export function ContactForm() {
  async function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    await fetch("/api/contact", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        email: data.get("email"),
        message: data.get("message"),
        token: data.get("caputchin-token"),
      }),
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <caputchin-widget sitekey="cpt_pub_..." />
      <button type="submit">Send</button>
    </form>
  );
}

На чистой HTML-странице без шага сборки или внутри нативного мобильного приложения? Смотри интеграцию через тег скрипта (CDN) и руководство по мобильным приложениям.

2. Посмотри, как идёт проверка

Запусти приложение и открой контактную форму. Галочка Caputchin появляется и завершается сама, без всякого клика. Тебе даже не нужно пока отправлять форму: это уже настоящая проверка, и она дошла до Caputchin.

3. Подтверди это в своей панели

Вернувшись в панель, открой свою команду и зайди в свой ключ сайта. Его статистика показывает воронку: Сессии начаты, Пройдено в браузере, Проверено на сервере и Угрозы заблокированы. Обнови страницу; Сессии начаты и Пройдено в браузере теперь обе показывают как минимум 1. Это твой визит: виджет загрузился (начато), и испытание было решено в браузере (пройдено в браузере), вообще без участия бэкенда.

Проверено на сервере всё ещё 0, потому что ничего на твоём сервере пока не проверяло токен. Этот разрыв и есть следующий шаг.

Твой виджет работает, и панель уже логирует настоящие проверки, до того как ты написал хоть строку кода бэкенда. 🎉

4. Проверь токен на своём бэкенде

«Пройдено в браузере» означает, что посетитель прошёл испытание, но твоя форма не защищена, пока твой сервер не подтвердит токен. Бот может полностью проигнорировать виджет и слать POST прямо на твой эндпоинт. Поэтому твой бэкенд проверяет каждый токен через Caputchin, прежде чем довериться запросу. Твой секрет (cpt_sec_...) живёт в переменной окружения, никогда в браузере:

import express from "express";

const app = express();
app.use(express.json());

app.post("/api/contact", async (req, res) => {
  const { email, message, token } = req.body;

  const verdict = await fetch("https://caputchin.com/api/v1/siteverify", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({
      secret: process.env.CAPUTCHIN_SECRET,
      response: token,
    }),
  }).then((r) => r.json());

  if (!verdict.success) {
    return res.status(400).json({ error: "Could not verify you are human." });
  }

  // Verified. Handle the real message: store it, email it, whatever you do.
  res.json({ ok: true });
});

app.listen(3001);

Эта проверка verdict.success и есть суть: бот, шлющий POST прямо на /api/contact, не несёт токена, success возвращается false, и сообщение отбрасывается ещё до того, как ты его коснёшься.

Нет бэкенда? Не беда. Включи размещённую проверку, и Caputchin выполнит эту проверку за тебя, пересылая только проверенные отправки на вебхук или в твой почтовый ящик.

5. Подтверди серверную проверку

Отправь контактную форму ещё раз, теперь когда твой эндпоинт проверяет. Вернись к статистике своего ключа сайта и обнови: Проверено на сервере теперь тоже показывает как минимум 1, рядом с «Начато» и «Пройдено в браузере». Вся воронка учтена, от браузера до сервера.

Чтобы прочитать эту воронку с другой стороны (что разрывы между счётчиками говорят тебе об отвале посетителей и ошибках интеграции), смотри статистику и сессии.

Твоя контактная форма теперь по-настоящему защищена: каждая отправка проверяется на твоём сервере, а боты без токена разворачиваются. 🎉

Что только что произошло

Дальше

Галочка работает. Теперь самое весёлое: поменяй её на настоящую играбельную игру, без изменения твоего бэкенда.

Переходи к Добавь игру из маркетплейса.