在本教程中，我们将使用Google Ajax将Google reCAPTCHA v3添加到PHP表单中并提交而不离开页面。如果您的网站上有联系表格或任何此类表格，您就会知道从机器人接收垃圾邮件是多么令人讨厌。Google reCAPTCHA保护您免受垃圾邮件和其他自动滥用的侵害。要继续学习本教程，您需要具备HTML，jQuery和PHP的一些基本知识。
为什么选择Google reCAPTCHA v3？
我们所有人都有令人沮丧的经历，他们试图通过一种形式来快速提交一些信息，而这些形式最终只能面对验证码挑战。我们不得不输入随机字符，然后想知道“是两个V还是W？”，“是否应该添加该空格？”。
网站建设
然后，我们必须选择所有具有斑马线或桥梁的图像，以证明我们是人类。值得庆幸的是，这些天来，许多网站都添加了Google reCAPTCHA v2，它仅显示一个复选框-“我不是机器人”。
但是，在2018年，Google发布了下一版本– reCAPTCHA v3，它根本不需要任何用户交互。它在后台工作，观察用户的行为。此版本为我们（开发人员）提供了一个分数，该分数指示了交互的可疑程度。我们可以使用该分数来防止垃圾邮件。在Google的官方网站管理员博客上了解其工作原理。
现在让我们学习如何将其添加到简单表单中。
注册reCAPTCHA v3密钥
您需要先注册您的网站并在此处获取密钥-https: //www.google.com/recaptcha/admin/create。添加标签，选择reCAPTCHA v3，输入您的域名并提交。
网站建设
这将生成一个“站点密钥”和一个“秘密密钥”。复制两者并确保它们安全。我们将很快需要它们。
HTML表格
让我们使用一个简单的联系表，其中包含全名，电子邮件和消息字段
网站建设
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个
|
|
我们需要在表单提交时提出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 validationfunction 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 formatecho json_encode($output);?> |
完善！我们拥有使用Ajax进行表单提交的完整流程。现在是时候集成reCAPTCHA v3了，如果您认真遵循的话，您将看到它实际上是多么简单。
客户端集成
第一步是使用您的站点密钥加载JavaScript API。将此粘贴到您的jQuery CDN链接下面。
|
1个
|
|
重要说明：将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和检查success，score和action。分数从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 returnedif ($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";} |
你们都准备好了！点击该“提交”按钮，如果您正确集成了所有内容，则应该看到一条消息，说明已成功发送邮件。
奖金提示：
添加javascript API后，您可能已经注意到页面右下角的讨厌的reCAPTCHA徽章，看起来像这样。
这可能不适用于您的网站设计。你猜怎么了？此常见问题解答说，如果您在用户流程中包含以下文字，则可以隐藏此徽章
|
1个
2
3
|
This site is protected by reCAPTCHA and the Google |
因此，将其添加p到“提交”按钮下方的元素内。
现在，要真正隐藏徽章，只需将其添加到CSS中即可。
|
1个
2
3
|
.grecaptcha-badge { visibility: hidden;} |
恭喜你！您已成功将Google reCAPTCHA v3设置为表单。现在，您将只收到来自人类的消息-无需他们面对验证码挑战，也无需离开页面。
在此处下载完整的源代码。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/262017.html