Como adicionar o reCaptcha em formulário de contato do WordPress sem plugins

Vamos ver como podemos adicionar o reCaptcha a um formulário personalizado do WordPress sem plug-ins, ou seja, em um desenvolvimento de site personalizado. Para instalar a versão mais recente do reCaptcha do google (o “Eu não sou um robô”), você precisa ter uma conta do google e acessar o Google reCaptcha.

Depois de registrado, você acessa o painel de administração do site, onde são exibidas três opções:

Chaves: chave do site e chave secreta
Etapa 1: migração do lado do cliente
Etapa 2: migração do lado do servidor
 

Vamos criar um formulário simples com um campo Nome para mostrar em um exemplo prático como adicionar o Google reCaptcha:

<form id="contact-form" name="contact-form" action="<?php echo get_permalink();?>#contact-form" method="post">
<?php //Verificamos se o formulário foi enviado
if (isset( $_POST['btn-submit'] )) {
//Criamos uma variável para armazenar os erros
global $reg_errors;
$reg_errors = new WP_Error;

// Coletamos nas variáveis ​​os dados enviados no formulário e os higienizamos.
// Se detectarmos algum erro, poderemos preencher os campos do formulário com os dados enviados, para que não tenhamos que iniciar o formulário do zero
$f_name = sanitize_text_field($_POST['f_name']);

//O campo Nome é obrigatório, verificamos se não está vazio e, caso contrário, criamos um log de erros
if ( empty( $f_name ) ) {
$reg_errors->add("empty-name", "O campo nome é obrigatório");
}
//Verificamos o recaptcha
$response = wp_remote_post( "https://www.google.com/recaptcha/api/siteverify", array(
'method' => 'POST',
'timeout' => 45,
'redirection' => 5,
'httpversion' => '1.0',
'blocking' => true,
'headers' => array(),
'body' => array(
'secret' => "sua-chave-secreta",
'response' => esc_attr($_POST['g-recaptcha-response'])),
'cookies' => array()
)
);

//Verificamos se há algum tipo de erro na conexão com o google
if ( is_wp_error( $response ) ) {
$reg_errors->add( "invalid-captcha", "Ocorreu um erro ao verificar o captcha" );
} else {
//Se nos conectamos com sucesso ao google, verificamos se a resposta é verdadeira ou falsa
$g_response = json_decode($response["body"]);
if ($g_response->success == false) {
$reg_errors->add( "invalid-captcha", "Ocorreu um erro ao verificar o captcha" );
}
}
}?>

<div class="form-group">
<label for="f_name">Nome <span class="asterisk">*</span></label>
<input type="text" id="f_name" name="f_name" class="form-control" value="<?php echo $f_name;?>" placeholder="Escreva seu nome completo" required aria-required="true">

<?php //Verificamos erros na validação do campo Nome
if ( is_wp_error( $reg_errors ) ) {
if ($reg_errors->get_error_message("empty-name")) {?>
<br class="clearfix" />
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
<p><?php echo $reg_errors->get_error_message("empty-name");?></p>
</div>
<?php }
}?>
</div>

<div class="form-group">
<div class="g-recaptcha" data-sitekey="sua-chave-secreta-do-site"></div>
</div>

<button type="submit" id="btn-submit" name="btn-submit" class="btn btn-default">Enviar</button>
</form>

Depois que o JS for adicionado à API, para pintar o botão, você só precisará colar o fragmento com a chave do site (essas informações podem ser obtidas na etapa 1 do painel reCaptcha):

Com isso, já podemos visualizar o código reCaptcha em nosso formulário. Para processar os dados no servidor, é necessário fazer uma solicitação para https://www.google.com/recaptcha/api/siteverify e enviar nossa resposta pelo POST para validá-los.

Como vemos no código, nos conectamos ao google usando a função wp_remote_post () e POSTAMOS a variável g-recaptcha-response, ou seja, a resposta que escolhemos na recaptcha. Primeiro, validamos se a resposta com o google está correta ou não e, em caso afirmativo, verificamos a resposta no google. Ele retornará um json com dois dados: sucesso e códigos de erro. O sucesso é verdadeiro ou falso, portanto, saberemos se o reCaptcha que inserimos é bom ou não. Também receberemos um código de erro se algum dos parâmetros de configuração estiver errado, o que pode ser:

Missing-input-secret: parâmetro de chave secreta não encontrado
Invalid-input-secret: o parâmetro da chave secreta está incorreto
missing-input-response: o parâmetro de resposta não foi encontrado
invalid-input-response: o parâmetro de resposta está incorreto