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
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:
Projeto do tipo web criado. Caso haja dúvidas em relação a como criar esse tipo de projeto acesse o link Criar projeto.
Possuir uma conta da Google (Gmail).
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
É 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
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).
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
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)
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
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 |
Figura 4.2 - Configuração do componente Captcha no Cronapp
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