Создай аккаунт и первый ключ сайта

Это первый из трёх коротких уроков. Вместе они проведут тебя от пустого аккаунта до настоящего игрового испытания, охраняющего живую форму.

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

Вот как Caputchin это делает. Когда кто-то открывает твою контактную форму, Caputchin даёт ему быстрое испытание в браузере (простую галочку или короткую игру). Кто его проходит, получает одноразовый токен, который страница отправляет вместе с отправкой. Затем твой сервер проверяет этот токен через Caputchin, прежде чем довериться запросу. Бот, который шлёт POST прямо на твой эндпоинт, никогда не проходил испытание, значит, у него нет валидного токена, и твой сервер его разворачивает.

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

Сначала BananaSeed нужны аккаунт и ключ сайта. Около двух минут, без кредитной карты, пока ничего устанавливать не надо.

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

• Аккаунт Caputchin.
• Один ключ сайта, который на самом деле является парой значений:
  • публичный ключ (cpt_pub_...), который идёт в твою страницу,
  • секрет (cpt_sec_...), который остаётся на твоём сервере.

1. Войди (это заодно создаёт твой аккаунт)

Перейди на caputchin.com/login. Отдельного шага регистрации нет: твой первый вход с почтой и создаёт аккаунт. Выбери, что тебе удобнее:

• Письмо со ссылкой для входа, затем кликни ссылку в письме, или
• Продолжить через GitHub, или
• Продолжить через Google.

Мы всегда читаем только твой подтверждённый адрес почты.

Как только ты внутри, обрати внимание, что адресная строка показывает /app/troops. Caputchin сразу высаживает тебя в твои команды.

2. Открой свою Личную команду

Прежде чем создавать ключ сайта, полезно знать, где он живёт. Почти всё в Caputchin сидит внутри команды. Команда это рабочее пространство, и именно она владеет твоими ключами сайта, настройкой игр, которую эти ключи разделяют, и (на платных тарифах) товарищами по команде, которых ты приглашаешь помогать с управлением. Caputchin намеренно построен вокруг команд: ключ сайта всегда принадлежит команде, а не напрямую твоему аккаунту, и именно это позже позволяет целой команде управлять одними и теми же ключами, не деля один логин. Оплата и места сидят на уровне аккаунта, над твоими командами, а не внутри какой-то одной из них.

Каждый аккаунт начинается с одной команды по имени Personal, состоящей только из тебя. Больше для этого руководства ничего не нужно. Когда перерастёшь её, создашь общие команды и пригласишь участников, но ничего ниже не изменится.

Кликни Personal, чтобы открыть её. Команда открывается сразу на своих Ключах сайта, так что туда ты и попадаешь. Обрати внимание на адресную строку: /app/troops/<id>/site-keys. Ключ, который ты вот-вот создашь, вложен под команду, это ровно та принадлежность, которую мы только что описали.

3. Создай свой первый ключ сайта

Кликни Создать ключ сайта, дай ему имя вроде My site и кликни Создать. Больше имени он не просит.

Caputchin показывает тебе два значения:

Обрати внимание на баннер: «Скопируй секрет сейчас. Мы больше его не покажем.» Скопируй секрет и держи его где-то, откуда твой сервер сможет его прочитать (переменная окружения, твой менеджер секретов). Публичный ключ всегда можно снова увидеть на странице Интеграция ключа, но секрет показывается ровно один раз. Если потеряешь его, ты его обновляешь, а не восстанавливаешь.

У новёхонького ключа пока нет ограничения по источнику, и именно это даёт твоей тестовой странице работать локально в следующем уроке. Подробнее о настройках ключа в Ключи сайта.

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

У тебя есть аккаунт и твой первый ключ сайта, фундамент, на котором строится всё остальное. Молодец. 🎉

Дальше

Ключи у тебя есть. Пора поместить виджет на страницу и увидеть, как происходит настоящая проверка.

Переходи к Добавь виджет на свой сайт.