[扩展推荐] mews/captcha 图片验证码解决方案

说明

mews/captcha 是一个非常易于集成的图片验证码扩展包,使用此扩展包可以分分钟给你的网站加上验证码功能。

file

完整的高质量扩展包推荐列表,请前往:下载量最高 100 个 Laravel 扩展包推荐

1. 安装

1). 使用 composer 安装:

composer require mews/captcha

2). 修改 config/app 文件,添加 ServiceProvider:

providers 数组内追加如下内容

'providers' => [
    ...
    Mews\Captcha\CaptchaServiceProvider::class,
],

aliases 数组内追加如下内容

'aliases' => [
    ...
    'Captcha' => Mews\Captcha\Facades\Captcha::class,
],

3). 运行 php artisan vendor:publish 生成配置文件 config/captcha.php

我们可以打开配置文件,查看其内容:

return [

    'characters' => '2346789abcdefghjmnpqrtuxyzABCDEFGHJMNPQRTUXYZ',

    'default'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
    ],

    'flat'   => [
        'length'    => 6,
        'width'     => 160,
        'height'    => 46,
        'quality'   => 90,
        'lines'     => 6,
        'bgImage'   => false,
        'bgColor'   => '#ecf2f4',
        'fontColors'=> ['#2c3e50', '#c0392b', '#16a085', '#c0392b', '#8e44ad', '#303f9f', '#f57c00', '#795548'],
        'contrast'  => -5,
    ],

    'mini'   => [
        'length'    => 3,
        'width'     => 60,
        'height'    => 32,
    ],

    'inverse'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'sensitive' => true,
        'angle'     => 12,
        'sharpen'   => 10,
        'blur'      => 2,
        'invert'    => true,
        'contrast'  => -5,
    ]

];

可以看到这些配置选项都非常通俗易懂,你可以在此修改对应选项自定义验证码的长度、背景颜色、文字颜色等属性,在此不做过多叙述。

至此,此扩展包就安装完成了。

2. 用例

此扩展包的使用逻辑分为两步:

  1. 给用户展示验证码;
  2. 验证用户输入的验证码是否正确。

下面将分别为大家讲解。

2.1 给用户展示验证码

扩展包提供了两个函数用于展示验证码:

  1. captcha_img() - 返回 img 格式的验证码;
  2. captcha_src() - 返回验证码的 url 地址。

在你的模板文件里(如:register.blade.php)直接调用即可:

<div class="form-group code">
    <label>验证码</label>
    <input class="tt-text" name="captcha">
    {!! captcha_img() !!}
</div>

又或者:

<div class="form-group code">
    <label>验证码</label>
    <input class="tt-text" name="captcha">
    <img src="{{captcha_src()}}">
</div>

输出的效果如下:

file

使用自定义样式的验证码

如果想使用自定义的验证码,如上文配置文件里的 inverse 选项:

return [
    ...

    'default'   => [
        ...
    ],

    'inverse'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'sensitive' => true,
        'angle'     => 12,
        'sharpen'   => 10,
        'blur'      => 2,
        'invert'    => true,
        'contrast'  => -5,
    ]

];

则只要这样调用即可:

{!! captcha_img('inverse') !!}
{{captcha_src('inverse')}}

展示的效果为:

file

怎么样,是不是很简单呢?

2.2 判断用户输入的验证码是否正确

扩展包使用了 自定义验证规则 方式扩展了验证规则,我们只要在对应的 Controller 添加以下的规则即可:

$this->validate($request, [
    'captcha' => 'required|captcha'
]);

同理,你也可以建立专门的 表单验证 来处理此判断。

以上。

本项目由 The EST Group 成员 @monkey 整理发布,首发地为 PHPHub 社区,转载必须贴上原文链接 分享:【扩展推荐】mews/captcha 图片验证码解决方案

本帖已被设为精华帖!
本帖由系统于 7年前 自动加精
monkey
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 27

@辣条拌鱼翅 追查原码,发现用的是hash的方式(类似于密码校验)进行验证码的校验,感觉不太合理,恶意者只需要获取一次 key 和 value,就可以用这一对key-value进行多次攻击请求

5年前 评论

图片验证码太难识别,因为图片边缘总是把部分字符切割出去了。

有什么方便可以让字符串里图片边缘的距离大一点吗?

7年前 评论
jasonjiang123

lumen 使用是否有手册

7年前 评论

想问一下如何点击然后刷新验证码,如果用ajax调用哪个方法

6年前 评论
rovast

@babyObama

<img src="{{captcha_src()}}" onclick="this.src='/captcha/default?'+Math.random()" alt="验证码">

在这里有解决办法
https://github.com/mewebstudio/captcha/iss...

6年前 评论
rovast

@langqu
可以试试 flat 模式

<img src="{{captcha_src('flat')}}" onclick="this.src='/captcha/default?'+Math.random()">
6年前 评论
bestcyt

请教下,我这边验证了,但是明明填对了为什么还是验证失败?

file

6年前 评论
bestcyt

哦吼,解决了,是我自己字段没改,不好意思

6年前 评论

file
这个不管输入验证码对错,都返回验证码错误

6年前 评论

谢谢!吼吼!找到错误了!

6年前 评论
monkey

@你在害怕什么 那肯定的,目前一堆常用的包还不支持 5.5

6年前 评论
Summer

已经支持 5.5

6年前 评论
xtn

@Summer
按照您的实战课程 为什么提交的时候出现302 如何把验证码验证去掉就是正常的 请问如何处理?

6年前 评论

有谁解决了点击验证码自动刷新的办法吗?

6年前 评论

比较绕,但相似的写法还是有的

  1. 利用issue中的办法(推荐)
    <img src="{{captcha_src()}}" onclick="this.src='/captcha/default?'+new Date().getTime()" id="captchaCode" alt="captcha" class="captcha">
  2. 利用原生方法
    {!!
        app('captcha')->img('default', [
            'onclick'=>"this.src='/captcha/default?{$_SERVER['REQUEST_TIME']}'",
            'id'=>'captchaCode',
            'alt'=>'captcha',
            'class'=>'captcha',
        ])
     !!}
5年前 评论

支持api前后端分离吗?

5年前 评论
道法自然 3年前

同一个页面需要两个验证码 该如何处理 比如同一个页面里面切换选项卡 里面都需要验证码

5年前 评论
喜欢悠闲独自在

@二十六七 这个是什么错误,我也遇到了,用api验证的时候

5年前 评论

超级好用!感谢作者!!!

5年前 评论

@L学习不停 是支持API的

Route::get('captcha', function () {
    $res = app('captcha')->create('default', true);
    return $res; // 用JSON格式后输出, 不然有些字符会被转义. 
});

Route::post('check_captcha', function (Request $req) {
    $captcha = $req->input('captcha');
    $key = $req->input('key');
    $res = captcha_api_check($captcha, $key);
    dump($res);
});

详细见-laravel-mews/captcha-图形验证码-api调用

5年前 评论

@辣条拌鱼翅 追查原码,发现用的是hash的方式(类似于密码校验)进行验证码的校验,感觉不太合理,恶意者只需要获取一次 key 和 value,就可以用这一对key-value进行多次攻击请求

5年前 评论

<img src="{{ captcha_src('inverse') }}" alt="">

inverse 配置总是验证失败。。。

4年前 评论

只要有多个页面,其他页面刷新,这个旧页面的验证码就失效,填其他的却可以,这个怎么解决

1年前 评论
$user = $this->validate($request, [
     'email' => 'required|email|exists:users,email',
     'password' => 'required|min:8|max:18',
     'captcha' => 'required|size:4|captcha'
], [
      'email.required' => '邮箱不能为空',
      'email.email' => '邮箱格式不正确',
      'email.exists' => '账户不存在',
      'password.required' => '密码不能为空',
      'password.min' => '密码长度不能小于8位',
      'password.max' => '密码长度不能大于18位',
      'captcha.required' => '验证码不能为空',
      'captcha.size' => '验证码长度不正确',
      'captcha.captcha' => '验证码错误',
], [
      'captcha' => '验证码'
]);

采用前后端分离形式

<img :src="captchaUrl" @click="refreshCaptcha" alt="captcha" />

验证码长度验证是对的 但是我输入对与错都会返回验证码错误

file

3个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!