Crie sua conta e a primeira chave de site
Esta é a primeira de três lições curtas. Juntas, elas levam você de uma conta vazia a um desafio de jogo real protegendo um formulário ativo.
Você trabalha na BananaSeed, e o formulário de contato do seu site está se afogando em spam: bots e agentes de IA roteirizados disparam envios de lixo nele a toda hora. Você quer o Caputchin parado na frente desse formulário para que só pessoas de verdade passem.
Veja como o Caputchin faz isso. Quando alguém abre seu formulário de contato, o Caputchin lhe dá um desafio rápido no navegador (uma simples checkbox ou um jogo curto). Quem o resolve ganha um token de uso único, que a página envia junto com o formulário. Seu servidor então confere esse token com o Caputchin antes de confiar na requisição. Um bot que faz POST direto no seu endpoint nunca resolveu um desafio, então não tem token válido, e seu servidor o recusa.
O site da BananaSeed é um frontend em React com um backend em Node.js rodando Express, então as próximas duas lições entregam código pronto exatamente para esse stack. Os mesmos passos servem para qualquer framework ou linguagem; só a sintaxe muda.
Primeiro, a BananaSeed precisa de uma conta e de uma chave de site. Cerca de dois minutos, sem cartão de crédito, nada para instalar ainda.
O que você terá no final
- Uma conta Caputchin.
- Uma chave de site, que na verdade é um par de valores:
- uma chave pública (
cpt_pub_...) que vai na sua página, - um segredo (
cpt_sec_...) que fica no seu servidor.
- uma chave pública (
1. Entre (isto também cria sua conta)
Vá para caputchin.com/login. Não há um passo de cadastro separado: seu primeiro acesso com um e-mail é o que cria a conta. Escolha o que preferir:
- Enviar um link de acesso por e-mail, depois clique no link do e-mail, ou
- Continuar com o GitHub, ou
- Continuar com o Google.
Só lemos o seu endereço de e-mail verificado.
Assim que você entrar, repare que a barra de endereço mostra /app/troops. O Caputchin leva você direto às suas equipes.
2. Abra sua equipe Pessoal
Antes de criar uma chave de site, ajuda saber onde ela mora. Quase tudo no Caputchin fica dentro de uma equipe. Uma equipe é um espaço de trabalho, e é o que detém suas chaves de site, a personalização de jogo que essas chaves compartilham e (nos planos pagos) os colegas que você convida para ajudar a gerenciá-las. O Caputchin é construído em torno de equipes de propósito: uma chave de site sempre pertence a uma equipe, nunca à sua conta diretamente, e é isso que permite que um time inteiro gerencie as mesmas chaves depois sem compartilhar um login. Faturamento e assentos ficam no nível da conta, acima das suas equipes, não dentro de nenhuma delas.
Toda conta começa com uma equipe chamada Pessoal, que é só você. É tudo de que você precisa para este guia. Quando ela ficar pequena, você cria equipes compartilhadas e convida membros, mas nada abaixo muda.
Clique em Pessoal para abri-la. Uma equipe abre direto nas suas Chaves de site, então é aí que você cai. Repare na barra de endereço: /app/troops/<id>/site-keys. A chave que você está prestes a criar fica aninhada sob a equipe, exatamente a relação de propriedade que acabamos de descrever.
3. Crie sua primeira chave de site
Clique em Criar chave de site, dê a ela um nome como My site e clique em Criar. Um nome é tudo o que ele pede.
O Caputchin mostra dois valores:
| Valor | Parece com | Onde vai |
|---|---|---|
| Chave pública | cpt_pub_... | Na sua página, no elemento do widget. Seguro entregar ao navegador. |
| Segredo | cpt_sec_... | Só no seu servidor. Nunca coloque em código do lado do cliente. |
Repare no aviso: "Copie o segredo agora. Nunca mais vamos mostrá-lo." Copie o segredo e guarde-o em algum lugar que seu servidor possa ler (uma variável de ambiente, seu gerenciador de segredos). Você pode sempre ver a chave pública de novo na página de Integração da chave, mas o segredo é mostrado exatamente uma vez. Se você o perder, rotaciona em vez de recuperar.
Uma chave novinha em folha ainda não tem restrição de origem, e é justamente isso que faz sua página de teste funcionar localmente na próxima lição. Mais sobre as configurações de uma chave em Chaves de site.
O que acabou de acontecer
| Passo | Onde | Resultado |
|---|---|---|
| Primeiro acesso | Navegador | Sua conta é criada e uma equipe Pessoal fica pronta. |
| Criar chave de site | Painel | Uma chave pública para a página e um segredo para o seu servidor. |
Você tem uma conta e sua primeira chave de site, a base sobre a qual tudo o mais se constrói. Bom trabalho. 🎉
A seguir
Você tem suas chaves. Hora de pôr o widget em uma página e ver uma verificação real acontecer.
Continue para Adicionar o widget ao seu site.