Añade un juego del marketplace

El formulario de contacto de BananaSeed ya tiene un widget que funciona de la lección anterior. En esta última lección reemplazamos la checkbox simple por un juego real y jugable que todo visitante tiene que superar.

¿Por qué molestarse, si la checkbox ya funciona? La checkbox es el mínimo silencioso. Un juego convierte el inevitable momento de "demuestra que eres humano" en algo que el visitante disfruta en vez de aguantar, y es la parte que aguanta frente a atacantes sofisticados. La IA de hoy puede marcar una checkbox y resolver rejillas de imágenes, pero un juego real es el único reto que no puede hacer trampa, porque ninguna máquina juega como lo hace un humano. 💪

Esta lección es un poco más entretenida de lo que fue soltar el widget: eliges un juego, lo instalas en tu clave de sitio y activas el gate que lo hace obligatorio. La recompensa es que el juego se convierte en lo que de verdad se interpone entre un bot y tu formulario, no en una decoración que puedas saltarte. La mecánica de tokens de debajo es idéntica, así que tu backend no cambia en absoluto. Todo aquí funciona en el plan gratuito.

Lo que tendrás al final

• Un juego del marketplace instalado en tu clave de sitio.
• Ese juego como obligatorio para verificar, de modo que una checkbox a secas ya no pueda pasar.
• El mismo formulario de contacto, ahora protegido por el juego, con tu comprobación de backend sin cambios.

1. Elige un juego del marketplace

El marketplace es el catálogo público del que eliges. Ábrelo y explora: filtra por categoría, o por lo que un juego admite (táctil, teclado, lectores de pantalla, sonido), para que puedas casar un juego con tu público. Cada juego tiene su propia página con una vista previa y un id como caputchin/games/leaf-memory.

Explorar es abierto, sin cola de aprobación: cada juego del catálogo está disponible para usar. Elige uno y copia su id. Usaremos Leaf Memory (caputchin/games/leaf-memory) para el resto de esta lección.

2. Instala el juego en tu clave de sitio

Antes de que un juego pueda proteger una clave, lo instalas en esa clave. Instalar le dice a Caputchin que tome una instantánea fijada y verificada del juego, de modo que la versión exacta que juegan tus visitantes sea la que Caputchin puede volver a ejecutar cuando comprueba un resultado más tarde.

En el dashboard, abre tu equipo, abre tu clave de sitio y ve a su página de Juegos. En el panel Añadir un juego, busca el juego en la caja Juego del marketplace y selecciónalo de la lista (o haz clic en Abrir).

Caputchin registra el juego, toma su instantánea y te deja en la página de ajustes del juego. El juego aparece ahora bajo Juegos registrados de vuelta en la página de Juegos, listo para proteger la clave. Casi todo juego del marketplace está listo en cuanto lo registras, los de primera parte siempre; si un juego raro muestra aquí una insignia No reproducible, no puede ejercer de gate hasta que el autor publique un build reproducible.

Puedes añadir más de un juego. Añádelos en una sola clave de sitio, o añádelos una vez en el equipo para compartir el mismo conjunto entre todas las claves que tenga.

Tu clave de sitio tiene ahora un juego instalado y verificado. A continuación lo hacemos obligatorio. 🎉

3. Exige un juego para verificar

Instalar un juego lo hace disponible; todavía no obliga a nadie a jugarlo. Eso lo hace el gate.

En tu clave de sitio, abre su página de Seguridad y activa Exigir un juego para verificar. A partir de ahora, todo visitante de esta clave debe jugar uno de sus juegos instalados para pasar, y superar una checkbox a secas ya no basta. (No puedes activar el gate hasta que haya al menos un juego instalado, por eso el paso 2 va primero.)

Con el gate activado, Caputchin elige qué juego instalado recibe cada visitante y lo entrega mediante un ticket firmado de un solo uso. Un visitante, o un bot, no puede elegir el juego, saltárselo ni cambiarlo por uno más fácil: la elección se hace del lado de Caputchin, fresca para cada sesión. Eso es lo que convierte el juego de un detalle agradable en protección de verdad.

¿Gestionas un conjunto entero de claves? Un equipo tiene su propia página de Seguridad con Exigir un juego en cada clave de sitio, que activa el gate en cada clave del equipo de una sola vez.

4. Cambia el elemento

Ahora la página. Los juegos se renderizan en un elemento distinto, <caputchin-game>. El import "@caputchin/widget" que ya añadiste lo registra también, así que no hay nada nuevo que instalar. Como la clave ahora exige un juego, el <caputchin-widget> de solo checkbox ya no puede pasar en ella, así que este cambio es el último paso obligatorio.

En tu formulario de contacto, cambia la única línea:

// before
<caputchin-widget sitekey="cpt_pub_..." />

// after
<caputchin-game sitekey="cpt_pub_..." />

No pasas un id de juego. Como la clave exige un juego, Caputchin sirve uno de tus juegos instalados y lo elige por visita. Si prefieres fijar uno concreto, o limitar la rotación a un subconjunto, nómbralos (cada uno debe estar instalado en la clave):

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

Nombrar un juego que no está instalado en la clave no lo cargará: el widget reporta que el gate no tiene tal juego en vez de dejar pasar al visitante.

5. Pruébalo

Recarga tu app. La checkbox ya no está: el visitante juega ahora el juego en un iframe en sandbox. Cuando gana, el widget añade al formulario el mismo campo oculto caputchin-token, así que tu lectura de FormData y tu comprobación de backend /siteverify quedan ambas sin cambios respecto a la lección anterior.

Abre la estadística de tu clave de sitio y verás sesiones fluyendo por el mismo embudo que antes. Puedes filtrar toda la vista a un solo juego para comparar uno contra otro.

El formulario de contacto de BananaSeed está ahora protegido por un juego real y jugable que todo visitante debe superar, y cada envío sigue verificándose en tu servidor. Lo has enviado a producción. 🎉

Fuiste de una cuenta vacía a un formulario verificado y protegido por juego.

Lo que acaba de pasar

Qué sigue

Estas son las áreas a las que más probablemente recurras desde aquí:

• Personaliza los juegos: ajusta el idioma, el skin y la dificultad de tus juegos.
• Seguridad: el gate de juego, la dificultad del proof-of-work, los origins y el resto de la protección de una clave.
• Estadística y sesiones: lee el embudo y compara un juego contra otro.
• Gestión de cuenta: inicio de sesión, access tokens, facturación y asientos.
• Equipos: organiza tus claves de sitio y, en un plan de pago, invita a tu equipo.