Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

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.

O Cronapp possui suporte somente ao reCaptcha v2.


Image Modified

Figura 1 - Exemplo de imagem rodando no browser

Principais propriedades

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


NomePropriedadeFunção
Chave do site

data-sitekey

Chave responsável por realizar a integração entre a API do Google ReCaptcha e o Cronapp
Tamanho

data-size

Define o tipo de captcha que será utilizado no projeto

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 Modified

 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.



Configurando a API reCAPTCHA

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, logue com uma conta Google e siga os passos abaixo (Figura 3.1).

  1. Etiqueta: Aqui iremos definir um nome para identificação do site que foi adicionado;
  2. Tipo de reCaptcha: Aqui vamos definir qual opção do reCaptcha será utilizada - lembrando que o Cronapp só suporta o reCaptcha v2:
    • 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;
  3. 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.


Image Modified

Figura 3.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 Modified

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


Image Modified

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

Configurando o componente Captcha

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.


Image Modified

Figura 4.1 - Inserindo componente na view login


Após inserir o componente, selecione o mesmo na área de edição e clique na aba propriedades. No campo chave do site, insira a chave disponibilizada no Google.


Image Modified

Figura 4.2 - Inserindo a chave do site


Informações
titleObservação

Caso tenha selecionado a opção "Selo de reCaptcha invisível", é necessário adicionar a palavra invisible no campo Tamanho.


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.


Image Modified

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.

Nome em inglês

Captcha


Nessa página

Índice


Compatibilidade

  • Formulário web


Equivalente mobile

Não possui.


Botão do componente

Image Modified


Imagem no Editor Visual

Image Modified