Função

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.

Image RemovedImage Added

Figura 1 - Exemplo de imagem do componente rodando no browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades do componente.

Tipos de captcha

O captcha mais conhecido é o de marcação (Figura 1), esse realiza a verificação através da interação com o usuário. Outro tipo de captcha é o "invisível", no qual é feita a substituição da caixa de seleção "Não sou um robô" por um símbolo mais discreto do captcha que se expande ao passar o mouse por cima e a validação nesse caso é feita de forma "escondida" (Figura 2).

Image Removed

 Figura 2 - Exemplo de captcha invisível

De forma resumida, as opções do reCAPTCHA v2 são:

• 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.

Aba de Estilos

O componente não possui propriedades específicas na aba estilo.

Configurando a API reCAPTCHA

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).

Cadastro no serviço Captcha

Primeiramente, é preciso acessar o site da Google para registrar o domínio que irá utilizar o reCaptcha e obter a chave que permitirá a utilização do componente no Cronapp.

Acesse o formulário de registro do reCaptcha, faça o login com uma conta Google e siga os passos abaixo (Figura 3.12).

Image Added

Figura 2 - Configuração do componente Captcha

1. Etiqueta: define um nome qualquer para ter uma identificação do site Etiqueta: Aqui iremos definir um nome para identificação do site que foi adicionado;
2. Tipo de reCaptcha: Aqui vamos definir  define qual opção do reCaptcha v2 será utilizada - lembrando (relembrando que o Cronapp só suporta o reCaptcha v2):
   • Caixa de seleção "Não sou um robô":
   No exemplo
   •  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ínios (1 da Figura 2.1), informe

o domínio do sistema sem o "http://" ou "https://" ou a barra ( / ) no final da url.No campo proprietário (2 da Figura 2.1), 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.

Image RemovedImage Added

Figura 32.1 - Configuração do componente Captcha

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

Image Removed

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 reCaptcha na Cronapp iremos precisar apenas da chave de site (Essas essas chaves poderão ser acessadas posteriormente nas configurações do site).

Image Modified

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

Configurando o componente Captcha

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

Image Removed

Vamos inserir o Captcha (Figura 3) no formulário login  (localização: src/main/webapp/views/login.view.html 

)

Image Added

Figura 3 - Inserindo componente no Figura 4.1 - Inserindo componente na formulário login

Após inserir o componente,

iremos selecioná-lo na área de edição

(destaque 1 da Figura 3.1) e clicar na aba Propriedades (2). No campo

Chave do site (3),

vamos inserir a chave disponibilizada no Google.

Image Removed

Image Added

Figura

3.

1 - Inserindo a chave do site

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

(3 da figura 3.2) na janela Configurações do projeto

 e cole a chave secreta, obtida no passo anterior, no

campo Recaptcha (4), conforme a imagem abaixo.

Image Removed

Image Added

Figura

3.

2 - 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.