reCaptcha para eliminar o spam dos comentários em blogs

reCaptcha para eliminar o spam dos comentários em blogs

Depois que o reCaptcha acabou com o spam que eu recebia no fomulário de contato, resolvi utilizar também no formulário de comentários. Blogs WordPress têm diversas opções de plugins que adicionam reCaptcha, mas um efeito negativo de instalar e desinstalar plugins é que a tabela wp_options fica com muitas entradas não utilizadas quando o desenvolvedor não adiciona uma função que remove essas linhas ao deletar o plugin.

A solução faça você mesmo que encontrei requer a edição de alguns arquivos, por outro lado facilita a validação do captcha com jQuery.

Antes do reCaptcha

jQuery validate é o responsável por validar as informações fornecidas no formulário antes de enviá-lo, inserindo mensagens de erro configuráveis. Para utilizar as funcionalidades oferecida pelo jQuery, baixe a versão mais recente em jquery.com.

invalid-fields

// JavaScript 
// valida o formulário de comentários
$(function(){
	$("#commentform").validate({
		rules: {
			author: {
				required: true,
				minlength: 4
			},
			email: {
				required: true,
				email: true
			},
			comment: {
				required: true,
				minlength: 10,
				maxlength: 1400
			}
		},
		messages: {
			author: {
				required: 'Informe seu nome.',
				minlength: 'Seu nome deve possuir mais que 3 caracteres.'
			},
			email: {
				required: 'Informe seu email.',
				email: 'Email inválido!'
			},
			comment: {
				required: 'Escreva seu comentário.',
				minlength: 'Seu comentário deve possuir mais que 10 caracteres.',
				maxlength: 'Seu comentário deve possuir menos que 1400 caracteres.'
			}
		}
	});
});

Author, email e comment são os IDs dos campos nome, e-mail e comentário, respectivamente. Use o ID captchaStatus para que as mensagens de erro geradas pela validação tenham cores diferentes:

/* CSS */
/* altera as mensagens de erro inseridas pelo jQuery validate */
#captchaStatus {
	background-color: #FFC;
	color: #F00;
	display: block;
	margin: 10px 0;
	padding: 10px 5px;
	width: 460px;
}

Isso dá conta da validação dos campos padrão do formulário de comentários, ainda é preciso adicionar o reCaptcha e validá-lo.

Inserindo o reCaptcha

Inscreva-se no site reCaptcha para obter chaves de validação para o domínio em que está o seu blog e o arquivo recaptchalib.php mais recente. Adicione também o arquivo ajax.recaptcha.php com o conteúdo a seguir (inserindo as chaves publickey e privatekey que você obteve ao cadastrar-se no reCaptcha):

// PHP
// ajax.recaptcha.php para verificar o captcha por Ajax
require_once('recaptchalib.php');
$publickey = "substitua_pela_sua_chave_públca"; // you got this from the signup page
$privatekey = "substitua_pela_sua_chave_privada";

$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

if ($resp->is_valid) {
	?>success<?php
}
else 
{
    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
       "(reCAPTCHA said: " . $resp->error . ")");
}

Também será necessário adicionar a função validateCaptcha() à validação do formulário:

// JavaScript
// função utilizada no submitHandler para fazer a validação
function validateCaptcha(){
	challengeField = $("input#recaptcha_challenge_field").val();
	responseField = $("input#recaptcha_response_field").val();

	var html = $.ajax({
		type: "POST",
		url: "caminho/para/arquivo/ajax.recaptcha.php",
		data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
		async: false
		}).responseText;

	if(html == "success") {
		return true;
	} else {
		$("#captchaStatus").css('display','block');
		$("#captchaStatus").html("O c&oacute;digo informado est&aacute; incorreto. Tente novamente.");
		Recaptcha.reload();
		return false;
	}
}

$(function(){
	$("#commentform").validate({
		rules: {
			author: {
				required: true,
				minlength: 4
			},
			email: {
				required: true,
				email: true
			},
			comment: {
				required: true,
				minlength: 10,
				maxlength: 1400
			}
		},
		messages: {
			author: {
				required: 'Informe seu nome.',
				minlength: 'Seu nome deve possuir mais que 3 caracteres.'
			},
			email: {
				required: 'Informe seu email.',
				email: 'Email inv&aacute;lido!'
			},
			comment: {
				required: 'Escreva seu coment&aacute;rio.',
				minlength: 'Seu coment&aacute;rio deve possuir mais que 10 caracteres.',
				maxlength: 'Seu coment&aacute;rio deve possuir menos que 1400 caracteres.'
			}
		},
		submitHandler: function(form){ 
			if(validateCaptcha()){ offerForm.ajaxSubmit(); }
		} 
	});
});

Para inserir o reCaptcha no formulário, adicione a função add_comment_recaptcha() ao functions.php:

// PHP
// função para inserir o reCaptcha no formulário de comentários do WordPress
function add_comment_recaptcha() {
	require_once('lib/recaptchalib.php');
	$publickey = "public_key"; // you got this from the signup page
	echo recaptcha_get_html($publickey).'<div id="captchaStatus" style="display:none;"></div>';
}
add_action('comment_form', 'add_comment_recaptcha');

add_action('comment_form', 'add_comment_recaptcha'); é a linha que faz o WordPress executar a função add_comment_recaptcha() quando o formulário é criado.

Finalize posicionando o botão “Enviar comentário” abaixo do reCaptcha:

// JavaScript
$(function(){
	var button = $('#respond .form-submit');
	if (button.length > 0) {
		button.remove(); //removes from its current place
		$('#commentform').append(button); //places the button after recaptcha
	}
});

Com isso, a validação do formulário e do captcha será feita sem que o leitor do blog precise sair da página do post no caso de haver alguma informação incorreta; e o reCaptcha vai evitar que spam bots adicionem comentários inúteis.

Referências:
jQuery
jQuery Validate
reCaptcha
Validar reCaptcha por Ajax

Receba os posts do blog em seu email!


2017-01-22T01:12:42+00:00 Janeiro 2011|Desenvolvimento Web|

3 Comentários

  1. Eliabe 3 de setembro de 2011 em 11:23- Responder

    Muito bom!!!

  2. Rose 17 de Abril de 2012 em 10:36- Responder

    Caramba, seu post me ajudou bastante. Muito muito obrigada! 😉

  3. Ariel Correa 21 de dezembro de 2016 em 09:45- Responder

    Bom dia Tatiane.

    Você tem como me passar esses scripts?

    Desde já obrigado.

    • Tatiane Pires 22 de dezembro de 2016 em 19:05- Responder

      Todo o código necessário está no próprio post. 😉

Deixar Um Comentário