如何将reCAPTCHA v3添加到PHP表单并使用Ajax提交

在本教程中,我们将使用Google Ajax将Google reCAPTCHA v3添加到PHP表单中并提交而不离开页面。如果您的网站上有联系表格或任何此类表格,您就会知道从机器人接收垃圾邮件是多么令人讨厌。Google reCAPTCHA保护您免受垃圾邮件和其他自动滥用的侵害。要继续学习本教程,您需要具备H WP网站建设

在本教程中,我们将使用Google Ajax将Google reCAPTCHA v3添加到PHP表单中并提交而不离开页面。如果您的网站上有联系表格或任何此类表格,您就会知道从机器人接收垃圾邮件是多么令人讨厌。Google reCAPTCHA保护您免受垃圾邮件和其他自动滥用的侵害。要继续学习本教程,您需要具备HTML,jQuery和PHP的一些基本知识。

为什么选择Google reCAPTCHA v3?

我们所有人都有令人沮丧的经历,他们试图通过一种形式来快速提交一些信息,而这些形式最终只能面对验证码挑战。我们不得不输入随机字符,然后想知道“是两个V还是W?”,“是否应该添加该空格?”。

WordPress网站建设

WordPress网站建设

然后,我们必须选择所有具有斑马线或桥梁的图像,以证明我们是人类。值得庆幸的是,这些天来,许多网站都添加了Google reCAPTCHA v2,它仅显示一个复选框-“我不是机器人”。

如何将reCAPTCHA v3添加到PHP表单并使用Ajax提交

但是,在2018年,Google发布了下一版本– reCAPTCHA v3,它根本不需要任何用户交互。它在后台工作,观察用户的行为。此版本为我们(开发人员)提供了一个分数,该分数指示了交互的可疑程度。我们可以使用该分数来防止垃圾邮件。在Google的官方网站管理员博客上了解其工作原理。

现在让我们学习如何将其添加到简单表单中。

注册reCAPTCHA v3密钥

您需要先注册您的网站并在此处获取密钥-https:  //www.google.com/recaptcha/admin/create。添加标签,选择reCAPTCHA v3,输入您的域名并提交。

WordPress网站建设

WordPress网站建设

这将生成一个“站点密钥”和一个“秘密密钥”。复制两者并确保它们安全。我们将很快需要它们。

HTML表格

让我们使用一个简单的联系表,其中包含全名,电子邮件和消息字段

WordPress网站建设

WordPress网站建设

HTML

为了简化本教程,下面仅显示HTML代码。对于以上屏幕截图中使用的CSS,请在本教程末尾下载完整的源代码。

1个
2
3
4
5
6
7
8
9
10
11

<form id="contact-form" method="post">
   <p class="label">Full Name *</p>
   <input type="text" name="name" placeholder="Full Name" required>
   <p class="label">Email *</p>
   <input type="email" name="email" placeholder="Email" required>
   <p class="label">Message *</p>
   <textarea name="message" rows="6" placeholder="Type your message here" required></textarea>
   <!-- A hidden div “alert” below to display the message received from server once form is submitted-->
   <div id="alert"></div>
   <button id="submit-button" type="submit">Send Message</button>
</form>

Ajax表单提交

在添加reCAPTCHA之前,让我们使用Ajax进行表单提交,为此需要jQuery库。使用CDN加载它。将此行粘贴到bodyHTML中的结束标记之前。

1个

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

我们需要在表单提交时提出Ajax请求。

1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script>
   $('#contact-form').submit(function(event) {
       event.preventDefault(); // Prevent direct form submission
       $('#alert').text('Processing...').fadeIn(0); // Display "Processing..." to let the user know that the form is being submitted
       $.ajax({
           url: 'contact.php',
           type: 'post',
           data: $('#contact-form').serialize(),
           dataType: 'json',
           success: function( _response ){
               // The Ajax request is a success. _response is a JSON object
               var error = _response.error;
               var success = _response.success;
               if(error != "") {
                   // In case of error, display it to user
                   $('#alert').html(error);
               }
               else {
                   // In case of success, display it to user and remove the submit button
                   $('#alert').html(success);
                   $('#submit-button').remove();
               }
           },
           error: function(jqXhr, json, errorThrown){
               // In case of Ajax error too, display the result for demo purpose
               var error = jqXhr.responseText;
               $('#alert').html(error);
           }
       });
   });
</script>

 

使用此代码,如果您单击“提交”,则会显示404错误,因为contact.php尚不存在。接下来,让我们开始。

的PHP

创建contact.php。在服务器端,我们需要验证收到的数据并发送JSON响应。我们将在一段时间内集成reCAPTCHA。

1个
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php

// Server side validation
function isValid() {
   // This is the most basic validation for demo purposes. Replace this with your own server side validation
   if($_POST['name'] != "" && $_POST['email'] != "" && $_POST['message'] != "") {
       return true;
   } else {
       return false;
   }
}

$error_output = '';
$success_output = '';

if(isValid()) {
   $success_output = "Your message sent successfully";
} else {
   // Server side validation failed
   $error_output = "Please fill all the required fields";
}

$output = array(
   'error'     =>  $error_output,
   'success'   =>  $success_output
);

// Output needs to be in JSON format
echo json_encode($output);

?>

 

完善!我们拥有使用Ajax进行表单提交的完整流程。现在是时候集成reCAPTCHA v3了,如果您认真遵循的话,您将看到它实际上是多么简单。

客户端集成

第一步是使用您的站点密钥加载JavaScript API。将此粘贴到您的jQuery CDN链接下面。

1个

<script async src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY_HERE"></script>

重要说明:将YOUR_SITE_KEY_HERE替换为您先前复制的站点密钥。

如果您查看reCAPTCHA v3文档,则需要grecaptcha.execute在希望保护的每个操作上调用。在我们的例子中,它是表单提交。该调用会生成一个令牌,该令牌需要与我们的表单数据一起发送,以便在服务器端进行验证。最好的方法是在这样的表单中包含一个隐藏的输入字段,然后将令牌值动态分配给该字段:

1个

<input type="hidden" name="recaptcha_response" id="recaptchaResponse">

 

在Ajax请求外部调用以下函数,并用标记值填充隐藏的输入字段。发出Ajax请求时,这将自动包括令牌值以及其他表单数据。

1个
2
3
4
5
6
7

grecaptcha.ready(function () {
   grecaptcha.execute('YOUR_SITE_KEY_HERE', { action: 'contact' }).then(function (token) {
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      recaptchaResponse.value = token;
      // Make the Ajax call here
   });
});

重要说明:将YOUR_SITE_KEY_HERE替换为您先前复制的站点密钥。

“操作”值特定于此联系表单提交操作。在多个位置添加reCAPTCHA时,不同的操作可帮助您分析整个网站上的数据。

注意: reCAPTCHA令牌每两分钟过期一次。这就是为什么,仅在用户单击“提交”按钮之后以及在发出Ajax请求之前,才需要生成此令牌。

这样就完成了客户端集成。

服务器端集成

在服务器端验证数据(名称,电子邮件和消息)后,我们需要从Google获取分数以验证它是否是人机交互。在该if(isvalid()){ }块内,添加以下代码以使API请求获得得分。

1个
2
3
4
5
6
7

// Build POST request to get the reCAPTCHA v3 score from Google
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_SECRET_KEY_HERE'; // Insert your secret key here
$recaptcha_response = $_POST['recaptcha_response'];

// Make the POST request
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);

重要说明:用您先前复制的密钥替换YOUR_SECRET_KEY_HERE。密钥仅用于服务器端。

收到的响应是JSON对象。

{
“ success”:true | false,//此请求是否为您网站的有效reCAPTCHA令牌
“ score”:数字//此请求的分数(0.0 – 1.0)
“ action”:字符串//此请求(非常重要):
“ challenge_ts”:时间戳,//质询加载的时间戳(ISO格式yyyy-MM-dd’T’HH:mm:ssZZ)
“ hostname”:字符串,//站点的主机名解决reCAPTCHA的
“错误代码”:[…] //可选
}

 

让我们来解码JSON对象$recaptcha和检查successscoreaction。分数从0.0到1.0不等。默认情况下,您可以使用0.5的阈值。

1个
2
3
4
5
6
7
8
9

$recaptcha = json_decode($recaptcha);
// Take action based on the score returned
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'contact') {
   // This is a human. Insert the message into database OR send a mail
   $success_output = "Your message sent successfully";
} else {
   // Score less than 0.5 indicates suspicious activity. Return an error
   $error_output = "Something went wrong. Please try again later";
}

 

你们都准备好了!点击该“提交”按钮,如果您正确集成了所有内容,则应该看到一条消息,说明已成功发送邮件

如何将reCAPTCHA v3添加到PHP表单并使用Ajax提交

奖金提示:

添加javascript API后,您可能已经注意到页面右下角的讨厌的reCAPTCHA徽章,看起来像这样。

如何将reCAPTCHA v3添加到PHP表单并使用Ajax提交

这可能不适用于您的网站设计。你猜怎么了?此常见问题解答说,如果您在用户流程中包含以下文字,则可以隐藏此徽章

1个
2
3

This site is protected by reCAPTCHA and the Google
   <a href="https://policies.google.com/privacy">Privacy Policy</a> and
   <a href="https://policies.google.com/terms">Terms of Service</a> apply.

 

因此,将其添加p到“提交”按钮下方的元素内。

如何将reCAPTCHA v3添加到PHP表单并使用Ajax提交

现在,要真正隐藏徽章,只需将其添加到CSS中即可。

1个
2
3

.grecaptcha-badge {
   visibility: hidden;
}

 

恭喜你!您已成功将Google reCAPTCHA v3设置为表单。现在,您将只收到来自人类的消息-无需他们面对验证码挑战,也无需离开页面。

在此处下载完整的源代码。

 

下载源代码

 

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/61743

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:itbound@sina.com

工作时间:周一至周六,9:30-18:30

 

QR code