1

Por exemplo,

Tenho um site em Wordpress, que que o conteúdo seja mostrado somente depois que validar o reCAPTCHA do Google, já procurei vários códigos mas nada me ajudou, alguém pode me dar uma dica ?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Conteudo a ser Bloqueado</title>
  </head>
  <body>
    <h1>Exemplo</h1>
    <p>Conteúdo 01 (quero que isso seja mostrado na pagina somente depois que passar pelo reCAPTCHA do Google)</p>
  </body>
</html>

1

2 Respostas 2

1

Você precisa utilizar uma requisição para enviar o response até seu back-end, valida-lo e retornar um HTML com o valor a ser exibido.

O primeiro passo é criar uma função AJAX. Vamos utilizar a função wp ajax.

No seu arquivo functions.php

<?php

/* Sua chave secreta do Google reCaptcha */
define('RECAPTCHA_SECRET', 'Your-Secret');

/*
 * Adiciona ações para captura via AJAX
 * Para acessa-las basta enviar uma requisição
 * para https://www.YOUR-SITE.com/wp-admin/admin-ajax.php?aciton=nome-da-acao
 */
add_action('wp_ajax_carrega_post', 'carrega_post');
add_action('wp_ajax_nopriv_carrega_post', 'carrega_post');

/*
 * Função responsável por verificar o response do capcha
 * E liberar o conteúdo do POST
 */
function carrega_post() {

    /* Cria um contexto do tipo HTTP POST com o valor do response */
    $context = stream_context_create([
        'http' => [
            'method'  => 'POST',
            'content' => http_build_query([
                'secret'   => RECAPTCHA_SECRET,
                'response' => filter_input(INPUT_POST, 'response', FILTER_SANITIZE_STRING),
            ])
        ]
    ]);

    /* Faz uma requisição do tipo POST para o servidor da Google */
    $result = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify", FILE_BINARY, $context));

    /* Verifica se o valor do captcha é válido */
    if ( $result->success ) {

        /* 
         * Aqui você pode fazer sua regra de 
         * negócio para capturar o que 
         * você deseja
         */

        $post = (new WP_Query( intval($_POST['postID']) ))->posts[0];

        echo "Conteúdo do post \"{$post->post_title}\" liberado";

        wp_die();
    }
}

No seu arquivo single.php ou similar (vai depender da sua estrutura), basta colocar o captcha e adicionar uma forma de conexão. Irei postar com Fetch e XMLHttpRequest, vai fica a seu critério.

<?php
/**
 * Template test
 *
 * @author Valdeir Psr < http://www.valdeirpsr.com.br >
 * @version 1.0
 */

get_header(); ?>

<div id="g-recaptcha"></div>

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback"></script>
<script>
function onloadCallback() {

    /* Cria o captcha na DIV indicada */
    grecaptcha.render('g-recaptcha', {
        'sitekey' : 'Your-Code',
        'callback' : 'verificaCaptcha'
    });
}

/* Função responsável por receber o responseCode e fazer a requisição */
function verificaCaptcha(response) {

    alert("Aguarde...");

    /* Cria um formulário */
    let form = new FormData();
    form.append("response", response);
    form.append("postID", "<?php the_ID(); ?>");

    /* Cria uma requisição no formato POST com os dados acima */
    let request = new Request("<?php echo home_url() ?>/wp-admin/admin-ajax.php?action=carrega_post", {
        method: "POST",
        body: form,
        cache: "no-cache"
    });

    /* Envia a conexão e retorna os dados */
    fetch(request)
        .then( response => {
            return response.text()
        } )
        .then( text => alert(text) );
}
</script>

<?php get_footer();

Exemplo com XMLHttpRequest:

/* Função responsável por receber o responseCode e fazer a requisição */
function verificaCaptcha(response) {

    alert("Aguarde...");

    /* Cria um formulário */
    let form = new FormData();
    form.append("response", response);
    form.append("postID", "<?php the_ID(); ?>");

    let xhr = new XMLHttpRequest();
    xhr.addEventListener("load", result => {
        alert( result.target.response )
    })
    xhr.open("POST", "<?php echo home_url() ?>/wp-admin/admin-ajax.php?action=carrega_post", true);
    xhr.send(form);
}
0

Inclua a parte que você quer bloquear dentro de um if com uma variável que será a resposta do Google reCaptcha:

<?php
if($resposta){
?>
<p>Conteúdo 01 (quero que isso seja mostrado na pagina somente depois que passar pelo reCAPTCHA do Google)</p>
<?php
}
?>

A variável $resposta será o retorno da verificação do reCaptcha (será true caso o reCaptcha tenha sido validado ou false caso não) que será dada pelo seguinte código:

<?php
$resposta = false;
if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
   $captcha_data = $_POST['g-recaptcha-response'];
   $chave_secreta = "CHAVE_SECRETA";   
   $resposta = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$chave_secreta&response=$captcha_data&remoteip=".$_SERVER['REMOTE_ADDR']);
}
?>

Acima é parte do servidor. É preciso também inserir na página a parte cliente em um form. Carregue no <head> a API:

<script src='https://www.google.com/recaptcha/api.js'></script>

O formulário e script para validação client-side:

<form method="post" onsubmit="return validar()">
   <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="CHAVE_DO_SITE"></div>
   <br>
   <button type="submit">Validar</button>
</form>

<script>
googlerecpchk = false;
function recaptchaCallback() {
   googlerecpchk = true;
};

function validar(){

   if(!googlerecpchk){
      alert("reCaptcha inválido!");
      return false;
   }

}
</script>

Juntando tudo, ficaria assim:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Conteudo a ser Bloqueado</title>
    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
    <h1>Exemplo</h1>
   <?php
   $resposta = false;
   if (isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])) {
      $captcha_data = $_POST['g-recaptcha-response'];
      $chave_secreta = "CHAVE_SECRETA";   
      $resposta = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$chave_secreta&response=$captcha_data&remoteip=".$_SERVER['REMOTE_ADDR']);
   }
   if ($resposta) {
   ?>
    <p>Conteúdo 01 (quero que isso seja mostrado na pagina somente depois que passar pelo reCAPTCHA do Google)</p>
    <?php
   }
   ?>

   <?php
   if(!$resposta){
   ?>
   <form method="post" onsubmit="return validar()">
      <div class="g-recaptcha" data-callback="recaptchaCallback" data-sitekey="CHAVE_DO_SITE"></div>
      <br>
      <button type="submit">Validar</button>
   </form>
   <script>
   googlerecpchk = false;
   function recaptchaCallback() {
      googlerecpchk = true;
   };

   function validar(){

      console.log(googlerecpchk);
      if(!googlerecpchk){
         alert("reCaptcha inválido!");
         return false;
      }

   }
   </script>
    <?php
   }
   ?>

  </body>
</html>
5
  • Ótimo, mas como fazer desaparecer o Formulario, e recaptcha depois de ser validado ? Ele valida.. mostra.. mas depois do conteúdo mostrado, continua mostrando o recaptcha logo abaixo... 27/02/2018 às 1:46
  • Mesma coisa: coloca dentro de um if (!$resposta) {, ou seja, quando $resposta for false.
    – Meu ovo
    27/02/2018 às 2:06
  • Pode me informar como fazer isso ? Não dei conta... 27/02/2018 às 2:12
  • Atualizei a resposta. Dá uma olhadinha.
    – Meu ovo
    27/02/2018 às 2:15
  • Muito obrigado !! Me Ajudou com oque eu quis ! 27/02/2018 às 2:32

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .