Sending and validating form with reCAPTCHA and Ajax

Question

I am implementing on my website in the contact part a reCAPTCHA and the same already appears on the page correctly, but use Ajax for the sending and validation of the information and then began what I consider a problem, I saw in this post that the script sends via post a value provided by reCAPTCHA, but how can I pass this value by Ajax and validate and input data into my Banco de Dados?

What I have is this at the time of sending the information:

    jQuery(document).ready(function() {
    $("#submit_btn").on("click", function(event) {  

        var nome     = $("#nomeCont").val();
        var telefone = $("#telefone").val();
        var email    = $("#emailCont").val();
        var cidade   = $("#cidade").val();
        var uf       = $("#uf").val();
        var assunto  = $("#assunto").val();         
        var mensagem = $("#mensagem").val();
        var gRecaptchaResponse = grecaptcha.getResponse()

        $.ajax({
            type: "POST",
            url: "processo.php",
            dataType: "json",
            beforeSend: function() {
                $(".resposta").html('enviando...');
            },
            data: {
                'nome': nome,
                'telefone': telefone,
                'email': email,                     
                'cidade': cidade,
                'uf': uf,
                'assunto': assunto,
                'mensagem': mensagem,
                'g-recaptcha-response': gRecaptchaResponse
            },
            success: function(json) {
                if (json.tipo == "0") { // erro
                    $(".resposta").html("<span class='erro'>" + json.msg + "</span>");
                } else { // sucesso
                    $(".resposta").html("<span class='sucesso'>" + json.msg + "</span>");
                    cleanFields();
                }
            }
        });

    event.preventDefault();

    });

    function clean() {
        $(".resposta").html("");
    }       
});

My form looks like this:

    <div class="resposta"></div>
        <form name="contactForm" id="contact-form" class="contact-form" method="post" action="processo.php">
          <fieldset>
            <div class="form-group">
              <div class="bg-warning form-alert"></div>
              <input class="form-control" id="nomeCont" type="text" placeholder="NOME" />
            </div>
            <div class="form-group">
              <div class="bg-warning form-alert"></div>
              <input class="form-control" id="telefone" type="text" placeholder="TELEFONE" />
            </div>
            <div class="form-group">
              <div class="bg-warning form-alert"></div>
              <input class="form-control" id="emailCont" type="text" placeholder="E-MAIL" />
            </div>
            <div class="form-group">
              <div class="bg-warning form-alert"></div>
              <input class="form-control" id="cidade" type="text" placeholder="CIDADE" />
            </div>
            <div class="form-group">
              <div class="bg-warning form-alert"></div>
              <input class="form-control" id="uf" type="text" placeholder="UF" />
            </div>
            <div class="form-group">
              <div class="bg-warning form-alert"></div>
              <input class="form-control" id="assunto" type="text" placeholder="ASSUNTO" />
            </div>
            <div class="form-group">
              <textarea class="form-control" id="mensagem" placeholder="MENSAGEM"></textarea>
            </div>

            <div class="g-recaptcha" data-sitekey="MinhaChave"></div>                
            <br>
            <button type="submit" class="btn btn-primary" id="submit_btn">Enviar</button>
          </fieldset>
        </form>
      </div>

The page that processes the information and writes to the Database is like this:

/*----------------------------------------
    OPERAÇÃO - INSERIR 
-----------------------------------------*/

    $nome = $_POST['nome'];
    $telefone = $_POST['telefone'];
    $email = $_POST['email'];   
    $cidade = $_POST['cidade'];
    $uf = $_POST['uf'];
    $assunto = $_POST['assunto'];
    $mensagem = nl2br($_POST['mensagem']);      

    // VALIDAÇÃO DOS DADOS
    if ($nome == "") {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, informe seu nome.";    
        header('Content-Type: application/json');
        echo json_encode($arr);
        exit;                       
    }

    if ($telefone == "") {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, informe seu telefone.";
        header('Content-Type: application/json');
        echo json_encode($arr);
        exit;                   
    }   

    if ($email == "") {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, informe seu e-mail.";
        header('Content-Type: application/json');
        echo json_encode($arr);
        exit;                       
    }       

    if ($cidade == "") {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, informe sua cidade.";
        header('Content-Type: application/json');
        echo json_encode($arr);
        exit;                   
    }   
    if ($uf == "") {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, informe sua UF.";
        header('Content-Type: application/json');
        echo json_encode($arr);
        exit;                   
    }   
    if ($assunto == "") {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, informe um assunto.";
        header('Content-Type: application/json');
        echo json_encode($arr);
        exit;                   
    }   
    if ($mensagem == "") {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, informe uma mensagem.";    
        header('Content-Type: application/json');
        echo json_encode($arr);
        exit;               
    }   

    // VALIDAÇÃO DO E-MAIL  
    $valida = $email;
    $expresao = "/^[^0-9][A-z0-9_]+([.][A-z0-9_]+)*[@][A-z0-9_]+([.][A-z0-9_]+)*[.][A-z]{2,4}$/";

    // RETORNO DOS DADOS
    if(!preg_match($expresao, $valida)) {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, informe um e-mail válido.";    
        header('Content-Type: application/json');
        echo json_encode($arr);
        exit;
    }   

    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) {
        $arr["tipo"] = "1";
        $arr["msg"] = "Erro: Por favor, confirme o captcha.";  
        exit;
    }

    $resposta = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=MinhaChave&response=".$captcha_data."&remoteip=".$_SERVER['REMOTE_ADDR']);    

    if ($resposta.success) {

        // INSERINDO NO BANCO DE DADOS
        mysql_select_db($database_conexao, $pcon);
        $sql = "INSERT INTO contato (nome, telefone, email, cidade, uf, assunto, mensagem) VALUES ('$nome', '$telefone', '$email', '$cidade', '$uf', '$assunto', '$mensagem')";
        $query = @mysql_query($sql,$pcon);

        if ($query) {
            $arr["msg"] = "Registro inserido com sucesso.";

            // ENVIANDO E-MAIL PARA ADMINISTRADOR
            include('email-notificacao.php');

        } else {
            $arr["tipo"] = "1";
            $arr["msg"] = "Erro: " . $sql . "
" . mysql_error($pcon);        
        }

    } else {
            $arr["tipo"] = "1";
            $arr["msg"] = "Erro: Usuário mal intencionado detectado. A mensagem não foi enviada."; 
    }

    // FECHA CONEXÃO COM BD
    mysql_close($pcon);

    // RETORNAR STATUS - MENSAGEM DA EXECUÇÃO
    header('Content-Type: application/json');
    echo json_encode($arr);

But as I said, it’s not working, without the captcha the sending of the information works perfectly.

Answer 1

To perform the reCaptcha validation via Ajax you need to send a POST to https://www.google.com/recaptcha/api/siteverify in order to measure the resolution. In your processo.php validates the captcha response in a similar way to this:

$data = array(
    'secret' => RECAPTCHA_SECRET_KEY, // A sua chave
    'response' => filter_input(INPUT_POST, 'g-recaptcha-response'),
    'remoteip' => filter_input(INPUT_SERVER, 'REMOTE_ADDR')
);

$ch = curl_init('https://www.google.com/recaptcha/api/siteverify');

curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$response = curl_exec ($ch);

curl_close ($ch);
$body = json_decode($response, true);

print_r($body['success']);

If the response of $body['success'] for true is that it has been successfully solved, otherwise with error (may have expired or unresolved).