Добавь игру из маркетплейса
У контактной формы BananaSeed из предыдущего урока уже есть рабочий виджет. В этом последнем уроке мы заменяем простую галочку настоящей играбельной игрой, которую обязан пройти каждый посетитель.
Зачем заморачиваться, если галочка уже работает? Галочка это тихий минимум. Игра превращает неизбежный момент «докажи, что ты человек» в то, чем посетитель наслаждается, а не что терпит, и это та часть, что выстаивает против изощрённых злоумышленников. Сегодняшний ИИ может щёлкнуть галочку и решить сетки картинок, но настоящая игра это единственное испытание, которое он не может обмануть, потому что ни одна машина не играет так, как человек. 💪
Этот урок чуть посложнее, чем вставка виджета: ты выбираешь игру, устанавливаешь её на свой ключ сайта и включаешь ворота, которые её требуют. Награда в том, что игра становится той самой штукой, что стоит между ботом и твоей формой, а не украшением, которое можно проскочить. Токен-механика под капотом идентична, так что твой бэкенд вообще не меняется. Всё здесь работает на бесплатном тарифе.
Что у тебя будет в конце
- Игра из маркетплейса, установленная на твой ключ сайта.
- Эта игра, требуемая для проверки, так что голая галочка больше не проходит.
- Та же контактная форма, теперь охраняемая игрой, с неизменной серверной проверкой.
1. Выбери игру из маркетплейса
Маркетплейс это публичный каталог, из которого ты выбираешь. Открой его и полистай: фильтруй по категории или по тому, что игра поддерживает (касание, клавиатура, скринридеры, звук), чтобы подобрать игру под свою аудиторию. У каждой игры своя страница с превью и id вроде caputchin/games/leaf-memory.
Просмотр открыт, без очереди на одобрение: каждая игра в каталоге доступна для использования. Выбери одну и скопируй её id. Мы возьмём Leaf Memory (caputchin/games/leaf-memory) на остаток этого урока.
2. Установи игру на свой ключ сайта
Прежде чем игра сможет охранять ключ, ты устанавливаешь её на этот ключ. Установка велит Caputchin взять закреплённый, проверенный снимок игры, чтобы ровно та версия, в которую играют твои посетители, была той, которую Caputchin сможет перезапустить, когда позже проверяет результат.
В панели открой свою команду, открой свой ключ сайта и перейди на его страницу Игры. В панели Добавить игру найди игру в поле Игра из маркетплейса и выбери её из списка (или кликни Открыть).
Caputchin регистрирует игру, делает её снимок и высаживает тебя на страницу настроек игры. Игра теперь появляется в разделе Зарегистрированные игры обратно на странице Игры, готовая охранять ключ. Почти любая игра из маркетплейса готова, как только ты её регистрируешь, собственные всегда; если редкая игра показывает здесь значок Не воспроизводима, она не может ставить ворота, пока автор не выпустит воспроизводимую сборку.
Можно добавить больше одной игры. Добавь их на отдельный ключ сайта или добавь один раз на команду, чтобы разделить один и тот же набор по каждому ключу в ней.
У твоего ключа сайта теперь установлена и проверена игра. Дальше сделаем её обязательной. 🎉
3. Потребуй игру для проверки
Установка игры делает её доступной; она пока никого не заставляет в неё играть. Это делают ворота.
На своём ключе сайта открой его страницу Безопасность и включи Требовать игру для проверки. Отныне каждый посетитель этого ключа должен сыграть в одну из его установленных игр, чтобы пройти, и пройти голую галочку уже недостаточно. (Ты не можешь включить ворота, пока не установлена хотя бы одна игра, поэтому шаг 2 идёт первым.)
С включёнными воротами Caputchin выбирает, какую установленную игру получит каждый посетитель, и выдаёт её через одноразовый подписанный тикет. Посетитель, или бот, не может выбрать игру, пропустить её или поменять на полегче: выбор делается на стороне Caputchin, заново для каждой сессии. Именно это превращает игру из приятного дополнения в настоящую защиту.
Управляешь целым набором ключей? У команды есть своя страница Безопасность с Требовать игру на каждом ключе сайта, которая включает ворота сразу на каждом ключе в команде.
4. Замени элемент
Теперь страница. Игры рендерятся на другом элементе, <caputchin-game>. Импорт import "@caputchin/widget", который ты уже добавил, регистрирует и его, так что устанавливать нечего нового. Поскольку ключ теперь требует игру, только-галочный <caputchin-widget> на нём больше не проходит, так что эта замена это последний обязательный шаг.
В своей контактной форме поменяй одну строку:
// before
<caputchin-widget sitekey="cpt_pub_..." />
// after
<caputchin-game sitekey="cpt_pub_..." />Ты не передаёшь id игры. Поскольку ключ требует игру, Caputchin отдаёт одну из твоих установленных игр и выбирает её на каждый визит. Если предпочитаешь закрепить конкретную или ограничить ротацию подмножеством, перечисли их (каждая должна быть установлена на ключе):
// always Leaf Memory
<caputchin-game sitekey="cpt_pub_..." game="caputchin/games/leaf-memory" />
// a random one of these two per visit
<caputchin-game
sitekey="cpt_pub_..."
games="caputchin/games/leaf-memory,caputchin/games/dino-runner"
/>Назвать игру, которая не установлена на ключе, не загрузит её: виджет сообщит, что у ворот нет такой игры, вместо того чтобы пропустить посетителя.
5. Попробуй
Перезагрузи приложение. Галочка исчезла: посетитель теперь играет в игру в песочнице iframe. Когда он побеждает, виджет добавляет в форму то же скрытое поле caputchin-token, так что твоё чтение FormData и твоя серверная проверка /siteverify обе неизменны по сравнению с предыдущим уроком.
Открой статистику своего ключа сайта, и ты увидишь сессии, текущие через ту же воронку, что и раньше. Всё представление можно отфильтровать по одной игре, чтобы сравнить одну с другой.
Контактная форма BananaSeed теперь охраняется настоящей играбельной игрой, которую обязан пройти каждый посетитель, и каждая отправка по-прежнему проверяется на твоём сервере. Ты выкатил это. 🎉
Ты прошёл путь от пустого аккаунта до проверенной, охраняемой игрой формы.
Что только что произошло
| Шаг | Где | Результат |
|---|---|---|
| Выбрать игру | Маркетплейс | У тебя есть id игры вроде caputchin/games/leaf-memory. |
| Установить её на ключ | Панель, страница Игры ключа | Caputchin закрепляет проверенный снимок; игра появляется в разделе Зарегистрированные игры, готовая ставить ворота (собственные игры сразу). |
| Потребовать игру | Панель, страница Безопасность ключа | Каждый посетитель должен пройти установленную игру, и Caputchin выбирает какую. |
Заменить на <caputchin-game> | Твоя страница | Игра загружается в песочнице iframe и добавляет тот же caputchin-token, так что твой бэкенд неизменен. |
Что дальше
Вот области, к которым ты, скорее всего, потянешься отсюда:
- Настрой игры: задай язык, скин и сложность своих игр.
- Безопасность: игровые ворота, сложность proof-of-work, источники и остальная защита ключа.
- Статистика и сессии: читай воронку и сравнивай одну игру с другой.
- Управление аккаунтом: вход, токены доступа, оплата и места.
- Команды: организуй свои ключи сайта и, на платном тарифе, пригласи свою команду.