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ódigo informado está 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á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.'
			}
		},
		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

3 respostas para “reCaptcha para eliminar o spam dos comentários em blogs”

Deixe uma resposta para Eliabe Cancelar resposta