Crea tu cuenta y tu primera clave de sitio

Esta es la primera de tres lecciones cortas. Juntas te llevan de una cuenta vacía a un reto de juego real que protege un formulario en producción.

Trabajas en BananaSeed, y el formulario de contacto de tu sitio se ahoga en spam: bots y agentes de IA con scripts disparándole envíos basura las veinticuatro horas. Quieres a Caputchin plantado delante de ese formulario para que solo pasen personas reales.

Así lo hace Caputchin. Cuando alguien abre tu formulario de contacto, Caputchin le da un reto rápido en el navegador (una checkbox simple, o un juego corto). Superarlo le gana un token de un solo uso, que la página envía junto con el formulario. Tu servidor comprueba entonces ese token con Caputchin antes de fiarse de la petición. Un bot que hace POST directo a tu endpoint nunca superó un reto, así que no tiene un token válido, y tu servidor lo rechaza.

El sitio de BananaSeed es un frontend de React con un backend de Node.js sobre Express, así que las dos lecciones siguientes te dan código que funciona para exactamente ese stack. Los mismos pasos se trasladan a cualquier framework o lenguaje; solo cambia la sintaxis.

Primero, BananaSeed necesita una cuenta y una clave de sitio. Unos dos minutos, sin tarjeta de crédito, nada que instalar todavía.

Lo que tendrás al final

• Una cuenta de Caputchin.
• Una clave de sitio, que en realidad es un par de valores:
  • una clave pública (cpt_pub_...) que va en tu página,
  • un secreto (cpt_sec_...) que se queda en tu servidor.

1. Inicia sesión (esto también crea tu cuenta)

Ve a caputchin.com/login. No hay un paso de registro separado: tu primer inicio de sesión con un correo es lo que crea la cuenta. Elige lo que prefieras:

• Enviar un enlace de inicio de sesión por correo, luego haz clic en el enlace del correo, o
• Continuar con GitHub, o
• Continuar con Google.

Solo leemos tu dirección de correo verificada.

Una vez dentro, fíjate en que la barra de direcciones marca /app/troops. Caputchin te deja directamente en tus equipos.

2. Abre tu equipo personal

Antes de crear una clave de sitio, ayuda saber dónde vive. Casi todo en Caputchin se asienta dentro de un equipo. Un equipo es un espacio de trabajo, y es lo que posee tus claves de sitio, la personalización de juego que esas claves comparten y (en los planes de pago) los compañeros que invitas a ayudar a gestionarlas. Caputchin está construido en torno a los equipos a propósito: una clave de sitio siempre pertenece a un equipo, nunca directamente a tu cuenta, y eso es lo que deja que más tarde un equipo entero gestione las mismas claves sin compartir un inicio de sesión. La facturación y los asientos se asientan a nivel de cuenta, por encima de tus equipos, no dentro de ninguno de ellos.

Cada cuenta empieza con un equipo llamado Personal, que eres solo tú. Eso es todo lo que necesitas para esta guía. Cuando se te quede pequeño, creas equipos compartidos e invitas a miembros, pero nada de lo de abajo cambia.

Haz clic en Personal para abrirlo. Un equipo se abre directamente sobre sus Claves de sitio, así que ahí es donde aterrizas. Fíjate en la barra de direcciones: /app/troops/<id>/site-keys. La clave que estás a punto de crear queda anidada bajo el equipo, que es exactamente la pertenencia que acabamos de describir.

3. Crea tu primera clave de sitio

Haz clic en Create site-clave, dale un nombre como My site, y haz clic en Create. Lo único que pide es un nombre.

Caputchin te muestra dos valores:

Fíjate en el banner: "Copia el secreto ahora. No volveremos a mostrarlo." Copia el secreto y guárdalo en algún sitio donde tu servidor pueda leerlo (una variable de entorno, tu gestor de secretos). Siempre puedes volver a ver la clave pública en la página de Integración de la clave, pero el secreto se muestra exactamente una vez. Si lo pierdes, lo rotas en lugar de recuperarlo.

Una clave recién creada todavía no tiene restricción de origin, que es justo lo que deja que tu página de prueba funcione en local en la siguiente lección. Más sobre los ajustes de una clave en Claves de sitio.

Lo que acaba de pasar

Tienes una cuenta y tu primera clave de sitio, los cimientos sobre los que se construye todo lo demás. Buen trabajo. 🎉

Siguiente

Ya tienes tus claves. Hora de poner el widget en una página y presenciar una verificación real.

Continúa con Añade el widget a tu sitio.