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:

  1. Projeto do tipo web criado. Caso haja dúvidas em relação a como criar esse tipo de projeto acesse o link Criar 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

Configurando a API reCAPTCHA

Etiqueta e Tipo

É 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: define um nome qualquer para ter uma identificação do site que foi adicionado;
  • Tipo de reCaptcha: define qual opção do reCaptcha v2 será utilizada (relembrando 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.

Nesse tutorial 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 (Figura 1).

Domínios e proprietários

No campo domínio (1 da Figura 3.2), informe o domínio do sistema sem o http:// ou https://. No campo proprietário (2 da Figura 3.2), ele virá automaticamente preenchido com o e-mail utilizado para acessar o site, mas é possível informar outros e-mails caso deseje.

Por fim, aceite os termos de serviços do reCAPTCHA e clique em enviar.


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 ela mudar.



Figura 3.2 - Configuração do componente captcha

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 (Figura 3.3).


Essas chaves poderão ser acessadas posteriormente nas configurações do site do reCAPTCHA.



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

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. Primeira, abra a página web de login e na aba controles (1 da Figura 4.1), clique no componente Captcha e o arraste para logo abaixo do botão de login.


Figura 4.1 - Componente Captcha na lista de componentes

Configurando chave do site

Selecione o componente Captcha, acesse a aba propriedades (1 da Figura 4.2) e no campo chave do site (destaque da Figura 4.2), cole a chave obtida no passo anterior (Figura 3.3).


Caso a opção Selo de reCaptcha invisível (Figura 3.1) tivesse sido selecionada, seria necessário inserir o termo invisible na propriedade Tamanho (data-size) (destaque 2 da figura 4.2).



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

Configurando chave secreta

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 Projeto > Configurações para abrir a janela de Configurações do Projeto (seta da Figura 4.3) e na aba Configurações do projeto cole a chave secreta, obtida no passo anterior (Figura 3.3), no campo ReCaptcha (destaque da Figura 4.3).



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


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

Nesta Página