Google Recaptcha V3 - Param não resgata

marcelocardoso · Abril 24, 2020

olá colegas.

depois de tanto quebrar a cabeça com o RECAPTCHA do google, v3.
não estou conseguindo resgatar o ID do INPUT hidden que guarda o TOKEN!!!!

Segue código
HTML

<!DOCTYPE html>
<html lang="pt_BR">

    <head>
        <meta charset="utf-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <title>Google Recaptcha - v3</title>

        <!-- STYLES CSS -->
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/inputmask@3.3.11/css/inputmask.min.css">
        <!-- STYLES CSS -->

        <!-- SCRIPTS JS -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-form@4.2.2/dist/jquery.form.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/localization/messages_pt_BR.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>
        <!-- SCRIPTS JS -->

        <!-- SCRIPTS RECAPTCHA - SITE KEY -->
        <script src="https://www.google.com/recaptcha/api.js?render=6LesQewUAAAAAIWQKRKk19yob6G8hx3LEoYXybIC"></script>
        <!-- SCRIPTS RECAPTCHA - SITE KEY -->

        <style type="text/css">
            *:focus {
                outline: none !important;
            }

            html,
            body {
                height: 100%;
                width: 100%;
            }

            body {
                color: darkgrey;
                margin: 60px 0px;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* google captcha - hidden na tela */
            .grecaptcha-badge {
                display: none !important;
            }

            .valid-class {
                color: #006400;
                padding-left: 12px;
                padding-top: 3px;
                font-size: 15px;
                display: block;
            }

            .error-class {
                color: #e33d00;
                padding-left: 12px;
                padding-top: 3px;
                font-size: 15px;
                display: block;
            }

            .loading {
                position: fixed;
                left: 0px;
                top: 0px;
                margin: 0px;
                width: 100%;
                height: 100%;
                display: block;
                z-index: 999999;
                opacity: 0.92;
                -moz-opacity: 0.92;
                filter: alpha(opacity=98);
                background-color: #00224b;
                background-image: url("img/loading.gif");
                background-repeat: no-repeat;
                background-position: 50% 50%;
                text-align: center;
                overflow: hidden;
                font-weight: bold;
                font-size: 25px;
                color: white;
                padding-top: 25%;
            }

        </style>
    </head>

    <body>


        <!-- code | formulario -->
        <section class="container-fluid">
            <h1 class="text-center">RECAPTCHA</h1>
            <h4 class="text-center">GOOGLE v3</h4>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <form id="frm_form_contato" method="post" action="inc/google-form.asp">
                    <div class="form-group">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_nome">Nome</label>
                            <input type="text" id="campo_nome" name="campo_nome" class="form-control" autocomplete="name" placeholder="Digite seu nome">
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_email">Email</label>
                            <input type="text" id="campo_email" name="campo_email" class="form-control" autocomplete="email" placeholder="Digite seu e-mail">
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_mensagem">Mensagem</label>
                            <textarea type="text" id="campo_mensagem" name="campo_mensagem" class="form-control" placeholder="Descreva sua mensagem"></textarea>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-4">
                            <div id="contato_retorno"></div>
                            <button id="btn-form" type="submit" class="btn btn-block btn-md btn-success">ENVIAR</button>
                        </div>
                    </div>

                    <input type="hidden" id="token">
                </form>
            </div>
            <div id="contato_carregando"></div>
        </section>
        <!-- code | formulario -->





        <!-- GOOGLE reCAPTCHA -->
        <script type="text/javascript">
            "use strict";

            //formulario de validacao
            $("#frm_form_contato").validate({
                errorClass: "error-class",
                validClass: "valid-class",

                onkeyup: function (element) {
                    this.element(element);
                },

                onfocusout: function (element) {
                    this.element(element);
                },

                rules: {
                    campo_nome: {
                        required: true,
                        minlength: 5,
                        maxlength: 50
                    },

                    campo_email: {
                        required: true,
                        minlength: 5,
                        email: true
                    },

                    campo_mensagem: {
                        required: true,
                        minlength: 5,
                        maxlength: 5000
                    }
                },

                submitHandler: function (form) {
                    grecaptcha.ready(function () {
                        grecaptcha.execute('6LesQewUAAAAAIWQKRKk19yob6G8hx3LEoYXybIC', {
                            action: 'homepage'
                        }).then(function (token) {
                            $("input#token").attr({
                                "value": "" + token + ""
                            });
                        });
                    });

                    // A) resgatar variaveis (uma por uma)
                    var form_url = $(this).attr("action");
                    var form_method = $(this).attr("method");
                    var form_token = $(this).find('input[name="token"]').val();
                    var form_nome = $(this).find('input[name="campo_nome"]').val();
                    var form_email = $(this).find('input[name="campo_email"]').val();
                    var form_telefone = $(this).find('input[name="campo_telefone"]').val();
                    var form_mensagem = $(this).find('input[name="campo_mensagem"]').val();

                    // B) resgatar variaveis (tudo de uma vez)
                    // var form_data = $("#frm_form_contato").serializeArray();

                    var form_data = {
                        'campo_nome': $("#campo_nome").val(),
                        'campo_email': $("#campo_email").val(),
                        'campo_mensagem': $("#campo_mensagem").val(),
                        'campo_token': $("#token").val(),
                    };


                    // ENVIAR FORM com POST
                    // $("form").submit(function (e) {
                    //     e.preventDefault();
                    //     var $form = $(this);
                    //     $.post($form.attr("action"), $form.serialize()).then(function () {});
                    // });


                    //ENVIAR FORM com AJAX
                    $.ajax({
                        url: $("#frm_form_contato").attr("action"),
                        type: $("#frm_form_contato").attr("method"),
                        data: JSON.stringify(form_data),
                        dataType: 'json',
                        contentType: 'application/json; utf-8',

                        //loading antes do sucesso e do envio
                        beforeSend: function () {
                            $("#btn-form").prop("disabled", false).text('Enviando ...').fadeIn();
                            $("#contato_carregando").html("<div class='loading'></div>").fadeIn(500);
                        },

                        //se houver sucesso
                        success: function (response) {
                            setTimeout(function () {
                                $("#contato_carregando").fadeOut(250);
                            }, 3950);

                            setTimeout(function () {
                                $("#contato_retorno").html("<div class='valida_a_certo'>" + response + "</div>").fadeIn(500);
                            }, 4000);

                            setTimeout(function () {
                                $("#contato_retorno").fadeOut(500);
                                $("#btn-form").prop("disabled", false).text('Enviado');
                                $(form)[0].reset();
                            }, 10000);
                        },

                        //se houver sucesso, finaliza
                        complete: function (response) {
                            $('body').fadeTo(4000, '1');
                        },

                        //se houver erro
                        error: function (response) {
                            setTimeout(function () {
                                $("#contato_retorno").html("<div class='valida_a_erro'>" + response + "</div>").fadeIn(500);
                            }, 4000);

                            setTimeout(function () {
                                $("#contato_retorno").fadeOut(500);
                                $(form)[0].reset();
                            }, 10000);
                        },
                    });
                    return false;
                }
            });

        </script>

        <!-- SCRIPTS RODAPE -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/inputmask@3.3.11/dist/jquery.inputmask.bundle.js"></script>
        <!-- SCRIPTS RODAPE -->

    </body>

</html>

BACKEND - ASP
não estou conseguindo repassar o TOKEN para cá, já tentei de várias formas...
mas não consigo nem com REQUEST.QUERYSTRING, REQUEST e nem REQUEST.FORM.

<%
   Response.LCID = 1033 'USA LCID
IF Request.ServerVariables("SERVER_NAME") <> Request.ServerVariables("SERVER_NAME") THEN
   Response.Write "ACESSO RESTRITO!"
ELSE

   G_TOKEN      = Request.Form("campo_token")                                 'google token
   G_KEY_URL    = "https://www.google.com/recaptcha/api/siteverify?secret="   'google url
   G_KEY_SITE   = ""                  'google chave do site
   G_KEY_SECRET = ""                  'google chave secreta

   IF Request.ServerVariables("REQUEST_METHOD") = "POST" THEN
      SET objXML = Server.CreateObject("MSXML2.ServerXMLHTTP")
          objXML.Open "GET", ""& G_KEY_URL & G_KEY_SECRET &"&response=" & G_TOKEN & "", false
          objXML.Send
      
         IF InStr(objXML.ResponseText, "TRUE") THEN
            campo_nome      = Request.Form("campo_nome")
            campo_email     = Request.Form("campo_email")
            campo_mensagem  = Replace(Request.Form("campo_mensagem"), Chr(13), "<br>") 

                 cdoSERVER  = "mail.teste.com.br"
                 cdoORIGEM  = "teste@teste.com.br"
                 cdoPASS    = "senha"
                 cdoPORT    = 587
                 cdoTIMEOUT = 120
                 cdoUSING   = 2
                 cdoAUT     = 1
                 cdoSSL     = 0

                 cdoDE      =  campo_nome &" <"& campo_email &">"
                 cdoPARA    = "teste@teste.com.br"
                 cdoASSUNTO = "teste - contato"
                 cdoTEXT    = "Envio de mensagem usando CDOSYS"

            SET objCDOSYSmail = Server.CreateObject("cdo.message")
            SET objCDOSYScon  = Server.CreateObject("cdo.configuration")

                objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserverport")          = cdoPORT
                objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendusing")               = cdoUSING
                objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate")        = cdoAUT
                objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout")   = cdoTIMEOUT
                objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpusessl")              = cdoSSL
                objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserver")              = cdoSERVER
                objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendusername")            = cdoORIGEM
                objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendpassword")            = cdoPASS
                objCDOSYScon.Fields.Update

            SET objCDOSYSmail.Configuration    = objCDOSYScon
                objCDOSYSmail.From             = cdoORIGEM
                objCDOSYSmail.To               = cdoPARA
                objCDOSYSmail.Subject          = cdoASSUNTO
                objCDOSYSmail.TextBody         = cdoTEXT

                  ON ERROR RESUME NEXT
                     IF objCDOSYSmail.SEND = "" THEN 
                        Response.Write "Mensagem enviada com sucesso!"
                     ELSE
                        IF NOT ERR.NUMBER = "0" THEN
                              Response.Write "Não foi possível enviar a mensagem!"
                              Response.Write "OCORREU UM ERRO: " & Err.Number & " | " & Err.Description
                           Err.Clear()
                        END IF
                     END IF
                  ON ERROR GOTO 0

            SET objCDOSYSmail = Nothing 
            SET objCDOSYScon  = Nothing

         ELSE
            Response.Write "recaptcha errado!"
         END IF

      SET objXML = Nothing
   END IF

END IF
%>

Quem tiver tempo, e quiser dar uma olhada, só falta isso para finalizar o código, PASSAR o bendito parametro que não consigo do input para o ASP.
No demais, agradeço.
Até....

marcelocardoso · Abril 30, 2020

Após 4 dias de quebra-cabeça, consegui finalizar o script....
Quem tá sofrendo, e precisar, segue exemplo completo em ASP, mas podendo ser adaptável para PHP ou qualquer outra linguagem.

HTML:

<!DOCTYPE html>
<html lang="pt_BR">

    <head>
        <meta charset="utf-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <title>Google Recaptcha - v3</title>

        <!-- STYLES CSS -->
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/inputmask@3.3.11/css/inputmask.min.css">
        <!-- STYLES CSS -->

        <!-- SCRIPTS JS -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-form@4.2.2/dist/jquery.form.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/localization/messages_pt_BR.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>
        <!-- SCRIPTS JS -->

        <!-- SCRIPTS RECAPTCHA - SITE KEY -->
        <script src="https://www.google.com/recaptcha/api.js?render=6LesKRKk19yob6G8hx3LEoYXybIC"></script>
        <!-- SCRIPTS RECAPTCHA - SITE KEY -->

        <style type="text/css">
            *:focus {
                outline: none !important;
            }

            html,
            body {
                height: 100%;
                width: 100%;
            }

            body {
                color: darkgrey;
                margin: 60px 0px;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* google captcha - hidden na tela */
            .grecaptcha-badge {
                /* display: none !important; */
                visibility: hidden !important;
            }

            /* google captcha - exibe somente na página contato */
            #frm-contato .grecaptcha-badge {
                visibility: visible !important;
            }

            .grecaptcha-badge {
                width: 0 !important;
            }

            .grecaptcha-badge.show {
                width: 256px !important;
            }

            .grecaptcha-badge {
                display: flex;
                justify-content: flex-end;
                overflow: hidden;
                width: 70px;
                height: 60px;
                margin: 0 auto;
                box-shadow: 0 0 4px #ddd;
                transition: linear 100ms width;
            }

            .grecaptcha-badge:hover {
                width: 256px;
            }

            .grecaptcha-badge-small {
                font-size: 9px;
                color: darkgray;
                text-align: center;
            }

            .valid-class {
                color: #006400;
                padding-left: 12px;
                padding-top: 3px;
                font-size: 15px;
                display: block;
            }

            .error-class {
                color: #e33d00;
                padding-left: 12px;
                padding-top: 3px;
                font-size: 15px;
                display: block;
            }

            .loading {
                position: fixed;
                left: 0px;
                top: 0px;
                margin: 0px;
                width: 100%;
                height: 100%;
                display: block;
                z-index: 999999;
                opacity: 0.92;
                -moz-opacity: 0.92;
                filter: alpha(opacity=98);
                background-color: #00224b;
                background-image: url("img/loading.gif");
                background-repeat: no-repeat;
                background-position: 50% 50%;
                text-align: center;
                overflow: hidden;
                font-weight: bold;
                font-size: 25px;
                color: white;
                padding-top: 25%;
            }

        </style>
    </head>

    <body>


        <!-- code | formulario -->
        <section id="frm-contato" class="container-fluid">
            <h1 class="text-center">RECAPTCHA</h1>
            <h4 class="text-center">GOOGLE v3</h4>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <form id="form_contato" method="post" action="inc/recaptcha.asp">
                    <div class="form-group">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_nome">Nome</label>
                            <input type="text" id="campo_nome" name="campo_nome" class="form-control" autocomplete="name" placeholder="Digite seu nome">
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_email">Email</label>
                            <input type="text" id="campo_email" name="campo_email" class="form-control" autocomplete="email" placeholder="Digite seu e-mail">
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_mensagem">Mensagem</label>
                            <textarea type="text" id="campo_mensagem" name="campo_mensagem" class="form-control" placeholder="Descreva sua mensagem"></textarea>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-4">
                            <div id="contato_retorno"></div>
                            <button id="btn-form" type="submit" class="btn btn-block btn-md btn-success">ENVIAR</button>
                        </div>
                    </div>

                    <input type="hidden" id="g-recaptcha-response">
                    <input type="hidden" id="action" value="validate_captcha">

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 grecaptcha-badge-small p-4">
                        Este site é protegido pelo reCAPTCHA e pelo Google
                        <a href="https://policies.google.com/privacy">Política de Privacidade</a> e
                        <a href="https://policies.google.com/terms">Termos do serviço</a>.
                    </div>

                </form>
            </div>
            <div id="contato_carregando"></div>
        </section>
        <!-- code | formulario -->



        <!-- GOOGLE reCAPTCHA -->
        <script type="text/javascript">
            "use strict";

            //formulario de validacao
            $("#form_contato").validate({
                errorClass: "error-class",
                validClass: "valid-class",

                onkeyup: function (element) {
                    this.element(element);
                },
                onfocusout: function (element) {
                    this.element(element);
                },

                rules: {
                    campo_nome: {
                        required: true,
                        minlength: 5,
                        maxlength: 50
                    },
                    campo_email: {
                        required: true,
                        minlength: 5,
                        email: true
                    },
                    campo_mensagem: {
                        required: true,
                        minlength: 5,
                        maxlength: 5000
                    }
                },

                submitHandler: function (form) {

                    // A) resgatar variaveis (SerializeArray)
                    // var formData = $("#frm_form_contato").serialize();
                    // var formData = $("#frm_form_contato").serializeArray();

                    // B) resgatar variaveis (FormData)
                    // var formData = {
                    // 'campo_nome': $("#campo_nome").val(),
                    // 'campo_email': $("#campo_email").val(),
                    // 'campo_mensagem': $("#campo_mensagem").val(),
                    // 'campo_token': $("#g-recaptcha-response").val(),
                    // };


                    //CAPTCHA + FORM POR POST
                    // grecaptcha.ready(function () {
                    //     grecaptcha.execute('6LeWQKRKk19yob6G8hx3LEoYXybIC', {
                    //         action: 'validate_captcha'
                    //     }).then(function (token) {
                    //         document.getElementById('g-recaptcha-response').value = token;

                    //         $.post($("#form_contato").attr("action"), {
                    //             campo_nome: $("#campo_nome").val(),
                    //             campo_email: $("#campo_email").val(),
                    //             campo_mensagem: $("#campo_mensagem").val(),
                    //             campo_token: $("#g-recaptcha-response").val(),
                    //         }).then(function (response) {
                    //             if (response = "success") {
                    //                 console.log('captcha ok');
                    //                 alert(token);
                    //             } else {
                    //                 console.log('recaptcha inválido! você é um ROBO ou SPAMMER!!!');
                    //             }
                    //         });

                    //     });
                    // });



                    var nome = $("#campo_nome").val();
                    var email = $("#campo_email").val();
                    var mensagem = $("#campo_mensagem").val();
                    var token = $("#g-recaptcha-response").val();


                    //CAPTCHA + FORM POR AJAX
                    grecaptcha.ready(function () {
                        grecaptcha.execute('6LesKk19yob6G8hx3LEoYXybIC', {
                            action: 'validate_captcha'
                        }).then(function (token) {
                            document.getElementById('g-recaptcha-response').value = token;

                            $.ajax({
                                url: $("#form_contato").attr("action"),
                                type: "get",
                                // contentType: 'application/json; utf-8',
                                // dataType: 'json',
                                // data: "nome=" + nome + "&email=" + email + "&msg=" + mensagem + "&token=" + token + "",
                                data: {
                                    nome: nome,
                                    email: email,
                                    mensagem: mensagem,
                                    token: token,
                                },

                                // antes de tudo
                                beforeSend: function () {
                                    $("#btn-form").removeClass('btn-success').addClass('btn-warning').text('Aguarde, enviando ...').fadeIn();
                                    $("#contato_carregando").html("<div class='loading'></div>").fadeIn();
                                },

                                // se houver sucesso
                                success: function (response) {
                                    $("#contato_carregando").delay(100).fadeOut();
                                    $("#contato_retorno").html("<div class='valida_a_certo'>" + response + "</div>").delay(2000).fadeIn();
                                    $("#contato_retorno").fadeOut();
                                    $("#btn-form").removeClass('btn-warning').addClass('btn-success').text('Mensagem Enviada!');
                                    $(form)[0].reset();
                                },

                                // se houver erro
                                error: function (response) {
                                    $("#contato_retorno").html("<div class='valida_a_erro'>" + response + "</div>").delay(2000).fadeIn();
                                    $("#contato_retorno").fadeOut();
                                    $(form)[0].reset();
                                },

                                // depois de tudo,
                                complete: function (response) {
                                    $("body").fadeTo(4000, '1');
                                },

                            });

                            return false;
                        });
                    });

                }
            });

        </script>



        <!-- SCRIPTS RODAPE -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/inputmask@3.3.11/dist/jquery.inputmask.bundle.js"></script>
        <!-- SCRIPTS RODAPE -->

    </body>

</html>

ASP:

<!--#include file="objetojson.asp"-->

<%
   Response.LCID = 1033 'USA LCID
IF Request.ServerVariables("SERVER_NAME") <> Request.ServerVariables("SERVER_NAME") THEN
   Response.Write "ACESSO RESTRITO!"
ELSE

      G_TOKEN      = Request("token")                                            'google token
      G_KEY_URL    = "https://www.google.com/recaptcha/api/siteverify?secret="   'google url
      G_KEY_SITE   = "suachave"                  'google chave do site
      G_KEY_SECRET = "chavesecreta"                  'google chave secreta

      ' response.write request("nome") & "<br>"
      ' response.write request("email") & "<br>"
      ' response.write request("mensagem") & "<br><br>"
      ' response.write request("token") & "<br><br>"

   IF Request.ServerVariables("REQUEST_METHOD") = "POST" OR Request.ServerVariables("REQUEST_METHOD") = "GET" THEN
      SET objXML = Server.CreateObject("MSXML2.ServerXMLHTTP")
          objXML.Open "GET", ""&G_KEY_URL&G_KEY_SECRET&"&response="&G_TOKEN&"", false
          objXML.Send
      
          SET objXMLjson    = new jsonClass
          SET objXMLjsonOut = objXMLjson.parse(objXML.responseText) 

               IF objXMLjson.value("success") THEN
                  recaptcha = "true"
               ELSE
                  recaptcha = "false"
               END IF

            ' response.write recaptcha & "<br>"
            ' response.write objXML.responseText & "<br>"

         IF recaptcha = "true" THEN
         
                campo_nome      = Request.Form("nome")
                campo_email     = Request.Form("email")
                campo_mensagem  = Replace(Request.Form("mensagem"), Chr(13), "<br>") 

                     cdoSERVER  = "mail.teste.com.br"
                     cdoORIGEM  = "teste@teste.com.br"
                     cdoPASS    = "teste%#@"
                     cdoPORT    = 587
                     cdoTIMEOUT = 120
                     cdoUSING   = 2
                     cdoAUT     = 1
                     cdoSSL     = 0

                     cdoDE      =  campo_nome &" <"& campo_email &">"
                     cdoPARA    = "teste@teste.com.br"
                     cdoASSUNTO = "teste - Contato"
                     cdoTEXT    = "Envio de mensagem usando CDOSYS"

              SET objCDOSYSmail = Server.CreateObject("cdo.message")
              SET objCDOSYScon  = Server.CreateObject("cdo.configuration")

                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserverport")          = cdoPORT
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendusing")               = cdoUSING
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate")        = cdoAUT
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout")   = cdoTIMEOUT
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpusessl")              = cdoSSL
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserver")              = cdoSERVER
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendusername")            = cdoORIGEM
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendpassword")            = cdoPASS
                  objCDOSYScon.Fields.Update

              SET objCDOSYSmail.Configuration    = objCDOSYScon
                  objCDOSYSmail.From             = cdoORIGEM
                  objCDOSYSmail.To               = cdoPARA
                  objCDOSYSmail.Subject          = cdoASSUNTO
                  objCDOSYSmail.TextBody         = cdoTEXT

                     ON ERROR RESUME NEXT
                        IF NOT objCDOSYSmail.Send = "" THEN 
                           Response.Write "Mensagem enviada com sucesso!"
                        ELSE
                           IF NOT ERR.NUMBER = "0" THEN
                                 Response.Write "Não foi possível enviar a mensagem!"
                                 Response.Write "OCORREU UM ERRO: " & Err.Number & " | " & Err.Description
                              ERR.Clear()
                           END IF
                        END IF
                     ON ERROR GOTO 0

              SET objCDOSYSmail = Nothing 
              SET objCDOSYScon  = Nothing

         ELSE
            Response.Write "<b>Google Captcha - Erro!<b>"
         END IF

      SET objXML = Nothing
   END IF

END IF
%>

uma contribuição...
serve de exemplo e implementação...
correções, melhorias, fico satisfeito....

abraços....

sergipeturismo · Maio 24, 2020

Em 30/04/2020 at 18:36, marcelocardoso disse:

Após 4 dias de quebra-cabeça, consegui finalizar o script....
Quem tá sofrendo, e precisar, segue exemplo completo em ASP, mas podendo ser adaptável para PHP ou qualquer outra linguagem.

HTML:


<!DOCTYPE html>
<html lang="pt_BR">

    <head>
        <meta charset="utf-8">
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
        <meta content="ie=edge" http-equiv="X-UA-Compatible">
        <title>Google Recaptcha - v3</title>

        <!-- STYLES CSS -->
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/inputmask@3.3.11/css/inputmask.min.css">
        <!-- STYLES CSS -->

        <!-- SCRIPTS JS -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-form@4.2.2/dist/jquery.form.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/localization/messages_pt_BR.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/additional-methods.min.js"></script>
        <!-- SCRIPTS JS -->

        <!-- SCRIPTS RECAPTCHA - SITE KEY -->
        <script src="https://www.google.com/recaptcha/api.js?render=6LesKRKk19yob6G8hx3LEoYXybIC"></script>
        <!-- SCRIPTS RECAPTCHA - SITE KEY -->

        <style type="text/css">
            *:focus {
                outline: none !important;
            }

            html,
            body {
                height: 100%;
                width: 100%;
            }

            body {
                color: darkgrey;
                margin: 60px 0px;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }

            /* google captcha - hidden na tela */
            .grecaptcha-badge {
                /* display: none !important; */
                visibility: hidden !important;
            }

            /* google captcha - exibe somente na página contato */
            #frm-contato .grecaptcha-badge {
                visibility: visible !important;
            }

            .grecaptcha-badge {
                width: 0 !important;
            }

            .grecaptcha-badge.show {
                width: 256px !important;
            }

            .grecaptcha-badge {
                display: flex;
                justify-content: flex-end;
                overflow: hidden;
                width: 70px;
                height: 60px;
                margin: 0 auto;
                box-shadow: 0 0 4px #ddd;
                transition: linear 100ms width;
            }

            .grecaptcha-badge:hover {
                width: 256px;
            }

            .grecaptcha-badge-small {
                font-size: 9px;
                color: darkgray;
                text-align: center;
            }

            .valid-class {
                color: #006400;
                padding-left: 12px;
                padding-top: 3px;
                font-size: 15px;
                display: block;
            }

            .error-class {
                color: #e33d00;
                padding-left: 12px;
                padding-top: 3px;
                font-size: 15px;
                display: block;
            }

            .loading {
                position: fixed;
                left: 0px;
                top: 0px;
                margin: 0px;
                width: 100%;
                height: 100%;
                display: block;
                z-index: 999999;
                opacity: 0.92;
                -moz-opacity: 0.92;
                filter: alpha(opacity=98);
                background-color: #00224b;
                background-image: url("img/loading.gif");
                background-repeat: no-repeat;
                background-position: 50% 50%;
                text-align: center;
                overflow: hidden;
                font-weight: bold;
                font-size: 25px;
                color: white;
                padding-top: 25%;
            }

        </style>
    </head>

    <body>


        <!-- code | formulario -->
        <section id="frm-contato" class="container-fluid">
            <h1 class="text-center">RECAPTCHA</h1>
            <h4 class="text-center">GOOGLE v3</h4>
            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <form id="form_contato" method="post" action="inc/recaptcha.asp">
                    <div class="form-group">
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_nome">Nome</label>
                            <input type="text" id="campo_nome" name="campo_nome" class="form-control" autocomplete="name" placeholder="Digite seu nome">
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_email">Email</label>
                            <input type="text" id="campo_email" name="campo_email" class="form-control" autocomplete="email" placeholder="Digite seu e-mail">
                        </div>
                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 mb-2">
                            <label class="control-label" for="campo_mensagem">Mensagem</label>
                            <textarea type="text" id="campo_mensagem" name="campo_mensagem" class="form-control" placeholder="Descreva sua mensagem"></textarea>
                        </div>
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-4">
                            <div id="contato_retorno"></div>
                            <button id="btn-form" type="submit" class="btn btn-block btn-md btn-success">ENVIAR</button>
                        </div>
                    </div>

                    <input type="hidden" id="g-recaptcha-response">
                    <input type="hidden" id="action" value="validate_captcha">

                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 grecaptcha-badge-small p-4">
                        Este site é protegido pelo reCAPTCHA e pelo Google
                        <a href="https://policies.google.com/privacy">Política de Privacidade</a> e
                        <a href="https://policies.google.com/terms">Termos do serviço</a>.
                    </div>

                </form>
            </div>
            <div id="contato_carregando"></div>
        </section>
        <!-- code | formulario -->



        <!-- GOOGLE reCAPTCHA -->
        <script type="text/javascript">
            "use strict";

            //formulario de validacao
            $("#form_contato").validate({
                errorClass: "error-class",
                validClass: "valid-class",

                onkeyup: function (element) {
                    this.element(element);
                },
                onfocusout: function (element) {
                    this.element(element);
                },

                rules: {
                    campo_nome: {
                        required: true,
                        minlength: 5,
                        maxlength: 50
                    },
                    campo_email: {
                        required: true,
                        minlength: 5,
                        email: true
                    },
                    campo_mensagem: {
                        required: true,
                        minlength: 5,
                        maxlength: 5000
                    }
                },

                submitHandler: function (form) {

                    // A) resgatar variaveis (SerializeArray)
                    // var formData = $("#frm_form_contato").serialize();
                    // var formData = $("#frm_form_contato").serializeArray();

                    // B) resgatar variaveis (FormData)
                    // var formData = {
                    // 'campo_nome': $("#campo_nome").val(),
                    // 'campo_email': $("#campo_email").val(),
                    // 'campo_mensagem': $("#campo_mensagem").val(),
                    // 'campo_token': $("#g-recaptcha-response").val(),
                    // };


                    //CAPTCHA + FORM POR POST
                    // grecaptcha.ready(function () {
                    //     grecaptcha.execute('6LeWQKRKk19yob6G8hx3LEoYXybIC', {
                    //         action: 'validate_captcha'
                    //     }).then(function (token) {
                    //         document.getElementById('g-recaptcha-response').value = token;

                    //         $.post($("#form_contato").attr("action"), {
                    //             campo_nome: $("#campo_nome").val(),
                    //             campo_email: $("#campo_email").val(),
                    //             campo_mensagem: $("#campo_mensagem").val(),
                    //             campo_token: $("#g-recaptcha-response").val(),
                    //         }).then(function (response) {
                    //             if (response = "success") {
                    //                 console.log('captcha ok');
                    //                 alert(token);
                    //             } else {
                    //                 console.log('recaptcha inválido! você é um ROBO ou SPAMMER!!!');
                    //             }
                    //         });

                    //     });
                    // });



                    var nome = $("#campo_nome").val();
                    var email = $("#campo_email").val();
                    var mensagem = $("#campo_mensagem").val();
                    var token = $("#g-recaptcha-response").val();


                    //CAPTCHA + FORM POR AJAX
                    grecaptcha.ready(function () {
                        grecaptcha.execute('6LesKk19yob6G8hx3LEoYXybIC', {
                            action: 'validate_captcha'
                        }).then(function (token) {
                            document.getElementById('g-recaptcha-response').value = token;

                            $.ajax({
                                url: $("#form_contato").attr("action"),
                                type: "get",
                                // contentType: 'application/json; utf-8',
                                // dataType: 'json',
                                // data: "nome=" + nome + "&email=" + email + "&msg=" + mensagem + "&token=" + token + "",
                                data: {
                                    nome: nome,
                                    email: email,
                                    mensagem: mensagem,
                                    token: token,
                                },

                                // antes de tudo
                                beforeSend: function () {
                                    $("#btn-form").removeClass('btn-success').addClass('btn-warning').text('Aguarde, enviando ...').fadeIn();
                                    $("#contato_carregando").html("<div class='loading'></div>").fadeIn();
                                },

                                // se houver sucesso
                                success: function (response) {
                                    $("#contato_carregando").delay(100).fadeOut();
                                    $("#contato_retorno").html("<div class='valida_a_certo'>" + response + "</div>").delay(2000).fadeIn();
                                    $("#contato_retorno").fadeOut();
                                    $("#btn-form").removeClass('btn-warning').addClass('btn-success').text('Mensagem Enviada!');
                                    $(form)[0].reset();
                                },

                                // se houver erro
                                error: function (response) {
                                    $("#contato_retorno").html("<div class='valida_a_erro'>" + response + "</div>").delay(2000).fadeIn();
                                    $("#contato_retorno").fadeOut();
                                    $(form)[0].reset();
                                },

                                // depois de tudo,
                                complete: function (response) {
                                    $("body").fadeTo(4000, '1');
                                },

                            });

                            return false;
                        });
                    });

                }
            });

        </script>



        <!-- SCRIPTS RODAPE -->
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/inputmask@3.3.11/dist/jquery.inputmask.bundle.js"></script>
        <!-- SCRIPTS RODAPE -->

    </body>

</html>

ASP:


<!--#include file="objetojson.asp"-->

<%
   Response.LCID = 1033 'USA LCID
IF Request.ServerVariables("SERVER_NAME") <> Request.ServerVariables("SERVER_NAME") THEN
   Response.Write "ACESSO RESTRITO!"
ELSE

      G_TOKEN      = Request("token")                                            'google token
      G_KEY_URL    = "https://www.google.com/recaptcha/api/siteverify?secret="   'google url
      G_KEY_SITE   = "suachave"                  'google chave do site
      G_KEY_SECRET = "chavesecreta"                  'google chave secreta

      ' response.write request("nome") & "<br>"
      ' response.write request("email") & "<br>"
      ' response.write request("mensagem") & "<br><br>"
      ' response.write request("token") & "<br><br>"

   IF Request.ServerVariables("REQUEST_METHOD") = "POST" OR Request.ServerVariables("REQUEST_METHOD") = "GET" THEN
      SET objXML = Server.CreateObject("MSXML2.ServerXMLHTTP")
          objXML.Open "GET", ""&G_KEY_URL&G_KEY_SECRET&"&response="&G_TOKEN&"", false
          objXML.Send
      
          SET objXMLjson    = new jsonClass
          SET objXMLjsonOut = objXMLjson.parse(objXML.responseText) 

               IF objXMLjson.value("success") THEN
                  recaptcha = "true"
               ELSE
                  recaptcha = "false"
               END IF

            ' response.write recaptcha & "<br>"
            ' response.write objXML.responseText & "<br>"

         IF recaptcha = "true" THEN
         
                campo_nome      = Request.Form("nome")
                campo_email     = Request.Form("email")
                campo_mensagem  = Replace(Request.Form("mensagem"), Chr(13), "<br>") 

                     cdoSERVER  = "mail.teste.com.br"
                     cdoORIGEM  = "teste@teste.com.br"
                     cdoPASS    = "teste%#@"
                     cdoPORT    = 587
                     cdoTIMEOUT = 120
                     cdoUSING   = 2
                     cdoAUT     = 1
                     cdoSSL     = 0

                     cdoDE      =  campo_nome &" <"& campo_email &">"
                     cdoPARA    = "teste@teste.com.br"
                     cdoASSUNTO = "teste - Contato"
                     cdoTEXT    = "Envio de mensagem usando CDOSYS"

              SET objCDOSYSmail = Server.CreateObject("cdo.message")
              SET objCDOSYScon  = Server.CreateObject("cdo.configuration")

                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserverport")          = cdoPORT
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendusing")               = cdoUSING
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate")        = cdoAUT
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout")   = cdoTIMEOUT
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpusessl")              = cdoSSL
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/smtpserver")              = cdoSERVER
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendusername")            = cdoORIGEM
                  objCDOSYScon.Fields("http://schemas.microsoft.com/cdo/configuration/sendpassword")            = cdoPASS
                  objCDOSYScon.Fields.Update

              SET objCDOSYSmail.Configuration    = objCDOSYScon
                  objCDOSYSmail.From             = cdoORIGEM
                  objCDOSYSmail.To               = cdoPARA
                  objCDOSYSmail.Subject          = cdoASSUNTO
                  objCDOSYSmail.TextBody         = cdoTEXT

                     ON ERROR RESUME NEXT
                        IF NOT objCDOSYSmail.Send = "" THEN 
                           Response.Write "Mensagem enviada com sucesso!"
                        ELSE
                           IF NOT ERR.NUMBER = "0" THEN
                                 Response.Write "Não foi possível enviar a mensagem!"
                                 Response.Write "OCORREU UM ERRO: " & Err.Number & " | " & Err.Description
                              ERR.Clear()
                           END IF
                        END IF
                     ON ERROR GOTO 0

              SET objCDOSYSmail = Nothing 
              SET objCDOSYScon  = Nothing

         ELSE
            Response.Write "<b>Google Captcha - Erro!<b>"
         END IF

      SET objXML = Nothing
   END IF

END IF
%>

uma contribuição...
serve de exemplo e implementação...
correções, melhorias, fico satisfeito....

abraços....

Existe algum requisito? alguma lib (css, javascript) ou algo do gênero?

marcelocardoso · Maio 25, 2020

o único requisito, é se cadastrar no recaptcha do google, gerar suas chaves KEY e SECRET KEY e utilizar no código....
o resto de libs, já estão sendo carregadas....
até mais....

portalsonhar · Maio 27, 2020

Consigo implementar ele no wordpress, através do plugin de recaptcha? Ou não tem nada a ver, é algum outro?

marcelocardoso · Maio 27, 2020

não utilizei no wordpress, mas acredito que consiga sim....
o código acima, é feito em ASP, para backend e html puro para qualquer linguagem além de javascript, então, não utilizo wordpress, mas com certeza, consegue ....

Entrar

Google Recaptcha V3 - Param não resgata

Recommended Posts

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

sergipeturismo 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

portalsonhar 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

marcelocardoso 6

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante