02/07/2020
Saiba como colocar reCAPTCHA do Google em Formulário PHP com retorno em AJAX
Introdução ao reCAPTCHA
O reCAPTCHA é uma 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.
Adicionar o reCAPTCHA no formulário PHP com retorno AJAX
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 "My reCAPTCHA": https://www.google.com/recaptcha/intro/v3beta.html
Faça o login como pede para ter acesso a criação do seu primeiro reCAPTCHA, informe os domínios que você deseja permitir e escolha o tipo de reCAPTCHA v2 e clique em "Register".
Após ter cadastrado seu site, você terá em mãos duas informações importantes: o site key e o secret key. 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?hl=pt-BR'></script>
Organizando os arquivos Bom, separei tudo em 7 arquivos e cada um tem as respectivas funções:
_config.php => Responsável para definirmos as configurações do reCAPTCHA e Servidor de e-mail
_form.js => Manipula eventos do formulário e Ajax
_form.ajax.php => Coração do nosso formulário, esse cara é responsável pelo formulário funcionar
_form.css => Na web ter estilo é indispensável, e claro que vamos dar aquela estilizada em nosso formulário
index.php => Exibição do formulário na página
obrigado.php => Exibe mensagem de sucesso ao enviar formulário (Ideal para métricas)
.htaccess => Manupula acesso ao projeto
Também criamos a pasta Library onde ficará a biblioteca PHPMailer para dispararmos os e-mails.
Construindo o Formulário
Nosso formulário completo ficou da seguinte forma.
.htacess
RewriteEngine On
Options All -Indexes
#URL Rewrite
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteRule ^(.*)$ index.php?url=$1
_config.php
<?php
//Definindo Website
define("SITE", "https://localhost/form_recaptcha"); //Informe a URL do seu projeto
//Definindo Configurações do Servidor de E-mail
define("WC_MAIL_HOST", ""); //URL do host SMTP
define("WC_MAIL_PORT", ""); //Porta de saída do servidor de e-mail
define("WC_MAIL_USER", ""); //Email: Resposável por enviar e receber contatos
define("WC_MAIL_PASS", ""); //Senha do e-mail
define("WC_MAIL_SENDER", ""); //Nome da sua empresa
//Definindo Site key e secret key fornecido pelo Google
define("reCAPTCHA_SITEKEY", ""); //Site key
define("reCAPTCHA_SECRETKEY", ""); //Secret key
As defines reCAPTCHA_SITEKEY e reCAPTCHA_SECRETKEY são as chaves que você pegou no primeiro passo do tutorial.
index.php
<?php
//CHAMA DEFINIÇÕES
require '_config.php';
?>
<!DOCTYPE html>
<html lang="pt-br" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=0">
<title>reCAPTCHA em Formulário</title>
<link rel="base" href="<?= SITE; ?>"/>
<!-- DEFINE ESTILO DA PÁGINA -->
<link rel="stylesheet" href="_form.css">
<!-- RECAPTCHA API -->
<script src='https://www.google.com/recaptcha/api.js?hl=pt-BR'></script>
</head>
<body>
<div class="wrapper">
<div class="form_erro"></div>
<form name="contactForm" class="form-contact" action="" method="post" enctype="">
<h1>Formulário de Contato com reCAPTCHA</h1>
<label>
<legend>Seu nome</legend>
<input type="text" name="nome" placeholder="Seu nome" required="required"/>
</label>
<label>
<legend>E-mail</legend>
<input type="text" name="email" placeholder="[email protected]" required="required"/>
</label>
<label>
<legend>Assunto</legend>
<input type="text" name="assunto" placeholder="Motivo do contato" required="required"/>
</label>
<label>
<legend>Mensagem</legend>
<textarea name="mensagem" rows="10" placeholder="Escreva aqui sua mensagem" required="required"></textarea>
</label>
<div class="g-recaptcha" data-sitekey="<?= reCAPTCHA_SITEKEY; ?>"></div>
<button>Enviar contato</button>
</form>
</div>
<!-- SCRIPT JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="_form.js"></script>
</body>
</html>
O name "contactForm" do formulário ficará responsável para chamar o JS que enviar as informações para o AJAX.
_form.css
body{
font-family: Arial, sans-serif;
font-size: 16px;
background: #2d3755; /* defino cor do fundo do documento */
color: #fff;
}
.wrapper{
max-width: 90%;
width: 1140px;
margin: 0 auto;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
flex-wrap: wrap;
}
.form_erro{
width: 60%;
background: #f48720;
display: none;
}
.form_erro p{
padding: 0 10px;
}
.form-contact{
width: 60%;
position: relative;
border-radius: 3px;
}
.form-contact label{
margin-bottom: 20px;
display: block;
width: 100%;
position: relative;
}
.form-contact input,
.form-contact textarea{
position: relative;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
width: 96%;
outline: 0;
font-size: 16px;
display: block;
}
.form-contact label legend{
text-transform: uppercase;
font-size: 14px;
margin-bottom: 5px;
opacity: 0.6;
letter-spacing: 1px;
}
.form-contact .g-recaptcha{
margin-bottom: 20px;
}
.form-contact button{
padding: 15px;
width: 100%;
background: #dc872f;
border: 0;
color: #fff;
font-size: 22px;
text-transform: uppercase;
letter-spacing: 1px;
display: block;
cursor: pointer;
border-radius: 3px;
}
.form-contact button:hover{
background: #f48720;
}
/*BASE::LOAD*/
.wc_load{position: fixed; display: none; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); text-align: center; color: #fff; z-index: 9999;}
.wc_load_content{display: inline-block; margin: auto;}
.wc_load_content_msg{ font-size: 0.8em; font-weight: 500; text-transform: uppercase; text-shadow: 1px 1px #000; margin-top: 15px;}
_form.js
SITE = $("link[rel='base']").attr("href");
$(function () {
$("body").on("submit", "form[name='contactForm']", function (e) {
var recaptchaForm = $(this);
e.preventDefault();
e.stopPropagation();
iniciaLoad(); //ABRE LOAD
var FormData = "callback_action=contactForm&" + $(this).serialize();
$.post(SITE + '/_form.ajax.php', FormData, function (data) {
//TRATA ERRO
if (data.form_erro) {
$('.form_erro').html(data.form_erro).fadeIn();
} else {
$('form_erro').fadeOut();
}
//REDIRECIONA SE TUDO OK
if (data.redirecionar) {
window.location.href = data.redirecionar;
}
$('.wc_load').remove();
}, 'json');
});
//INICIA LOAD AO SUBMETER
function iniciaLoad() {
if (!$('.jwc_load').length) {
$("body").append('<div class="wc_load jwc_load"><div class="wc_load_content"><img src="' + SITE + '/images/load_w.svg"/><p class="wc_load_content_msg">Aguarde, enviando solicitação!</p></div></div>');
$('.jwc_load').fadeIn().css('display', 'flex');
}
}
});
_form.ajax.php
<?php
$getForm = filter_input_array(INPUT_POST, FILTER_DEFAULT);
if (empty($getForm) || empty($getForm['callback_action'])):
die('Acesso Negado!');
endif;
$strPost = array_map('strip_tags', $getForm);
$POST = array_map('trim', $getForm);
$Callback = $POST['callback_action'];
$jSON = null;
unset($POST['callback_action']);
usleep(2000);
//CHAMA DEFINIÇÕES
require '_config.php';
switch ($Callback):
case "contactForm":
//Defino a Chave do meu site
$SecretKey = reCAPTCHA_SECRETKEY;
//Pego a validação do Captcha feita pelo usuário
if (isset($POST['g-recaptcha-response'])):
$ValidaCaptcha = $POST['g-recaptcha-response'];
endif;
// Verifico se foi feita a postagem do Captcha
if (isset($ValidaCaptcha)):
// Valido se a ação do usuário foi correta junto ao google
$RetornaCaptcha = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . $SecretKey . '&response=' . $POST['g-recaptcha-response']));
// Se a ação do usuário foi correta executo o restante do meu formulário
if ($RetornaCaptcha->success):
if (!filter_var($POST['email'], FILTER_VALIDATE_EMAIL)):
$jSON['form_erro'] = "<p>E-mail inválido. Favor informar um e-mail válido!</p>";
else:
require_once("Library/PHPMailer/src/PHPMailer.php");
require_once("Library/PHPMailer/src/SMTP.php");
// Inicia a classe PHPMailer
$Mail = new \PHPMailer\PHPMailer\PHPMailer;
$Mail->IsSMTP(); // Define que a mensagem será SMTP
try {
$Mail->CharSet = "UTF-8";
$Mail->Host = WC_MAIL_HOST;
$Mail->SMTPAuth = true; // Usar autenticação SMTP
$Mail->Port = WC_MAIL_PORT;
$Mail->Username = WC_MAIL_USER;
$Mail->Password = WC_MAIL_PASS;
//Define o remetente
$Mail->SetFrom($POST['email'], $POST['nome']);
$Mail->AddReplyTo($POST['email'], $POST['nome']);
$Mail->Subject = $POST['assunto']; //Assunto do e-mail
//Define os destinatário(s)
$Mail->AddAddress(WC_MAIL_USER, WC_MAIL_SENDER);
//Campos abaixo são opcionais
//$Mail->AddCC('[email protected]', 'Destinatario'); // Copia
//$Mail->AddBCC('[email protected]', 'Destinatario2`'); // Cópia Oculta
//$Mail->AddAttachment('images/phpmailer.gif'); // Adicionar um anexo
//Define o corpo do email
$Mail->MsgHTML($POST['mensagem']);
////Caso queira colocar o conteudo de um arquivo utilize o método abaixo ao invés da mensagem no corpo do e-mail.
//$Mail->MsgHTML(file_get_contents('arquivo.html'));
$Mail->Send();
$jSON['redirecionar'] = SITE . "/obrigado.php";
//caso apresente algum erro é apresentado abaixo com essa exceção.
} catch (phpmailerException $e) {
$jSON['form_erro'] = "<p>" . $e->errorMessage() . "</p>"; //Mensagem de erro costumizada do PHPMailer
}
endif;
else:
$jSON['form_erro'] = '<p>Por favor faça a verificação do captcha!</p>';
endif;
endif;
break;
endswitch;
if ($jSON):
echo json_encode($jSON);
endif;
Como dito, esse é o cara responsável por todos os retornos e envio do formulário, deixei tudo comentado as validações feitas nele para que você possa pegar a lógica e aplicar em outros formulários que quiser implementar.
Espero ter lhe ajudado com mais essa super dica e até o nosso próximo post!
Deixe um comentário