• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载
 访客
首页 » 代码教程 » PHP » 正文

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

小八狐 • 2年前 (2022-07-12) • PHP

在本文中，我将向您展示如何将 Google reCAPTCHA v3 添加到您 php 网站上的表单中。最新的 reCAPTCHA 与以前的版本不同——它根本不需要用户交互。在这篇文章中，我们将了解它是如何工作的，并且我们将构建一个用于演示的真实示例。

作为网站所有者，您一直在寻找一种强大的反垃圾邮件解决方案，该解决方案可以防止您网站上的垃圾邮件，并且只允许合法内容通过。您可以集成一个简单的基于文本的 CAPTCHA 解决方案并且足以阻止顽皮的机器人的日子已经一去不复返了。

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

您可以通过两种不同的方式在您的网站上集成 reCAPTCHA v2。第一个是著名的“我不是机器人”复选框。另一种是隐形方法，即仅在可疑情况下才需要用户交互。在这篇文章中，我们将讨论 reCAPTCHA v3，它是不可见的，根本不需要用户交互！

在下一节中，我将解释 reCAPTCHA v3 的工作原理，稍后我们将构建一个真实世界的示例来演示它。

Google reCAPTCHA v3 的工作原理

都说一张图值一千字！因此，让我们看一下以下屏幕截图，以了解在您的网站上集成 reCAPTCHA v3 时到底发生了什么。

如何将Google reCAPTCHA v3添加到PHP表单的示例 第1张让我们尝试详细了解整体流程：

  1. 最终用户请求网页。

  2. Web 应用程序或服务器返回请求的页面，其中包括 reCAPTCHA v3 代码。

  3. 接下来，用户填写表单并单击提交按钮。

  4. 在将表单数据提交到服务器之前，客户端上的 reCAPTCHA v3 代码对 Google 服务器进行ajax调用并获取令牌。这里重要的是，我们必须在 AJAX 调用期间传递具有适当值的 action 属性。您应该传递标识您的表单的值。这是您将用于在服务器端进行验证的值以及其他参数。

  5. 上一步获取的token与其他表单数据一起提交。在大多数情况下，我们会在提交表单之前将两个隐藏变量附加到表单，令牌和操作。

  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 管理面板 创建一个链接，该链接向您显示一个表单，要求您提供一些详细信息，如以下屏幕截图所示

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

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

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

如何将Google reCAPTCHA v3添加到PHP表单的示例 第3张请复制并记下这些内容，因为我们稍后在构建真实示例时将需要它们。

建立一个真实的例子

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

我们将创建两个 PHP 文件：  subscribe_newsletter_form.php 和 subscribe_newsletter_submit.php。

  • subscribe_newsletter_form.php 文件用于显示时事通讯订阅表单，它允许用户输入电子邮件地址并订阅时事通讯。 

  • subscribe_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>

让我们浏览一下这个文件中的重要片段。

 首先，我们在该部分加载了 reCAPTCHA javascript库 。<head>请务必注意，您必须将您的 site key 作为 render=YOUR_SITE_KEY 查询字符串参数传递。此外，我们还加载了 jQuery 库，以便我们可以使用与表单相关的实用方法。没有必要使用 jQuery——您可以使用您选择的任何其他库，甚至可以使用原生JavaScript。

接下来，我们创建了一个包含电子邮件文本框和提交按钮的基本表单——这里没什么特别的。

最后，文件末尾的 javaScript 片段是实现 reCAPTCHA 的关键部分。我们为表单创建了 jQuery 提交处理程序，以便当用户提交表单时，我们会捕获该事件并在实际提交表单之前进行必要的处理。我们使用该 event.preventDefault() 功能来阻止表单提交正常进行。

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

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

处理表单提交和验证

继续并使用以下代码创建 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 对象，其中包含可用于验证的必要信息。如前所述，您至少应该检查三件事以确保表单是由人提交的：成功、操作和分数。

如何使用 reCAPTCHA PHP 客户端库

在上一节中，我们讨论了如何在 subscribe_newsletter_submit.php文件中处理表单提交和验证。在此文件中，我们使用核心 PHP 代码调用 Google API 并验证来自 Google 服务器的响应。尽管了解底层流程很有用，但通常您只想使用现成的库，这样您就不必重写这些常用代码。

在本节中，我将向您展示如何使用 reCAPTCHA PHP 客户端库 来处理表单提交和验证。

继续并从您的项目目录运行以下命令以安装 reCAPTCHA PHP 客户端库。

$composer require google/recaptcha "^1.2"

安装后，您只需要包含 autoload.php文件，如以下代码段所示。

require_once '/path/to/recaptcha/src/autoload.php';

在我们的示例中，让我们重新访问 subscribe_newsletter_submit.php文件以进行必要的更改。

<?php
require_once '/path/to/recaptcha/src/autoload.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'];

// use the reCAPTCHA PHP client library for validation
$recaptcha = new \ReCaptcha\ReCaptcha(RECAPTCHA_V3_SECRET_KEY);
$resp = $recaptcha->setexpectedAction($action)
                  ->setScoreThreshold(0.5)
                  ->verify($token, $_SERVER['REMOTE_ADDR']);

 // verify the response
if ($resp->isSuccess()) {
    // valid submission
    // go ahead and do necessary stuff
} else {
    // collect errors and display it
    $errors = $resp->getErrorCodes();
}

如您所见，我们已经实例化了 \ReCaptcha\ReCaptcha由 reCAPTCHA 客户端库提供的类。

接下来，我们调用了几个方法，比如setExpectedAction and  setScoreThreshold，来设置传入的动作和期望的得分值。最后，我们调用了该verify 方法来检查 $token 变量是否包含有效值。

该 verify方法返回一个对象，我们可以使用它来检查验证是否成功。如您所见，我们已经使用该isSuccess 方法对其进行了检查。如果验证不成功，您可以使用该 getErrorCodes方法检索错误并采取相应措施。

如您所见，使用 reCAPTCHA 客户端库来验证 Google reCAPTCHA v3的日期非常简单。

这使得在您的 PHP 网页中使用 Google reCAPTCHA v3 来检测和防止垃圾邮件变得容易。

结论

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


文章目录
  • Google reCAPTCHA v3 的工作原理
  • 注册 reCAPTCHA v3 密钥和秘密
  • 建立一个真实的例子
    • 创建时事通讯订阅表格
    • 处理表单提交和验证
    • 如何使用 reCAPTCHA PHP 客户端库
  • 结论
    • 如无特殊说明，文章均为本站原创，如若转载，请注明出处：老吴教程
    视频资源部分来自互联网，勿轻易相信视频广告！请自行鉴别避免上当受骗！
    文章标题：如何将Google reCAPTCHA v3添加到PHP表单的示例
    文章地址：https://www.weixiaolive.com/en/index.php/post/2693.html

    相关推荐

      最新文章 | 热门文章 | 随机文章

    站长SO库
    源码
    阿里云