背景
我已经从这个网站实施了一个recpatcha解决方案http://phppot.com/php/php-contact-form-with-google-recaptcha/
现在我想迁移到Invisible Recaptcha，但我无法使用PHP模块进行验证 .
我正在使用PHP库进行recaptcha https://github.com/google/recaptcha
问
我想迁移到Invisible Recaptcha，但我无法使用sender.php进行验证 . 如何使用此验证方法添加数据回调？然后，如何执行仅使用ajax重新执行PHP验证？，因此在输入验证后应出现挑战
带Recaptcha的工作代码网站（不可见）
index.php
<?php
require('constant.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
...
<script src="component/jquery/jquery-3.2.1.min.js"></script>
<script>
$(document).ready(function (e){
$("#frmContact").on('submit',(function(e){
e.preventDefault();
$("#mail-status").hide();
$('#send-message').hide();
$('#loader-icon').show();
$.ajax({
url: "sender.php",
type: "POST",
dataType:'json',
data: {
"name":$('input[name="name"]').val(),
"email":$('input[name="email"]').val(),
"phone":$('input[name="phone"]').val(),
"content":$('textarea[name="content"]').val(),
"g-recaptcha-response":$('textarea[id="g-recaptcha-response"]').val()},
success: function(response){
$("#mail-status").show();
$('#loader-icon').hide();
if(response.type == "error") {
$('#send-message').show();
$("#mail-status").attr("class","error");
} else if(response.type == "message"){
$('#send-message').hide();
$("#mail-status").attr("class","success");
}
$("#mail-status").html(response.text);
},
error: function(){}
});
}));
});
</script>
<style>
...
</style>
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
...
<form id="frmContact" action="" method="POST" novalidate="novalidate">
...
<div class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>"></div>
...
</form>
...
</body>
</html>
sender.php
<?php
ini_set('display_errors', 1);
if($_POST)
{
require('constant.php');
$user_name = filter_var($_POST["name"], FILTER_SANITIZE_STRING);
$user_email = filter_var($_POST["email"], FILTER_SANITIZE_EMAIL);
$user_phone = filter_var($_POST["phone"], FILTER_SANITIZE_STRING);
$content = filter_var($_POST["content"], FILTER_SANITIZE_STRING);
if(empty($user_name)) {
$empty[] = "<b>Name</b>";
}
if(empty($user_email)) {
$empty[] = "<b>Email</b>";
}
if(empty($user_phone)) {
$empty[] = "<b>Phone Number</b>";
}
if(empty($content)) {
$empty[] = "<b>Comments</b>";
}
if(!empty($empty)) {
$output = json_encode(array('type'=>'error', 'text' => implode(", ",$empty) . ' Required!'));
die($output);
}
if(!filter_var($user_email, FILTER_VALIDATE_EMAIL)){ //email validation
$output = json_encode(array('type'=>'error', 'text' => '<b>'.$user_email.'</b> is an invalid Email, please correct it.'));
die($output);
}
//reCAPTCHA validation
if (isset($_POST['g-recaptcha-response'])) {
require('component/recaptcha/src/autoload.php');
$recaptcha = new \ReCaptcha\ReCaptcha(SECRET_KEY, new \ReCaptcha\RequestMethod\SocketPost());
$resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
if (!$resp->isSuccess()) {
$output = json_encode(array('type'=>'error', 'text' => '<b>Captcha</b> Validation Required!'));
die($output);
}
}
$toEmail = MAIL_TO;
$mailHeaders = "From: " . $user_name . "<" . $user_email . ">\r\n";
if (mail($toEmail, "Contact Mail", $content, $mailHeaders)) {
$output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_name .', thank you for the comments. We will get back to you shortly.'));
die($output);
} else {
$output = json_encode(array('type'=>'error', 'text' => 'Unable to send email, please contact'.SENDER_EMAIL));
die($output);
}
}
?>
几乎使用Invisible ReCaptcha的工作代码
以下代码适用于Invisible recaptcha，但我需要首先通过PHP执行验证输入，然后请求recaptcha challenge . 像原始代码一样 .
index.php
<?php
require('constant.php');
?>
...
<head>
...
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>
<script>
var onloadCallback = function(){
grecaptcha.render("emplacementRecaptcha",{
"sitekey": "<?php echo SITE_KEY; ?>",
"badge": "inline",
"type": "image",
"size": "invisible",
"callback": onSubmit
});
};
var onSubmit = function(token){
$("#mail-status").hide();
$('#send-message').hide();
$('#loader-icon').show();
$.ajax({
url: "sender.php",
type: "POST",
dataType:'json',
data: {
"name":$('input[name="name"]').val(),
"email":$('input[name="email"]').val(),
"phone":$('input[name="phone"]').val(),
"content":$('textarea[name="content"]').val(),
"g-recaptcha-response":$('textarea[id="g-recaptcha-response"]').val()},
success: function(response){
$("#mail-status").show();
$('#loader-icon').hide();
if(response.type == "error") {
$('#send-message').show();
$("#mail-status").attr("class","error");
grecaptcha.reset();
} else if(response.type == "message"){
$('#send-message').hide();
$("#mail-status").attr("class","success");
}
$("#mail-status").html(response.text);
},
error: function(){
grecaptcha.reset();
$("#mail-status").html("Error en la funcion");
}
});
};
function validate(event){
event.preventDefault();
$("#mail-status").html("Validacion recaptcha en curso");
grecaptcha.execute();
}
function onload(){
var element = document.getElementById("send-message");
element.onclick = validate;
}
</script>
<style>
.label {margin: 2px 0;}
.field {margin: 0 0 20px 0;}
.content {width: 960px;margin: 0 auto;}
h1, h2 {font-family:"Georgia", Times, serif;font-weight: normal;}
div#central {margin: 40px 0px 100px 0px;}
@media all and (min-width: 768px) and (max-width: 979px) {.content {width: 750px;}}
@media all and (max-width: 767px) {
body {margin: 0 auto;word-wrap:break-word}
.content {width:auto;}
div#central { margin: 40px 20px 100px 20px;}
}
body {font-family: 'Helvetica',Arial,sans-serif;background:#ffffff;margin: 0 auto;-webkit-font-smoothing: antialiased; font-size: initial;line-height: 1.7em;}
input, textarea {width:100%;padding: 15px;font-size:1em;border: 1px solid #A1A1A1; }
button {
padding: 12px 60px;
background: #5BC6FF;
border: none;
color: rgb(40, 40, 40);
font-size:1em;
font-family: "Georgia", Times, serif;
cursor: pointer;
}
#message { padding: 0px 40px 0px 0px; }
#mail-status {
padding: 12px 20px;
width: 100%;
display:none;
font-size: 1em;
font-family: "Georgia", Times, serif;
color: rgb(40, 40, 40);
}
.error{background-color: #F7902D; margin-bottom: 40px;}
.success{background-color: #48e0a4; }
.g-recaptcha {margin: 0 0 25px 0;}
</style>
</head>
<body>
...
<form id="frmContact" action="" method="POST" novalidate="novalidate">
...
<div id="emplacementRecaptcha"></div>
...
<button type="Submit" id="send-message" style="clear:both;">Send Message</button>
</form>
<script>onload();</script>
...
</body>
</html>
sender.php
没有变化