README

ColorCaptchaBundle

此包可以帮助您实现带有自动生成颜色的验证码功能。

安装

步骤1：使用composer下载YamilovsColorCaptchaBundle

运行以下命令添加YamilovsColorCaptchaBundle

$ php composer.phar require yamilovs/color-captcha-bundle ^1.0

步骤2：启用包

在kernel中启用包

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Yamilovs\ColorCaptchaBundle\YamilovsColorCaptchaBundle(),
    );
}

使用方法

在您的表单类型中添加ColorCaptchaType

<?php
// src/FooBundle/Form/Type/BarType.php

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Yamilovs\ColorCaptchaBundle\Form\Type\ColorCaptchaType;

class BarType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            //..
            ->add('captcha', ColorCaptchaType::class)
        ;
    }
}

然后，为验证码标记添加一些样式。例如，在您的css文件中

.captcha-block {
  font-size: 18px;
}
.captcha-block .captcha-color {
    cursor: pointer;
    width: 50px;
    height: 50px;
    margin: 0 10px 0 0;
    float: left;
    transition: all 0.35s ease 0s;
}
.captcha-block .captcha-color:hover {
    opacity: 0.7;
}
.captcha-block .captcha-color.selected {
    -webkit-box-shadow: inset 0px 0px 0px 8px rgba(255,255,255,0.5);
    -moz-box-shadow: inset 0px 0px 0px 8px rgba(255,255,255,0.5);
    box-shadow: inset 0px 0px 0px 8px rgba(255,255,255,0.5);
}

这就完成了！

显示颜色块的相对帮助文本

您可以通过包配置全局调整帮助文本的显示方式

# app/config/config.yml

yamilovs_color_captcha:
    # ......
    help_text:
        # position can be 'top' or 'bottom'
        position: 'top' # default value is 'bottom'

或者只为特定的表单类型

class FooType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder
                ->add('captcha', ColorCaptchaType::class, [
                    'help_text_position' => 'top',
                ])
            ;
        }
}

减少颜色数量

您只能调整您想要的那些颜色

# app/config/config.yml

yamilovs_color_captcha:
    # available colors are: 'red', 'blue', 'green', 'grey', 'pink', 'yellow' 
    colors: ['red', 'yellow']

待办事项

• 如何创建自己的颜色