将 reCAPTCHA v3 添加到帝国CMS 的 PHP表单并使用Ajax提交

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

为什么选择Google reCAPTCHA v3?

我们所有人都有令人沮丧的经历,他们试图通过一种形式来快速提交一些信息,而这些形式最终只能面对验证码挑战。我们不得不输入随机字符,然后想知道“是两个V还是W?”,“是否应该添加该空格?”。
在这里插入图片描述
然后,我们必须选择所有具有斑马线或桥梁的图像,以证明我们是人类。值得庆幸的是,这些天来,许多网站都添加了Google reCAPTCHA v2,它仅显示一个复选框-“我不是机器人”。

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

现在让我们学习如何将其添加到帝国CMS 的表单中。

第一步 注册reCAPTCHA v3密钥

您需要先注册您的网站并在此处获取密钥-https: //www.google.com/recaptcha/admin/create。添加标签,选择reCAPTCHA v3,输入您的域名并提交。
在这里插入图片描述
这将生成一个“站点密钥”和一个“秘密密钥”。复制两者并确保它们安全。我们将很快需要它们。

第二步 前端

让我们使用一个简单的联系表,其中包含全名,电子邮件和消息字段
在这里插入图片描述

HTML 页面

为了简化本教程,下面仅显示HTML代码。

加载 jQuery 库

<script src='/static/js/jquery.min.1.8.3.js' defer></script>

使用网站密钥加载 JavaScript API

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

表单代码

<form action="/e/enews/index.php" id="contact-form" method="post" enctype="multipart/form-data" name="commonBottom" id="common">
    <input type="hidden" name="enews" value="AddFeedback">
    <input type="hidden" name="bid" value="2">
    <input type="hidden" name="title" value="Common form">
    <input type="hidden" name="ecmsfrom" value="9">
    <input type="hidden" id="ref" value="RICHI" name="ref">
    <input type="hidden" name="site" value="your site name">
    <!-- 如果您查看reCAPTCHA v3文档,则需要grecaptcha.execute在希望保护的每个操作上调用。我们是表单提交。该调用会生成一个令牌,该令牌需要与我们的表单数据一起发送,以便在服务器端进行验证。最好的方法是在这样的表单中包含一个隐藏的输入字段,然后将令牌值动态分配给该字段: -->
    <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
   
   <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>
   <input type="submit" class="sub" value="Submit" id="formsubmit">
   <!-- 下方隐藏的 div “alert”,用于在提交表单后显示从服务器收到的消息。如果同一个页面有多个表单,最好使用 class,因为 ID 为唯一值。 -->
   <div class="alert"></div>
</form>
JS页面

Ajax表单提交

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

$('form').submit(function(event) {
       event.preventDefault(); // 防止直接提交表单
        $("form input.sub").val("Sending...").addClass("sending").attr("disable",true); // 显示“Sending...”让用户知道表单正在提交,并使用 disable 禁用 input 属性,防止多次点击。
        $('.output').html("Sending... Don't refresh the page");
        let dataForm = $(this).serialize(); // 序列化表单值,结果类型为 string。写在这里是为了当页面有多个表单,获取当前表单值。
        // 调用以下函数,并用标记值填充隐藏的输入字段。发出Ajax请求时,这将自动包括令牌值以及其他表单数据。
       grecaptcha.ready(function () {
       // “action”值特定于此联系表单提交操作。在多个位置添加reCAPTCHA时,不同的操作可帮助分析整个网站上的数据。
           grecaptcha.execute('YOUR_SITE_KEY_HERE', { action: 'contact' }).then(function (token) {
              $("input[name='recaptcha_response']").val(token); // 将 token 值传递到当前页面所有表单中
              // 在这里进行 Ajax 调用
        $.ajax({
           url: '/e/enews/index.php',
           type: 'post',
           data: dataForm + '&recaptcha_response=' + token, // 要加上新获取的 token 值
           dataType: 'json',
           success: function( _response ){
               // Ajax 请求成功。 _response 是一个 JSON 对象
               var error = _response.error;
               var success = _response.success;
               if(error != "") {
                   // 如果出现错误,将其显示给用户
                   $('.output').html(error);
                   $("form input.sub").val("Error").addClass("successed");
               }
               else {
                   // 如果成功,将其显示给用户
                   dataLayer.push({"event":"submitSuccess"}); // 传递事件 submitSuccess 到数据层,以便 GTM 可以获取转化成功的信息
                   $('.output').html(success);
                   $("form input.sub").val("Success").addClass("successed");
               }
           },
           error: function(jqXhr, json, errorThrown){
               // 在 Ajax 错误的情况下,显示结果以供演示
               var error = jqXhr.responseText;
               $('.output').html(error);
           }
       }); 

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

第三步:服务器端

在服务器端,我们需要验证收到的数据并发送 JSON 响应。

PHP 页面(/e/class/q_functions.php)

找到 AddFeedback 函数,并在内部添加验证语句。

reCAPTCHA 获取分数

在服务器端验证数据(名称,电子邮件和消息)后,我们需要从Google获取分数以验证它是否是人机交互。

$error_output = '';
$success_output = '';
// 构建 POST 请求以从 Google 获取 reCAPTCHA v3 分数
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_SECRET_KEY_HERE'; // 在此处插入您的密钥
$recaptcha_response = $_POST['recaptcha_response']; // 发出 POST 请求获取 token
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response); //  把整个文件读入一个字符串中

重要说明:密钥仅用于服务器端。

解码并检查

收到的响应是 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的阈值。

$recaptcha = json_decode($recaptcha); // 对 JSON 格式的字符串进行解码,转换为 PHP 变量
// 根据返回的分数采取行动
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'contact') {
	$success_output = "recaptcha ok";
} else {
	$error_output = "Sorry, something went wrong, please refresh the page and try again.";
	print_r("Sorry, something went wrong, please refresh the page and try again.");
	//  print_r($recaptcha);  // 测试得分时使用
	return;
}       

替换 printerror

将帝国默认的 printerror 结果返回方式全部替换为 success_output 或者 error_output。

最后传参

$output = array(
   'error'     =>  $error_output,
   'success'   =>  $success_output
);
// 输出需要是JSON格式
echo json_encode($output);

完成!我们拥有使用 Ajax 进行表单提交的完整流程。

第四步:表单验证

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

需要验证以下方面:

  • reCAPTCHA V3 分数拦截是否有效
  • 成功与失败提示信息显示情况
  • event 数据层传参情况是否成功,不会重复(通过 GTM 验证)
  • 同页面不同表单是否都可以正常提交

在这里插入图片描述

第五步 隐藏 reCAPTCHA 图标(可选)

添加javascript API后,您可能已经注意到页面右下角的讨厌的reCAPTCHA徽章,看起来像这样。
在这里插入图片描述
这可能不适用于您的网站设计。如果您在用户流程中包含以下文字,则可以隐藏此徽章

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到“subm it”按钮下方的元素内。

在这里插入图片描述
现在,要真正隐藏徽章,只需将其添加到CSS中即可。

.grecaptcha-badge {
   visibility: hidden;
}

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

参考来源:
https://developers.google.com/recaptcha/docs/v3?hl=zh-cn#actions
https://www.shejiku.net/recaptcha-v3tianjiaphpajaxtijiao.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值