如何将Google reCAPTCHA v3添加到PHP表单的示例

在本文中,我将向您展示如何将Google reCAPTCHA v3添加到PHP网站上的表单中。 最新的reCAPTCHA与以前的版本不同-完全不需要用户交互。 在本文中,我们将了解其工作原理,并为演示目的构建一个真实示例。

另一方面,如果您在网站上使用了第三方反垃圾邮件解决方案,则您可能已经知道Google提供的reCAPTCHA解决方案。 对于每个reCAPTCHA版本,Google都增强了检测和过滤垃圾邮件的功能。 具体来说,reCAPTCHA v2是不同的第三方反垃圾邮件解决方案中最好的之一。

您可以通过两种不同的方式将reCAPTCHA v2集成到您的网站上。 第一个是著名的“我不是机器人”复选框。 另一种是不可见的方法,因为仅在可疑情况下才需要用户交互。 在本文中,我们将讨论reCAPTCHA v3,它是不可见的,完全不需要用户交互!

在下一节中,我将解释reCAPTCHA v3的工作原理,稍后我们将构建一个真实的示例进行演示。

Google reCAPTCHA v3的工作方式

据说一张图片值一千字! 因此,让我们看一下下面的屏幕截图,以了解将reCAPTCHA v3集成到网站上时到底发生了什么。

reCAPTCHA v3总体流程

让我们尝试详细了解整体流程:

  1. 最终用户请求一个网页。
  2. Web应用程序或服务器返回所请求的页面,其中包括reCAPTCHA v3代码。
  3. 接下来,用户填写表格并单击提交按钮。
  4. 在将表单数据提交到服务器之前,客户端上的reCAPTCHA v3代码对Google服务器进行AJAX调用并获得令牌。 这里重要的是,我们必须在AJAX调用期间传递带有适当值的action属性。 您应该传递标识您的表格的值。 这是您将在服务器端用于验证的值以及其他参数。
  5. 在上一步中获得的令牌与其他表单数据一起提交。 在大多数情况下,在提交表单之前,我们会将两个隐藏变量附加到表单上,标记和操作。
  6. 提交表单后,我们必须执行验证步骤来确定表单是否由人提交。 第一步,我们将发出POST请求以验证响应令牌。 POST请求将令牌以及Google机密传递到Google服务器
  7. 响应是一个JSON对象,我们将使用它来确定表单是否由人提交。 以下代码段显示了JSON对象的格式。
{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

我们必须执行三项检查,以确保继续处理表格是安全的。 响应分数应大于0.5 ,并且成功属性应为TRUE 。 除此之外,您还必须将响应动作值与随表格一起提交的动作隐藏变量的值进行比较。

reCAPTCHA v3 API会为每个请求返回一定的分数,而不会造成用户干扰。 您获得的响应分数基于用户与您的站点的交互(即他们的按键和鼠标移动)。 reCAPTCHA v3通过您网站上的实际流量进行学习。 因此在不同的环境中得分可能不同。 首先,您可以使用0.5的阈值,以后可以根据需要对其进行调整。

这就是该过程的概述。 在下一节中,我们将介绍如何向Google注册您的网站以获得网站密钥和网站秘密。

注册reCAPTCHA v3密钥和机密

Google reCAPTCHA库要求您先注册域的密钥,然后才能真正使用它。 在本节中,我们将介绍如何注册。

首先,转到reCAPTCHA管理面板以创建一个链接,该链接为您提供一个表格,要求您提供一些详细信息,如以下屏幕截图所示。

reCAPTCHA管理面板注册您的网站

reCAPTCHA类型字段中,选择reCAPTCHA v3选项。 根据需要填写“ 所有者”信息。 接下来,阅读并接受reCAPTCHA服务条款 。 最后,单击“ 提交”按钮以保存设置。

提交表单后,Google会为您的域生成一个站点密钥和站点密钥,如以下屏幕截图所示。

复制站点密钥和机密以供以后使用

请复制并记下这些内容,因为稍后在构建实际示例时将需要它们。

建立一个真实的例子

在上一节中,我们创建了必要的凭证,可在设置reCAPTCHA v3时使用。 在本节中,我们将创建一个示例来演示如何将其集成到您的PHP网页中。

我们将创建两个PHP文件: subscribe_newsletter_form.phpsubscribe_newsletter_submit.php

  • subscription_newsletter_form.php文件用于显示新闻通讯订阅表单,该表单允许用户输入电子邮件地址并订阅新闻通讯。
  • subscription_newsletter_submit.php文件处理表单提交并进行必要的验证。

创建时事通讯订阅表单

继续并创建包含以下内容的subscribe_newsletter_form.php文件。

<html>
  <head>
    <title>Subscribe to Newsletter</title>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous"></script>

    <script src="https://www.google.com/recaptcha/api.js?render=6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y"></script>
  </head>
  <body>
    <div>
      <b>Subscribe Newsletter</b>
    </div>

    <form id="newsletterForm" action="subscribe_newsletter_submit.php" method="post">
      <div>
          <div>
              <input type="email" id="email" name="email">
          </div>
          <div>
              <input type="submit" value="submit">
          </div>
      </div>
    </form>

    <script>
    $('#newsletterForm').submit(function(event) {
        event.preventDefault();
        var email = $('#email').val();

        grecaptcha.ready(function() {
            grecaptcha.execute('6LdLk7EUAAAAAEWHuB2tabMmlxQ2-RRTLPHEGe9Y', {action: 'subscribe_newsletter'}).then(function(token) {
                $('#newsletterForm').prepend('<input type="hidden" name="token" value="' + token + '">');
                $('#newsletterForm').prepend('<input type="hidden" name="action" value="subscribe_newsletter">');
                $('#newsletterForm').unbind('submit').submit();
            });;
        });
  });
  </script>
  </body>
</html>

让我们仔细阅读该文件中的重要片段。

首先,我们在<head>部分中加载了reCAPTCHA JavaScript库。 请务必注意,您必须将site key作为render=YOUR_SITE_KEY查询字符串参数render=YOUR_SITE_KEY 。 另外,我们还加载了jQuery库,以便我们可以使用与表单相关的实用程序方法。 不必使用jQuery,您可以使用您选择的任何其他库,甚至可以使用原始JavaScript。

接下来,我们创建了一个基本表单,其中包括电子邮件文本框和“提交”按钮-在这里没什么。

最后,文件末尾有一个JavaScript代码段,这是实现reCAPTCHA的关键部分。 我们已经为表单创建了jQuery提交处理程序,以便在用户提交表单时,我们捕获该事件并在实际提交表单之前进行必要的处理。 我们使用event.preventDefault()函数来停止正常提交表单。

接下来, grecaptcha对象调用execute方法,该方法通过执行AJAX调用从Google服务器获取令牌。 重要的是要注意,在调用execute方法时必须传递站点密钥操作名称 。 操作名称可让您在Google管理控制台中详细了解数据。 它还用于验证服务器端的reCAPTCHA响应,稍后我们将看到。

execute方法收到令牌响应时,它将令牌传递给then方法中提供的匿名函数。 接下来,我们将两个新的隐藏变量附加到表单tokenaction以及它们的值。 最后,我们通过调用jQuery的submit方法来提交表单。

处理表格提交和确认

继续并使用以下代码创建subscribe_newsletter_submit.php文件,以处理表单提交。

<?php
define("RECAPTCHA_V3_SECRET_KEY", 'YOUR_SECRET_HERE');

if (isset($_POST['email']) && $_POST['email']) {
    $email = filter_var($_POST['email'], FILTER_SANITIZE_STRING);
} else {
    // set error message and redirect back to form...
    header('location: subscribe_newsletter_form.php');
    exit;
}

$token = $_POST['token'];
$action = $_POST['action'];

// call curl to POST request
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL,"https://www.google.com/recaptcha/api/siteverify");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array('secret' => RECAPTCHA_V3_SECRET_KEY, 'response' => $token)));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
$arrResponse = json_decode($response, true);

// verify the response
if($arrResponse["success"] == '1' && $arrResponse["action"] == $action && $arrResponse["score"] >= 0.5) {
    // valid submission
    // go ahead and do necessary stuff
} else {
    // spam submission
    // show error message
}

提交表单后,最重要的部分是验证与其他表单值一起提交的令牌。 为此,您需要向https://www.google.com/recaptcha/api/siteverify URL发出POST请求。 另外,您需要传递密钥令牌作为POST数据。 在上面的示例中,我们使用了PHP cURL函数来发出POST请求。

作为响应,您将获得一个JSON对象,其中包含可用于验证的必要信息。 如前所述,您至少应该检查三件事,以确保该表格由人提交:成功,行动和得分。

因此,通过这种方式,您可以在PHP网页中使用Google reCAPTCHA v3来检测并防止垃圾邮件。

结论

今天,我们讨论了如何使用网络上最流行的反垃圾邮件解决方案之一:Google reCAPTCHA v3。 我们创建了一个真实的示例,以演示如何将其集成到PHP网站中。

翻译自: https://code.tutsplus.com/tutorials/example-of-how-to-add-google-recaptcha-v3-to-a-php-form--cms-33752

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值