Page tree
Skip to end of metadata
Go to start of metadata

O CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) trata-se de um teste completamente automatizado para diferenciar humanos e máquinas. A ideia do CAPTCHA é evitar spams e mensagens disparadas por outros computadores ou por robôs, para isso ele apresenta perguntas que, presumivelmente, apenas um ser humano poderia responder.

No Cronapp, é possível utilizar a tecnologia reCAPTCHA em seus projetos web,


Figura 1 - Componente (web) CAPTCHA


Pré-requisitos

Antes de começar é necessário ter certeza de que se possui um ambiente preparado para a realização do exemplo. Abaixo estão os principais requisitos necessários.

Requisitos:

  1. Projeto do tipo web criado. Caso haja dúvidas em relação a como criar esse tipo de projeto acesse o link (Criar novo projeto).

  2. Possuir uma conta da google (gmail).

Visão Geral

Nesse tutorial iremos implementar um componente Captcha no login da aplicação. Para isso utilizaremos a API do Google ReCaptcha que é responsável por validar a verificação. Essa API possui dois tipos de validação, o reCaptcha v2 e o reCaptcha v3: o v2 possui interações com o usuário e validações em segundo plano (Sem a interação do usuário), enquanto o v3 atua somente com as validações em segundo plano.

O Cronapp por sua vez só possui suporte ao reCaptcha v2.


Figura 2 - Resultado gerado ao fim do tutorial

Passo a passo

Configurando a API reCAPTCHA

É necessário, primeiramente, acessar o site da Google para registrar o domínio que irá utilizar o Captcha e para obter a chave que permitirá a utilização do componente no Cronapp.

Clique aqui e logue em sua conta Google para acessar o ambiente de configuração e siga os passos abaixo:


Figura 3.1 - Configuração do componente Captcha


Etiqueta: Aqui iremos definir um nome para identificação do site que foi adicionado.

Tipo de reCaptcha: Aqui vamos definir qual opção do reCaptcha v2 será utilizada (Lembrando que o Cronapp só suporta o reCaptcha v2):

  • Caixa de seleção "Não sou um robô" realiza a verificação com a necessidade da interação do usuário,
  • Selo de reCaptcha invisível realiza as validações em segundo plano, sem a necessidade da interação do usuário
  • reCaptcha para Android realiza as verificações nos aplicativos em segundo plano, ou seja de forma invisível.

No exemplo utilizamos a opção Caixa de seleção "Não sou um robô" em que é necessário que o usuário marque o campo exibido

Domínios: Informe o domínio do sistema sem o "http://" ou "https://". No caso dos sistemas ainda em desenvolvimento no Cronapp, a url de Debug geralmente muda ao rodar o projeto, sendo necessário adicionar novamente sempre que mudar a url.


Figura 3.2 - Configuração do componente captcha


Proprietários: Informe outros e-mails na lista de proprietários, caso queira, aceite os termos de serviço e clique em Enviar.


Figura 3.3 - Configuração do componente Captcha (chaves)


Chaves de reCaptcha: Após registrar o site, uma janela com as chaves reCaptcha irá aparecer. Para configurar o componente Captcha na Cronapp iremos precisar apenas da chave de site (Essas chaves poderão ser acessadas posteriormente nas configurações do site).

Configurando o componente Captcha no Cronapp

Após registrar o site no Google Captcha e obter a chave, devemos configurar o componente dentro do Cronapp para que ele possa ser habilitado. Confira abaixo:

Figura 4.1 - Componente Captcha na lista de componentes


Figura 4.2 - Configuração do componente Captcha no Cronapp


Arraste um componente Captcha para a view de login, deixando-o dentro do formulário (<form>) de login. Selecione o componente e cole a chave obtida no passo anterior na propriedade Chave do site, caso tenha selecionado a opção "Selo de reCaptcha invisível", é necessário adicionar invisible no campo Tamanho. (Figura 4.2)

A partir desse ponto o Captcha já está habilitado e funcionando, entretanto, por questões de segurança, sugerimos realizar uma dupla validação no lado do servidor. Para isso, acesse a aba Configurações do Projeto na janela Configurações do projeto e cole a chave secreta, obtida no passo anterior, no campo ReCaptcha, conforme a imagem abaixo.

Em breve

A segunda validação do Captcha, no servidor, estará em produção em breve.

Figura 4.3 - Configuração da segunda validação do captcha (lado servidor)


Pronto! Agora o componente Captcha já está habilitado, com a dupla validação de segurança.

Nessa Página