Adicione um jogo do marketplace

O formulário de contato da BananaSeed já tem um widget funcionando da lição anterior. Nesta última lição, substituímos a simples checkbox por um jogo de verdade, jogável, que todo visitante precisa resolver.

Por que se dar ao trabalho, se a checkbox já funciona? A checkbox é o mínimo discreto. Um jogo transforma o inevitável momento de "prove que você é humano" em algo que o visitante curte em vez de suportar, e é a parte que resiste a atacantes sofisticados. A IA de hoje consegue marcar uma checkbox e resolver grades de imagem, mas um jogo de verdade é o único desafio que ela não consegue burlar, porque nenhuma máquina joga do jeito que um humano joga. 💪

Esta lição é um pouco mais trabalhosa do que foi soltar o widget: você escolhe um jogo, instala-o na sua chave de site e liga o portão que o exige. A recompensa é que o jogo passa a ser a coisa que de fato fica entre um bot e seu formulário, não um enfeite que dá para pular. A mecânica de token por baixo é idêntica, então seu backend não muda em nada. Tudo aqui funciona no plano gratuito.

O que você terá no final

• Um jogo do marketplace instalado na sua chave de site.
• Esse jogo exigido para a verificação, de modo que uma checkbox simples não passa mais.
• O mesmo formulário de contato, agora guardado pelo jogo, com a conferência do seu backend inalterada.

1. Escolha um jogo no marketplace

O marketplace é o catálogo público de onde você escolhe. Abra-o e explore: filtre por categoria, ou pelo que um jogo suporta (toque, teclado, leitores de tela, som), para combinar um jogo com seu público. Cada jogo tem sua própria página com uma prévia e um id como caputchin/games/leaf-memory.

A navegação é aberta, sem fila de aprovação: todo jogo do catálogo está disponível para uso. Escolha um e copie o id dele. Vamos usar Leaf Memory (caputchin/games/leaf-memory) no resto desta lição.

2. Instale o jogo na sua chave de site

Antes que um jogo possa guardar uma chave, você o instala nessa chave. Instalar diz ao Caputchin para tirar um instantâneo fixado e verificado do jogo, de modo que a versão exata que seus visitantes jogam seja a que o Caputchin consegue reexecutar quando confere um resultado depois.

No painel, abra sua equipe, abra sua chave de site e vá para a página Jogos dela. No painel Adicionar um jogo, procure o jogo na caixa Jogo do marketplace e selecione-o na lista (ou clique em Abrir).

O Caputchin registra o jogo, tira o instantâneo dele e leva você à página de configurações do jogo. O jogo agora aparece em Jogos registrados de volta na página Jogos, pronto para guardar a chave. Quase todo jogo do marketplace fica pronto assim que você o registra, os próprios sempre; se um jogo raro mostrar aqui um selo de Não reproduzível, ele não pode proteger até que o autor publique uma build reproduzível.

Você pode adicionar mais de um jogo. Adicione-os em uma única chave de site, ou adicione-os uma vez na equipe para compartilhar o mesmo conjunto entre todas as chaves dela.

Sua chave de site agora tem um jogo instalado e verificado. A seguir, vamos torná-lo obrigatório. 🎉

3. Exija um jogo para verificar

Instalar um jogo o torna disponível; ainda não força ninguém a jogá-lo. O portão faz isso.

Na sua chave de site, abra a página Segurança dela e ligue Exigir um jogo para verificar. A partir de agora, todo visitante desta chave precisa jogar um dos jogos instalados nela para passar, e resolver uma checkbox simples não basta mais. (Você não pode ligar o portão até que pelo menos um jogo esteja instalado, e é por isso que o passo 2 vem primeiro.)

Com o portão ligado, o Caputchin escolhe qual jogo instalado cada visitante recebe e o entrega por meio de um tíquete assinado, de uso único. Um visitante, ou um bot, não pode escolher o jogo, pulá-lo ou trocá-lo por um mais fácil: a escolha é feita do lado do Caputchin, nova a cada sessão. É isso que transforma o jogo de um detalhe agradável em proteção de verdade.

Gerenciando um conjunto inteiro de chaves? Uma equipe tem sua própria página Segurança com Exigir um jogo em cada chave de site, que liga o portão em todas as chaves da equipe de uma vez.

4. Troque o elemento

Agora a página. Os jogos renderizam em um elemento diferente, <caputchin-game>. O import "@caputchin/widget" que você já adicionou registra esse também, então não há nada novo para instalar. Como a chave agora exige um jogo, o <caputchin-widget> só de checkbox não passa mais nela, então essa troca é o último passo obrigatório.

No seu formulário de contato, mude a única linha:

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

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

Você não passa um id de jogo. Como a chave exige um jogo, o Caputchin serve um dos seus jogos instalados e o escolhe por visita. Se você preferir fixar um específico, ou limitar o rodízio a um subconjunto, nomeie-os (cada um precisa estar instalado na chave):

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

Nomear um jogo que não está instalado na chave não vai carregá-lo: o widget informa que o portão não tem tal jogo em vez de deixar o visitante passar.

5. Experimente

Recarregue seu app. A checkbox sumiu: o visitante agora joga o jogo em um iframe em sandbox. Quando ele vence, o widget adiciona o mesmo campo oculto caputchin-token ao formulário, então sua leitura de FormData e a conferência /siteverify do seu backend continuam ambas inalteradas em relação à lição anterior.

Abra as estatísticas da sua chave de site e você verá sessões fluindo pelo mesmo funil de antes. Você pode filtrar a visão inteira para um único jogo e comparar um com o outro.

O formulário de contato da BananaSeed agora é guardado por um jogo de verdade, jogável, que todo visitante precisa resolver, e cada envio ainda é verificado no seu servidor. Você publicou. 🎉

Você saiu de uma conta vazia para um formulário verificado e guardado por um jogo.

O que acabou de acontecer

O que vem a seguir

Estas são as áreas que você provavelmente vai buscar a partir daqui:

• Personalize os jogos: defina o idioma, o skin e a dificuldade dos seus jogos.
• Segurança: o portão de jogo, a dificuldade do proof-of-work, as origens e o resto da proteção de uma chave.
• Estatísticas e sessões: leia o funil e compare um jogo com o outro.
• Gerenciamento de conta: acesso, tokens de acesso, faturamento e assentos.
• Equipes: organize suas chaves de site e, em um plano pago, convide seu time.