如何在Symfony 4表单中实现BotDetect验证码

本文概述

• 1.安装BotDetect验证码
• 2.注册验证码捆绑路由
• 3.创建配置文件
• 4.将CaptchaType字段添加到你的FormType
• 5.将captchaCode字段添加到你的实体
• 如何隐藏” Symfony的BotDetect CAPTCHA库”消息

很久以前, 我们写了一篇文章, 介绍如何在Symfony 3项目中实现Google ReCaptcha, 只要你可以依靠上述工具, 它就可以很好地工作。但是, 某些应用程序限制了Google产品的使用。因此, 开发人员将必须实施另一种选择, 以防止漫游器在网络上随机填写表格。 BotDetect验证码库是在PHP中轻松实现此目标的最著名的库之一。

在本文中, 我们将向你介绍如何在Symfony 4中安装和使用BotDetect Captcha库。

1.安装BotDetect验证码

BotDetect CAPTCHA生成器是一种非跟踪表单安全解决方案, 它使用多种对人类来说很容易但对机器人却很难的措施来阻止自动表单发布。 BotDetect还提供了一种音频验证码替代方法, 以使视障人士可以访问网站, 从而使你能够制作WCAG和Section 508兼容的网站。

在Symfony 4中, 你可以使用symfony-captcha-bundle通过以下命令通过composer轻松安装该库：

composer require captcha-com/symfony-captcha-bundle:"4.*"

这将安装库并在你的项目上自动注册其类。有关该库的更多信息, 请访问此处的官方网站。

2.注册验证码捆绑路由

为了呈现验证码, 请求音频等, 你将需要在/config/routes.yaml文件中注册捆绑包中已包含的路由, 如下所示：

# /app/config/routes.yaml
captcha_routing:
    resource: "@CaptchaBundle/Resources/config/routing.yml"

一旦验证码在后端实现, 这将允许其在前端工作。

3.创建配置文件

现在, 你将需要使用PHP在应用程序的config / packages目录中创建一个配置文件。我知道, 我们通常只在该目录中添加yaml文件, 但是该库是一种特殊情况, 因为它具有硬编码的要求, 其中包括上述目录中的PHP文件, 因此, 你必须使用简单的if命令添加一个PHP文件。和带有数组的返回：

<?php 
// app/config/packages/captcha.php
if (!class_exists('CaptchaConfiguration')) { return; }

// BotDetect PHP Captcha configuration options
return [
    // Captcha configuration for example form
    'ExampleCaptchaUserRegistration' => [
        'UserInputID' => 'captchaCode', 'ImageWidth' => 250, 'ImageHeight' => 50, ], ];

返回的关联数组将具有单个字段的自定义配置的名称作为键。在此示例中, 我们将只有一个验证码配置用于用户注册表单。这个想法是在需要的地方自定义每个验证码, 你可以指定稍后在FormType上使用哪种配置。

4.将CaptchaType字段添加到你的FormType

遵循Symfony准则, 当我们创建表单时, 显然应该具有与某个Entity相关联的FormType。如前所述, 在这种情况下, 我们将拥有一个注册表单, 该表单允许用户在数据库中注册新用户, 这意味着该表单将在数据库中保留一个User实体。该表格包含常规字段, 例如名字, 姓氏, 电子邮件和密码。但是, 它还应该包含一个新字段, 即验证码, 可以像Type的buildForm方法中的其他字段一样简单地添加。

请注意, 尽管该字段不在数据库中, 但应将其添加为映射字段, 就像在下面的示例中一样：

<?php

// app/src/Form/RegistrationFormType.php
namespace App\Form;

// ... ///

// Import the Captcha Field Type and Validator
use Captcha\Bundle\CaptchaBundle\Form\Type\CaptchaType;
use Captcha\Bundle\CaptchaBundle\Validator\Constraints\ValidCaptcha;

// ... ///

class RegistrationFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            // ... ///

            ->add('captchaCode', CaptchaType::class, array(
                'captchaConfig' => 'ExampleCaptchaUserRegistration', 'constraints' => [
                    new ValidCaptcha([
                        'message' => 'Invalid captcha, please try again', ]), ], ))

            // ... ///
        ;
    }

    // ... ///
}

从理论上讲, 你现在会问自己, 这将使你的表单失败, 因为我们正在注册一个与User实体不相关的新字段, 你是对的！但是, 请不要执行你的应用程序, 而是执行最后一步, 你会明白为什么。

5.将captchaCode字段添加到你的实体

最后, 你只需要向你的实体中添加一个新的”字段”, 这当然是不会被映射的, 只需要存在于你要持久存储到数据库中的实体中, 以便库可以检查用户提供的验证码是否正确：

<?php

// src/Entity/User.php
namespace App\Entity;

use Doctrine\ORM\Mapping as ORM;

class User
{
    // ... //
    protected $captchaCode;
    
    public function getCaptchaCode()
    {
      return $this->captchaCode;
    }

    public function setCaptchaCode($captchaCode)
    {
      $this->captchaCode = $captchaCode;
    }

    // ... //
}

这样, 你现在应该可以运行你的应用程序, 并且你将看到验证码。不要忘记在表单视图中呈现新字段：

{% extends 'base.html.twig' %}

{% block title %}Register{% endblock %}

{% block body %}
    <h1>Register</h1>

    {{ form_start(registrationForm) }}
        {{ form_row(registrationForm.firstName) }}
        {{ form_row(registrationForm.lastName) }}
        {{ form_row(registrationForm.email) }}
        {{ form_row(registrationForm.plainPassword) }}
        {{ form_row(registrationForm.agreeTerms) }}

        {# render the captcha field to the form in the view #}
        {{ form_row(registrationForm.captchaCode) }}

        <button class="btn">Register</button>
    {{ form_end(registrationForm) }}
{% endblock %}

如何隐藏” Symfony的BotDetect CAPTCHA库”消息

可惜的是, 该库没有提供将消息硬编码隐藏在库中的方法, 但是你不应修改供应商类。 DOM加载后, 可以通过JavaScript来解决此问题：

$(function(){
    $("a[title ~= 'BotDetect']").removeAttr("style");
    $("a[title ~= 'BotDetect']").removeAttr("href");
    $("a[title ~= 'BotDetect']").css('visibility', 'hidden');
});

编码愉快！