我有一个PHP联系表单，它通过服务器端的AJAX / JSON执行验证，并将错误推送到Javascript以打印错误并相应地更改HTML / CSS。
如何通过AJAX验证正确实施Google ReCaptcha？
这是我的代码尝试。
ReCaptcha代码段
//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()) {
$errors = json_encode(array('type'=>'error', 'text' => 'Captcha is Required!'));
die($output);
}
}
PHP：
<?php
$errors = array(); // array to hold validation errors
$data = array(); // array to pass back data
// validate the variables ======================================================
// if any of these variables don't exist, add an error to our $errors array
if (empty($_POST['firstName']))
$errors['firstName'] = 'First Name is required.';
if (empty($_POST['lastName']))
$errors['lastName'] = 'Last Name is required.';
if (empty($_POST['companyName']))
$errors['companyName'] = 'Company Name is required.';
if (empty($_POST['companyAddress']))
$errors['companyAddress'] = 'Company Address is required.';
if (empty($_POST['city']))
$errors['city'] = 'City is required.';
if (empty($_POST['state']))
$errors['state'] = 'State is required.';
if (empty($_POST['emailAddress']))
$errors['emailAddress'] = 'Email Address is required.';
if (empty($_POST['comment']))
$errors['comment'] = 'Comment is required.';
//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()) {
$errors = json_encode(array('type'=>'error', 'text' => 'Captcha is Required!'));
die($output);
}
}
// return a response ===========================================================
// if there are any errors in our errors array, return a success boolean of false
if ( ! empty($errors)) {
// if there are items in our errors array, return those errors
$data['success'] = false;
$data['errors'] = $errors;
} else {
// if there are no errors process our form, then return a message
// DO ALL YOUR FORM PROCESSING HERE
// THIS CAN BE WHATEVER YOU WANT TO DO (LOGIN, SAVE, UPDATE, WHATEVER)
// show a message of success and provide a true success variable
$data['success'] = true;
$data['message'] = 'Success!';
}
// return all our data to an AJAX call
echo json_encode($data);
使用Javascript：
// Start
$(document).ready(function() {
// process the form
$('form').submit(function(event) {
$('.form-group').removeClass('has-error'); // remove the error class
$('.help-block').remove(); // remove the error text
// get the form data
// there are many ways to get this data using jQuery (you can use the class or id also)
var formData = {
'firstName' : $('input[name=firstName]').val(),
'lastName' : $('input[name=lastName]').val(),
'companyName' : $('input[name=companyName]').val(),
'companyAddress' : $('input[name=companyAddress]').val(),
'city' : $('input[name=city]').val(),
'state' : $('input[name=state]').val(),
'emailAddress' : $('input[name=emailAddress]').val(),
'comment' : $('input[name=comment]').val()
};
// process the form
$.ajax({
type : 'POST', // define the type of HTTP verb we want to use (POST for our form)
url : 'formMaster.php', // the url where we want to POST
data : formData, // our data object
dataType : 'json', // what type of data do we expect back from the server
encode : true
})
// using the done promise callback
.done(function(data) {
// log data to the console so we can see
console.log(data);
// here we will handle errors and validation messages
if ( ! data.success) {
// handle errors for name ---------------
if (data.errors.firstName) {
$('#firstName-group').addClass('has-error'); // add the error class to show red input
$('#firstName-group').append('<div class="help-block">' + data.errors.firstName + '</div>'); // add the actual error message under our input
}
// handle errors for name ---------------
if (data.errors.lastName) {
$('#lastName-group').addClass('has-error'); // add the error class to show red input
$('#lastName-group').append('<div class="help-block">' + data.errors.lastName + '</div>'); // add the actual error message under our input
}
// handle errors for name ---------------
if (data.errors.companyName) {
$('#companyName-group').addClass('has-error'); // add the error class to show red input
$('#companyName-group').append('<div class="help-block">' + data.errors.companyName + '</div>'); // add the actual error message under our input
}
// handle errors for Company Address ---------------
if (data.errors.companyAddress) {
$('#companyAddress-group').addClass('has-error'); // add the error class to show red input
$('#companyAddress-group').append('<div class="help-block">' + data.errors.companyAddress + '</div>'); // add the actual error message under our input
}
// handle errors for Company Address ---------------
if (data.errors.city) {
$('#city-group').addClass('has-error'); // add the error class to show red input
$('#city-group').append('<div class="help-block">' + data.errors.city + '</div>'); // add the actual error message under our input
}
// handle errors for Company Address ---------------
if (data.errors.state) {
$('#state-group').addClass('has-error'); // add the error class to show red input
$('#state-group').append('<div class="help-block">' + data.errors.state + '</div>'); // add the actual error message under our input
}
// handle errors for Email Address ---------------
if (data.errors.emailAddress) {
$('#emailAddress-group').addClass('has-error'); // add the error class to show red input
$('#emailAddress-group').append('<div class="help-block">' + data.errors.emailAddress + '</div>'); // add the actual error message under our input
}
// handle errors for superhero alias ---------------
if (data.errors.comment) {
$('#comment-group').addClass('has-error'); // add the error class to show red input
$('#comment-group').append('<div class="help-block">' + data.errors.comment + '</div>'); // add the actual error message under our input
}
} else {
// ALL GOOD! just show the success message!
$('form').append('<div class="alert alert-success">' + data.message + '</div>');
// usually after form submission, you'll want to redirect
// window.location = '/thank-you'; // redirect a user to another page
}
})
// using the fail promise callback
.fail(function(data) {
// show any errors
// best to remove for production
console.log(data);
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
现在我真的很困惑如何让它正常工作。验证答案是通过Javascript还是PHP获得的，还是Javascript将其传递给PHP？如果有错误，我如何将其传递给Javascript以打印错误？
HTML：
<!doctype html>
<html>
<head>
<title>Form Master</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"> <!-- load bootstrap via CDN -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <!-- load jquery via CDN -->
<script src="formMaster.js"></script> <!-- load our javascript file -->
</head>
<body>
<div class="col-sm-6 col-sm-offset-3">
<h1>Contact Form</h1>
<!-- OUR FORM -->
<form name="form" id="form" action="formMaster.php" method="POST">
<!-- NAME -->
<div id="firstName-group" class="form-group">
<label for="firstName">First Name</label>
<input type="text" class="form-control" name="firstName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- NAME -->
<div id="lastName-group" class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" class="form-control" name="lastName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- NAME -->
<div id="companyName-group" class="form-group">
<label for="companyName">Company Name:</label>
<input type="text" class="form-control" name="companyName" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- NAME -->
<div id="companyAddress-group" class="form-group">
<label for="companyAddress">Company Address:</label>
<input type="text" class="form-control" name="companyAddress" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<!-- NAME -->
<div id="city-group" class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" name="city" placeholder="Henry Pym">
<!-- errors will go here -->
</div>
<div id="state-group" class="form-group">
<label for="state">State</label>
<select id="statea" name="state" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<!-- EMAIL ADDRESS -->
<div id="emailAddress-group" class="form-group">
<label for="emailAddress">Email Address:</label>
<input type="text" class="form-control" name="emailAddress" placeholder="rudd@avengers.com">
<!-- errors will go here -->
</div>
<!-- COMMENT -->
<div id="comment-group" class="form-group">
<label for="comment">Comment:</label>
<input type="text" class="form-control" name="comment" placeholder="Ant Man">
<!-- errors will go here -->
</div>
<div id="recaptcha" class="form-group">
<div class="g-recaptcha" data-sitekey="6LfKURIUAAAAAO50vlwWZkyK_G2ywqE52NU7YO0S" data-callback="verifyRecaptchaCallback" data-expired-callback="expiredRecaptchaCallback"></div>
<input class="form-control d-none" data-recaptcha="true" required data-error="Please complete the Captcha">
<div class="help-block with-errors"></div>
</div>
<button type="submit" class="btn btn-success">Submit <span class="fa fa-arrow-right"></span></button>
</form>
</div>
</body>
</html>
答案 0 :(得分：0)
reCaptcha检查在客户端完成，浏览器连接到谷歌reCaptcha并检查输入是否来自机器人。然后将验证码返回给浏览器
该版本代码是“g-recaptcha-response”，后来在服务器端验证。
要在服务器端进行检查，您需要在名为g-recaptcha-response的ajax调用中添加aditional字段，并使用验证返回的值。
在formData中，您需要添加g-recaptcha-response此附加数据字段。
var formData = {
'firstName' : $('input[name=firstName]').val(),
'lastName' : $('input[name=lastName]').val(),
'companyName' : $('input[name=companyName]').val(),
'companyAddress' : $('input[name=companyAddress]').val(),
'city' : $('input[name=city]').val(),
'state' : $('input[name=state]').val(),
'emailAddress' : $('input[name=emailAddress]').val(),
'comment' : $('input[name=comment]').val(),
'g-recaptcha-response' : !!! PUT THE VERIFICATION CODE HERE !!!
};
我不确定您使用的是哪个版本的reCaptcha，因此获取验证的方式会有所不同，但是您可以在此处查看不同版本的不同备选方案的链接：reCaptcha V2
编辑我
在html文件中，在<head>标记中添加recaptcha api：
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js">
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</script> <!-- load jquery via CDN -->
<script src="formMaster.js"></script> <!-- load our javascript file -->
这将创建一个recaptcha javascript对象，用于链接到下面定义的div。
在html repace中你用这个来重新训练div：
<div class="g-recaptcha" data-sitekey="YOUR KEY"></div>
最后在Javascript中使用recpatcha对象获取响应并将其添加到ajax调用中。
var formData = {
'firstName' : $('input[name=firstName]').val(),
'lastName' : $('input[name=lastName]').val(),
'companyName' : $('input[name=companyName]').val(),
'companyAddress' : $('input[name=companyAddress]').val(),
'city' : $('input[name=city]').val(),
'state' : $('input[name=state]').val(),
'emailAddress' : $('input[name=emailAddress]').val(),
'comment' : $('input[name=comment]').val(),
'g-recaptcha-response' : recaptcha.getResponse();
};
通过这些更改，您应该在php中获得$_POST['g-recaptcha-response']。
之后，请使用此信息执行验证步骤。