Crie um CAPTCHA matemático simples para seus formulários com PHP e JavaScript

Neste novo tutorial, discutiremos uma abordagem direta para reduzir o spam de envios de formulários. Esta técnica usará PHP e JavaScript para bloquear o envio de formulários até que o usuário forneça a resposta correta para uma simples matemática CAPTCHA.

Aqui está um vídeo rápido que demonstra a funcionalidade esperada:

sddefault

É importante notar que este é apenas um método simples e rápido que adiciona uma camada extra de proteção e não deve substituir outras soluções mais elegantes como reCAPTCHA sempre que aplicáveis. Se você estiver familiarizado com o WordPress Formulário de contato 7 (CF7) plugin, você já deve conhecer seu quiz tag que fornece funcionalidade semelhante.

O que é CAPTCHA?

CAPTCHA significa Turing público completamente automatizado teste para dizer Computadores e Seres Humanos. Você os conhecerá na forma de imagens ou áudio distorcidos, questionários para encontrar objetos em fotos ou (no caso do reCaptcha do Google) uma caixa de seleção para provar que você não é um robô.

recaptcha do googlerecaptcha do googlerecaptcha do google

Claro, eles podem ser irritantes, mas são um mal necessário na luta contra o spam. Criaremos nosso próprio CAPTCHA pedindo aos usuários que respondam a um simples teste de matemática.

Construir o formulário

Para os propósitos desta demonstração, precisaremos de um formulário. Vamos criar um Formulário Bootstrap 5 aproveitando seu sistema de rede e algumas classes de utilidades. Não se preocupe se você preferir não usar o Bootstrap; o objetivo principal deste tutorial não é mostrar como criar um formulário, mas demonstrar como você pode protegê-lo independentemente de como você o cria.

Segue nosso formulário:

Até agora, parece bom visualmente, mas não contém nenhum método de proteção para e-mails de spam. Um bot pode facilmente preencher seus campos e nos enviar informações indesejadas.

Adicione o CAPTCHA matemático

Para evitar isso o máximo possível, criaremos um CAPTCHA matemático simples. Para construir o CAPTCHA, podemos usar qualquer tipo de linguagem do lado do servidor ou mesmo JavaScript do lado do cliente. No nosso caso, vamos com PHP.

O processamento dos dados do formulário após o envio está além do escopo deste tutorial

Aqui estão os passos que seguiremos:

1. Configure o documento PHP

Em um novo documento PHP, vamos gerar dois números aleatórios entre 0 e 300 graças ao PHP’s rand() função. No carregamento da página, esses números quase certamente mudarão.

Abaixo disso, podemos adicionar a estrutura da página e a marcação HTML do nosso formulário exatamente como o criamos antes.

2. Criar nova entrada de formulário

Vamos agora criar uma nova entrada de texto onde o usuário deverá preencher a soma desses dois números.

3. Atualize o botão Enviar

Por padrão, o botão enviar será desabilitado usando o disabled atributo.

Também passaremos o resultado esperado de $num1 + $num2 para o data-res atributo do botão enviar. Para melhor segurança, também podemos passar o número de destino dentro de um padrão para dificultar a adivinhação de um bot.

4. Verifique a resposta usando JavaScript

Cada vez que o usuário definir o valor do campo do questionário, usaremos JavaScript para avaliar sua resposta em comparação com a esperada. Se ambos corresponderem, removeremos o disabled atributo do botão enviar, caso contrário o botão permanecerá desabilitado.

5. Formulário Concluído

Veja como nosso formulário ficará após essas modificações:

O layout completo do formulárioO layout completo do formulárioO layout completo do formulário

Você pode baixar o código completo neste repositório GitHub. Há apenas um único arquivo PHP. Para abrir o projeto, use um servidor local como XAMPP ou Largão.

Conclusão

Espero que você tenha gostado deste pequeno exercício em que passamos por uma abordagem rápida para tornar nossos formulários menos spam.

Novamente, em geral, para obter melhores resultados, é recomendável usar abordagens mais eficazes, como reCAPTCHA. No entanto, nos casos em que isso não for possível por qualquer motivo, você pode tentar a solução que discutimos aqui. Você pode até torná-lo mais elegante usando outros tipos de CAPTCHAs e questionários. Por exemplo, você pode ter uma matriz de 10 perguntas junto com as respostas esperadas. Em seguida, apresente no front-end aleatoriamente uma dessas perguntas e lide com a resposta do usuário da mesma forma que fizemos com o teste de matemática.

Vale a pena notar que, se você é um amante do Bootstrap e deseja fornecer aos usuários validação de formulário personalizado em vez do navegador padrão, você tem sorte! Bootstrap oferece tais implementação. Sinta-se à vontade para estender este exemplo como desejar!

Por último, mas não menos importante, se você quiser saber como reduzir as mensagens de spam enviadas por meio de links de e-mail, dê uma olhada em outro tutorial onde discutimos duas técnicas eficazes.

Como sempre, muito obrigado por ler!

Source link

Amazon Coaching Grátis

Venda 25K Dólares com apenas um Produto no Amazon.

Artigos Relacionados

LEAVE A REPLY

Please enter your comment!
Please enter your name here

15 + 10 =

- Ana Pereira -spot_img

Últimos Artigos