javascript - 在 Javascript 中设置 Google ReCaptcha
问题描述
我正在尝试让回调与 Google ReCaptcha 相关，但我无法弄清楚如何正确执行此操作。
该表单同时处理客户端和服务器端验证，其余字段正在正确验证，但我无法让 Google ReCaptcha 正确验证并将数据发送到服务器以获取响应然后进行处理。
我读到的是我需要添加如下内容：
data: { 'g-recaptcha-response' : grecaptcha.getResponse()};
但我不确定。有人可以帮我吗？
ajax.php：
<?php
require_once 'config.php';
require 'vendor/autoload.php';
$response = [
'status' => 'success',
'message' => 'Mail sent successfully',
'data' => []
];
//Checking is it ajax request
if (strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest') {
//Invalid Ajax request
http_response_code(403);
$response = [
'status' => 'error',
'message' => 'Invalid request, please try again.',
'data' => []
];
responseHandler($response);
}
if( !isset($_POST['data']) ) {
http_response_code(400);
$response = [
'status' => 'error',
'message' => 'Empty post data.',
'data' => []
];
responseHandler($response);
}
$data = json_decode($_POST['data'], true); $errors = '';
//Email validation
if ( isset($data["emailAddress"]) && !empty( $data["emailAddress"] ) ) {
$email = trim($data["emailAddress"]);
if ( filter_var($emailAddress, FILTER_VALIDATE_EMAIL) === false){
$errors .= "$emailAddress is <strong>NOT</strong> a valid email address.<br/>";
}
} else {
$errors .= 'Please enter your email address.<br/>';
}
//First Name Validation
if ( isset($data["firstName"]) && !empty( $data["firstName"] ) ) {
$name = trim( $data["firstName"] );
if ( filter_var($firstName, FILTER_SANITIZE_STRING) === false){
$errors .= 'Please enter a valid first name.<br/>';
} elseif (!preg_match("/^[a-zA-Z ]*$/",$firstName)) {
$errors .= 'Only letters and white space allowed for first name...<br/>';
}
} else {
$errors .= 'Please enter your name.<br/>';
}
//Last Name Validation
if ( isset($data["lastName"]) && !empty( $data["lastName"] ) ) {
$name = trim( $data["lastName"] );
if ( filter_var($lastName, FILTER_SANITIZE_STRING) === false){
$errors .= 'Please enter a valid name.<br/>';
} elseif (!preg_match("/^[a-zA-Z ]*$/",$lastName)) {
$errors .= 'Only letters and white space allowed for last name...<br/>';
}
} else {
$errors .= 'Please enter your name.<br/>';
}
//Company Name Validation
if ( isset($data["companyName"]) && !empty( $data["companyName"] ) ) {
$name = trim( $data["companyName"] );
if ( filter_var($companyName, FILTER_SANITIZE_STRING) === false){
$errors .= 'Please enter a valid name.<br/>';
} elseif (!preg_match("/^[a-zA-Z ]*$/",$companyName)) {
$errors .= 'Only letters and white space allowed for company name...<br/>';
}
} else {
$errors .= 'Please enter your name.<br/>';
}
//Company Address Validation
if ( isset($data["companyAddress"]) && !empty( $data["companyAddress"] ) ) {
$subject = trim( $data["companyAddress"] );
if ( filter_var($companyAddress, FILTER_SANITIZE_STRING) === false){
$errors .= 'Please enter a company Address to send.<br/>';
}
} else {
$errors .= 'Please enter a company Address to send.<br/>';
}
//City Name Validation
if ( isset($data["city"]) && !empty( $data["city"] ) ) {
$name = trim( $data["city"] );
if ( filter_var($city, FILTER_SANITIZE_STRING) === false){
$errors .= 'Please enter a valid city.<br/>';
} elseif (!preg_match("/^[a-zA-Z ]*$/",$city)) {
$errors .= 'Only letters and white space allowed for city name...<br/>';
}
} else {
$errors .= 'Please enter your city name.<br/>';
}
//Message Validation
if ( isset($data["message"]) && !empty( $data["message"] ) ) {
$message = trim( $data["message"] );
if ( filter_var($message, FILTER_SANITIZE_STRING) === false){
$errors .= 'Please enter a message to send.<br/>';
}
} else {
$errors .= 'Please enter a message to send.<br/>';
}
//Start of ReCaptcha
$response = $_POST["g-recaptcha-response"];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array(
'secret' => 'secret_password',
'response' => $_POST["g-recaptcha-response"]
);
$options = array(
'http' => array (
'method' => 'POST',
'content' => http_build_query($data)
)
);
$context = stream_context_create($options);
$verify = file_get_contents($url, false, $context);
$captcha_success=json_decode($verify);
if ($response["success"] = false) {
$errors .= 'ReCapatcha is required.<br/>';
} else if ($captcha_success->success==true) {
if(!empty( $errors )) {
http_response_code(400);
$response = [
'status' => 'error',
'message' => $errors,
'data' => []
];
responseHandler($response);
}
}
//End of ReCaptcha
//Filtering out newlines in the email subject
$subject = str_replace(array("\r","\n"),array(" "," "),$subject);
$contactContent = file_get_contents('email_templates/contact.html');;
$parameters = ['name' => $name, 'to_name' => TO_NAME, 'message' => $message ];
if(! send_mail( $email, $subject, $contactContent, $parameters ) ){
//Email sent failed.
http_response_code(500);
$response = [
'status' => 'error',
'message' => 'Email service failing temporarily Or Maybe you are entered invalid E-mail, Please enter valid email and try again.',
'data' => []
];
responseHandler($response);
} else {
//Email successfully sent
http_response_code(200);
responseHandler($response);
}
/**
* responseHandler function
* @param array $response request response
*/
function responseHandler($response)
{
header('Content-type: application/json');
echo json_encode($response);
exit;
}
/**
* send_mail function
* @param string $email [[Description]]
* @param string $Subject [[Description]]
* @param string $message [[Description]]
* @param array [$parameters = []] [[Description]]
* @return boolean [[Description]]
*/
function send_mail($email, $Subject, $message, $parameters = []){
////Parse the message with given parameters
if( !empty( $parameters ) )$message = parse($message, $parameters);
$mail = new PHPMailer;
//$mail->SMTPDebug = 3; // Enable verbose debug output
$mail->isSMTP(); // Set mailer to use SMTP
$mail->Host = SMTP_HOST; // Specify main and backup SMTP servers
$mail->SMTPAuth = SMTP_AUTH; // Enable SMTP authentication
$mail->Username = SMTP_USERNAME;
$mail->Password = SMTP_PASSWORD;
$mail->SMTPSecure = SMTP_SECURE; // Enable TLS encryption, `ssl` also accepted
$mail->Port = SMTP_PORT; // TCP port to connect to
if( isset($parameters['name']) )
$mail->setFrom($email, $parameters['name']);
else
$mail->setFrom($email);
$mail->addAddress(TO_EMAIL); // Add a recipient
//$mail->addReplyTo($email, 'Smart Invoice V3 Promotion');
$mail->addBCC(TO_EMAIL);
$mail->isHTML(true); // Set email format to HTML
$mail->Subject = $Subject;
$mail->Body = $message;
$mail->AltBody = strip_tags($message);
if(!$mail->send()) {//$mail->ErrorInfo;
return false;
}
return true;
}
/**
* parse function
* @param string $message [[Description]]
* @param array $parameters [[Description]]
* @return string [[Description]]
*/
function parse($message, $parameters) {
foreach ($parameters as $key => $value) {
$message = str_replace('{'.$key.'}', $value, $message);
}
return $message;
}
脚本.js：
$(window).load(function() {
$("#loader").fadeOut("slow");
$('#main').fadeIn("slow");
});
$(document).ready(function(){
jQuery.validator.setDefaults({
errorPlacement : function(error, element) {
element.removeClass('has-success').addClass('has-error'),
}
});
$('#contactForm').validate( {
submitHandler : function(form) {
return false;
},
rules : {
emailAddress:{
required: true,
email: true
},
firstName:{
required : true,
minlength : 3,
maxlength : 50
},
lastName:{
required : true,
minlength : 3,
maxlength : 50
},
companyName:{
required : true,
minlength : 3,
maxlength : 50
},
companyAddress: {
required : true,
minlength : 10
},
city: {
required : true,
minlength : 10
},
message: {
required : true,
minlength : 50
}
},
messages : {
emailAddress:{
required : "Please enter your Email"
},
firstName:{
required : "Please enter your name"
},
lastName:{
required : "Please enter your name"
},
companyName:{
required : "Please enter your name"
},
companyAddress: {
required : "Please enter your contact purpose",
minlength : "Minimum length of subject must be 10 chars long."
},
city: {
required : "Please enter your contact purpose",
minlength : "Minimum length of subject must be 10 chars long."
},
message: {
required : "Please enter your sweet message",
minlength : "Minimum length of your message must be 50 chars long."
}
},
errorPlacement : function(error, element) {
$(element).closest('div.form-group').find('.help-block').html(error.html());
},
highlight : function(element) {
$(element).closest('div.form-group').removeClass('has-success').addClass('has-error');
},
unhighlight: function(element, errorClass, validClass) {
$(element).closest('div.form-group').removeClass('has-error').addClass('has-success');
$(element).closest('div.form-group').find('.help-block').html('');
}
});
$(document).on('click', '#sendMailBtn', function(e){
e.preventDefault();
if( $('#contactForm').valid() ) {
var sendMailBtn = $('#sendMailBtn');
sendMailBtn.button('loading');
$.ajax({
url: 'ajax.php',
method: 'post',
dataType: 'json',
data : { data: JSON.stringify($('#contactForm').serializeObject()) },
success: function( response ){
sendMailBtn.button('reset');
$('input,textarea').val('');
showSuccessMessage();
},
error: function( response ) {
sendMailBtn.button('reset');
if( response.status === 400 || response.status === 403 || response.status === 500 ) {
showWarningMessage(response.responseJSON.message);
} else {
showWarningMessage();
}
}
});
}
return false;
});
function showSuccessMessage(){
swal({
title: "Many Thanks!!!",
text: "Thanks for contacting us, We will get back to your inbox shortly...",
type: "success",
html: true
/*imageUrl: "img/thumbs-up.jpg"*/
});
}
function showWarningMessage(message){
if(typeof message === 'undefined' || message === '' ) message = "Something went wrong, Please try again.";
swal({
title: "Oops...",
text: message,
type: "error",
html: true
});
}
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
});
解决方案
推荐阅读
- angular - 从 Angular 中的数据集中填充下拉列表
- java - ADMA5014E 将 Mavenized Java 应用程序安装到 WebSphere 时出现 NoModuleFileException 错误：“具有 uri 的模块元素的文件不存在”
- python - 需要帮助确定要获取哪个 youtube html 标记以便在 python 中加载视频
- javascript - 如何从 JSON 数据中删除列
- c# - 视图模型 (WPF) 中的 UI 更新命令
- xamarin - 我正在尝试使用水平列表选项分组来实现多选列表
- python - 无法一次下载多个 csv 文件以及如何使用我编写的相同代码将文件压缩到一个文件中
- linux - 如何导航 python3、pip3、venv 并将软件包安装到正确项目的正确位置
- swift - 在滚动时从表格视图中删除反弹效果
- java - 没有时如何使用硒单击DIV下拉值
类型的标签被编码