Google Recaptcha V3 - Param não resgata
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é....
Discussão (5)
Carregando comentários...