Estou tentando implementar o reCAPTCHA
da Google no meu site, e não consigo fazer a integração Server-Side
(Utilizo a linguagem PHP
). Como posso fazer para que o reCAPTCHA
funcione, e realize a validação antes enviar os dados do meu formulário?
-
seu server side é o que ? java, php, .net ou assembly ? Edite sua pergunta e adicione a tag da linguagem :o)– wryel24/04/2015 às 16:31
-
Campos editados. Meu serv-side é php– Odair24/04/2015 às 16:38
-
1Achei sua pergunta interessante porque parece que não existe a página do reCAPTCHA em português. Sei que muitos acham que todo programador tem que saber inglês, mas acho que não faz mal ter algo como um "guia" do reCAPTCHA por aqui... (ou é fora de escopo?) Acho que ajudaria se você melhorasse um pouco mais a pergunta, incluindo o erro específico que não está conseguindo resolver, e colocasse ao menos algum código que já esteja utilizando.– gustavox24/04/2015 às 23:30
3 Respostas
Introdução ao reCAPTCHA
O reCAPTCHA é uma nova ferramenta do Google para proteger seu site contra spammers e bots. Ele vem de uma ideia novadora, pois até então os captchas eram vistos mais como um obstáculo do que um auxiliar pelos usuários. Com o reCAPTCHA isso é diferente, pois tudo que o usuário precisa fazer é clicar em um checkbox, confirmando que não é um robô. Dessa forma todos ganham, o usuário tem acesso mais rápido às informações desejadas, e você mantém visitantes indesejáveis de seu site.
Incrível! Quero ter um desses, como faço?
O primeiro passo é você conseguir uma chave para o seu site. Vá até o site abaixo e clique no botão azul localizado na posição superior-direita do site, escrito "Get reCAPTCHA": https://www.google.com/recaptcha/intro/index.html
Após ter cadastrado seu site, você terá em mãos duas informações importantes: a chave do site, e a secret (chamarei de chave secreta). O primeiro passo para implementar o reCAPTCHA em seu site é inserir a API em seu site. Insira o código dentro da tag head
de seu site:
<script src='https://www.google.com/recaptcha/api.js'></script>
Tudo pronto para o próximo passo.
Criando o formulário
Crie um formulário comum, eu fiz com dois campos: um para o usuário colocar o nome, e outro para uma mensagem qualquer. A marcação ficou assim:
<h1>Exemplo de formulário com o reCaptcha</h1>
<form action="formulario.php" method="post">
Digite seu nome: <input type="text" name="nome"><br><br>
Deixe sua mensagem: <br>
<textarea name="mensagem" rows="7" cols="35"></textarea><br><br>
<input type="submit" value="Submit" name="formulario">
</form>
Inserir o reCAPTCHA no formulário é extremamente simples, você só precisa adicionar o seguinte elemento na posição que deseja que ele apareça:
<div class="g-recaptcha" data-sitekey="SUA-CHAVE"></div>
Não esqueça de substituir SUA-CHAVE pela chave que você recebeu no site, lembrando que é a chave do site, não a chave secreta!
Substitua a propriedade action
na tag form
para o nome do arquivo PHP que irá validar o formulário. Você pode validar na mesma página, mas eu preferi deixar em uma separada para o código ficar mais simples.
Mas não posso validar usando JavaScript na hora?
Não :) Você já irá entender o motivo.
Criando o código PHP para validar o formulário
Vamos obter o valor do campo de nome e da mensagem que o usuário enviou:
if (isset($_POST['nome'])) {
$nome = $_POST['nome'];
}
if (isset($_POST['mensagem'])) {
$mensagem = $_POST['mensagem'];
}
A partir daqui que a validação do captcha realmente acontece. É nos enviada via POST
um valor fornecido pelo reCAPTCHA, é possível recuperar esse valor pela variável $_POST['g-recaptcha-response']
. Logo:
if (isset($_POST['g-recaptcha-response'])) {
$captcha_data = $_POST['g-recaptcha-response'];
}
// Se nenhum valor foi recebido, o usuário não realizou o captcha
if (!$captcha_data) {
echo "Por favor, confirme o captcha.";
exit;
}
Parece que acabou, né? Não! Agora que vem a parte divertida, lembra quando eu disse que era necessário que o captcha tinha que passar por uma validação PHP? Isso é necessário pois o reCAPTCHA usa informações no banco de dados do Google, que contém diversas informações sobre o usuário que "efetuou" o captcha. Dessa forma é possível distinguir um usuário comum de um bot. Para validarmos o usuário, precisamos fazer uma requisição para a API do reCAPTCHA, utilizando o file_get_contents
. Observe:
$resposta = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=SUA-CHAVE-SECRETA&response=".$captcha_data."&remoteip=".$_SERVER['REMOTE_ADDR']);
Procure no meio da URL por SUA-CHAVE-SECRETA e substitua pela sua. O que esse comando faz é recuperar dados na API do reCAPTCHA por informações sobre os valores que foram fornecidos pelo captcha, além de enviar o IP do usuário para futuras avaliações.
Com a requisição enviada, só nos falta tratar a resposta:
if ($resposta.success) {
echo "Obrigado por deixar sua mensagem!";
} else {
echo "Usuário mal intencionado detectado. A mensagem não foi enviada.";
exit;
}
Espero que tenha entendido como o sistema funciona. Qualquer dúvida já sabe, estamos aqui para ajudar. ;)
-
1Cara , depois de quase arrancar meus cabelos por 2 dias, eis que aqui consegui resolver o problema de um ReCaptcha não estava funcionado em um cliente novo. Por algum motivo nao tinha jeito de funcionar e com suas orientações DEU CERTO! :) Obrigada– Paulinha5/11/2019 às 17:52
RESPOSTA TOTALMENTE REFORMULADA. Motivo: eu coloquei as informações conforme fui descobrindo e ficou muito ruim. Agradeço ao Rafael Almeida, pela primeira resposta, que me ajudou muito e me levou a descobrir mais coisas. E aos administradores, que fizeram alterações que me orientaram a melhorar a resposta. A minha resposta existe só para acrescentar informações ao excelente trabalho já feito por Rafael Almeida.
Código no lado do cliente (HTML e JavaScript)
Uma questão levantada: mas não posso validar usando JavaScript na hora?
Até daria para fazer, na verdade, usando AJAX: mandar a informação para o PHP e obter a resposta antes de submeter o formulário inteiro, com o restante dos campos. No entanto, não parece um esforço necessário, pois, ao clicar no reCAPTCHA, ele não libera enquanto o usuário não der a resposta certa. Pelo menos, não vi acontecer outra coisa senão com ou sem a marca "check" para indicar que está tudo OK (por exemplo, não vi um X vermelho no lugar). Em outras palavras, o reCAPTCHA é tudo ou nada: ou o usuário não respondeu ou respondeu e respondeu certo.
O que parece ser útil aqui fazer a verificação no JS antes de enviar para o PHP para saber se o usuário ao menos usou o reCAPTCHA, para evitar o envio do formulário inteiro. Isso é muito fácil, pois a API já tem a função, é só colocar alguma coisa assim na função que executa no onsubmit
do formulário:
if (grecaptcha.getResponse() == "")
{
alert("Você não clicou no reCAPTCHA, por favor, faça!")
return false;
}
Código no lado do servidor (PHP)
O que me levou a obter mais informações é que o código com file_get_contents
não deu certo para mim. Inicialmente, achei que o problema fosse o método de envio da função (GET, enquanto o site do reCAPTCHA diz que precisa ser POST). Depois, descobri que funciona perfeitamente na cópia do site hospedada no meu PC. Ou seja, é o servidor da hospedagem (eu uso Hostmídia) que bloqueia. Eu ainda tentei, mas sem sucesso:
ini_set('allow_url_fopen', 1)
A resposta alternativa, baseada em cURL
, pode ser útil para quem tem o site na mesma hospedagem ou em outra que também bloqueie. De qualquer forma, pode ser interessante para evitar que, em caso de warning, no fique registrado no log a URL incluindo a chave secreta. Segue o código:
# Os parâmetros podem ficar em um array
$vetParametros = array (
"secret" => "SUA-CHAVE-SECRETA",
"response" => $_POST["g-recaptcha-response"],
"remoteip" => $_SERVER["REMOTE_ADDR"]
);
# Abre a conexão e informa os parâmetros: URL, método POST, parâmetros e retorno numa string
$curlReCaptcha = curl_init();
curl_setopt($curlReCaptcha, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($curlReCaptcha, CURLOPT_POST, true);
curl_setopt($curlReCaptcha, CURLOPT_POSTFIELDS, http_build_query($vetParametros));
curl_setopt($curlReCaptcha, CURLOPT_RETURNTRANSFER, true);
# A resposta é um objeto json em uma string, então só decodificar em um array (true no 2º parâmetro)
$vetResposta = json_decode(curl_exec($curlReCaptcha), true);
# Fecha a conexão
curl_close($curlReCaptcha);
# Analisa o resultado (no caso de erro, pode informar os códigos)
if ($vetResposta["success"]) echo "<p>Captcha OK!</p>\n";
else
{
echo "$<p>Problemas:</p>\n";
foreach ($vetResposta["error-codes"] as $strErro) echo "$strTab<p>Erro: $strErro</p>\n";
}
Um pouco mais, ainda no lado do servidor...
Se olhar as instruções do site do reCAPTCHA, há a indicação de uma biblioteca que está no github, em /google/recaptcha. Também funciona bem: bastou colocar a pasta src do ZIP baixado em algum lugar do site e usar o código parecido com o exemplo deles. O único problema é que estava dando o seguinte erro:
invalid-json
Então encontrei dica em outro artigo Stackoverflow (indicação do método CurlPost
):
$recaptcha = new \ReCaptcha\ReCaptcha($secret, new \ReCaptcha\RequestMethod\CurlPost());
$resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
// verified!
} else {
$errors = $resp->getErrorCodes();
}
Para isso, não testei se o problema era na hospedagem ou na própria classe da biblioteca.
-
E como instalar o
ReCaptcha\ReCaptcha
? Via composer? 10/08/2017 às 19:09
Segue uma implementação completa do reCaptcha que estou usando em um site que estou desenvolvendo, a única coisa que falta pra funcionar 100% é criar os objetos, mas deixei bem descrito como criá-los, sou apenas estudante então fiz o melhor que pude.
<?php ini_set('display_errors',1); ini_set('display_startup_erros',1); error_reporting(E_ALL); ?><!--Força o php a mostrar todo tipo de erro, linha temporária-->
<?php
function __autoload($class_name){
require_once '../_lib/'.$class_name.'.php';//-->lê minhas classes de forma automática
}
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="_css/login.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<script>
$(document).ready(function() {
$('#send').prop('disabled', true);//desativa o botão enviar
$('.g-recaptcha').hide();//esconde o captcha
validate();
$('#inputEmail, #inputPassword').change(validate);
});
function validate() {
if ($('#inputEmail').val().length > 10) {//enquanto o campo de email nao tiver menos que 10 caracteres, não ativa o reCaptcha
$('.g-recaptcha').show();//exibe o reCaptcha
}else{//se mudar de ideia e reduzir o campo pra menos de 10 caracteres...
$('.g-recaptcha').hide();//o reCaptcha se esconde novmanete
}
}
function enableSend() {
$('#send').prop('disabled', false);//quando o captcha é confirmado, ativa o botao enviar
}
</script>
</head>
<body>
<?php
$helper = new Helpers();//-->objeto com vários métodos importantes
if (isset($_POST['attempt'])){//verifica se tem tentativa restante
$attempt = intval($helper->validation($_POST['attempt']));//validation=método que verifica e escapa minha sring (trim(), stripcslashes() e htmlspecialchars())
}else{
$attempt = 3;//se não for definido número de tentativas, aqui é definido como 3
}
if (isset($_POST['g-recaptcha-response']) and isset($_POST['username']) and isset($_POST['password'])) {//garante que todos os campos foram preenchidos
$captcha_data = $_POST['g-recaptcha-response'];
if ($captcha_data) {//Verificação do reCaptcha
$resposta = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=DIGITE-SUA-CHAVE-SECRETA-GERADA-PELO-GOOGLE-AQUI=" . $captcha_data . "&remoteip=" . $_SERVER['REMOTE_ADDR']);
if ($resposta) {//validação do reCaptcha
$username = strtolower($helper->validation($_POST['username']));
$password = $helper->validation($_POST['password']);
$user = new User();//--->meu objeto que acessa o banco de dados usando PDO
$userValidated = $user->checkPasswordHash($username);//--->método do meu objeto que procura o usuario no bacno de dados (SELECT * FROM tbl_Users WHERE username = $username)
if ($userValidated){//verifica se o email existe, se existir...
if ($userValidated->status == 1){//verifica se a conta está bloqueada ou não
echo 'Essa conta está bloqueada, criar botão para reenviar o email de recuperação...';
}else{
$hash = $userValidated->password;//retorna o hash do password
if (password_verify($password, $hash)) {//compara a senha e o hash que foi criado usando password_hash() e salvo no banco de dados
echo 'Password é válido, inserir código que inicia as sessões e chama a próxima página';//-->insira seu código
} else {//caso o password estjeja errado, perde uma tentativa
if ($attempt != 1){//se a tentativa restante for igual a 1, a proxima vez será direcionado para a página de recuperação de senha
$attempt--;
echo 'Usuário e senha não combinam, você tem mais '.$attempt.' tentativas';//mostra o número de tentativas restante
}else{//bloqueia a conta e chama a página de recuperação de senha
echo 'inserir código que bloqueia a conta e abre pagina de recuperaçao de senha';//-->insira seu código de bloqueio
}
}
}
}else{//se o email não existir, perde uma tentativa mas não avisa se o erro foi no email ou na senha
if ($attempt != 0){
$attempt--;
echo 'Usuário e senha não combinam, você tem mais '.$attempt.' tentativas';//mostra o número de tentativas restante
}else{//bloqueia a conta e chama a página de recuperação de senha
echo 'inserir código que bloqueia a conta e abre pagina de recuperaçao de senha';//-->insira seu código de bloqueio
}
}
} else {
echo "Validação não concluída, tente novamente.";
exit;
}
} else {
echo "Validação não concluída, tente novamente.";
exit;
}
}
?>
<section>
<form class="login" action="login.php" method="post">
<fieldset>
<legend>Login</legend>
<label for="inputEmail" class="Label">Email: </label>
<input id="inputEmail" class="inputText" type="email" maxlength="30" name="username" required>
<label for="inputPassword" class="Label">Password: </label>
<input id="inputPassword" class="inputPassword" type="password" maxlength="20" name="password" required>
<div class="g-recaptcha" data-sitekey="DIGITE-A-CHAVE-DO-SEU-SITE-CRIADA-PELO-GOOGLE-AQUI" data-callback="enableSend"></div><!--Linha que adiciona o recaptcha-->
<input type="hidden" name="attempt" value=<?php echo $attempt ?> /><!--envia por post o numero de tentativas restante-->
<input type="submit" value="Confirmar" id="send" class="send">
</fieldset>
</form>
</section>
</body>
</html>