一个小巧的Laravel-captcha 验证码 包

说起验证码,尽管用户反感但还是挺需要的,以前的项目用自己写的基于GeeTest(极验)的 Laravel + Vue 组件,这次也考虑过reCaptcha的国内版,不过实在担心改版、收费及其它原因,所以自己用Laravel做一个吧。

这个包默认是用于SPA这种无状态下的响应,所以没有依赖Session,使用Session可以依照IStorage进行扩展,记得middleware使用web。

内置两个路由,一个获取验证码图像,返回一个base64的代码和一个身份标识;另一个进行验证。
提供简单的字符展示和数学计算两种,每种都支持Ascii(阿拉伯数字)和非Ascii(如中文),样子如下:



用法

  • 获取验证码数据
axios
    .get('your_domain/api/v1/captcha/image')
    .then(response => (this.captcha = response.data))

返回

{
    "image": "data:image/png;base64,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",
    "validation": "f9cc27ee094dbb5024da2e9a103b3642"
}
  • 校验
    axios
    .post('your_domain/api/v1/captcha/image', post_data)
    .then(response => (this.validation = response.data))

响应如下

{
    "message": "The captcha code input valid, please try again",
    "status": 403
}

使用配置文件可以方便的修改路由

    'router_api' => '/api/v1/captcha/image',

配置

源码中有比较细致的注释

    php artisan vendor:publish --tag=captcha
<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Captcha router name
    |--------------------------------------------------------------------------
    |
    */
    'router' => '/api/v1/captcha/image',
    /*
    |--------------------------------------------------------------------------
    | Specify captcha generator.
    |--------------------------------------------------------------------------
    |
    */
    'generator' => \Tao\Captcha\Core\Generator\SimpleGenerator::class,

    /*
    |--------------------------------------------------------------------------
    | Specify code generator.
    |--------------------------------------------------------------------------
    |
    */
    'code' => \Tao\Captcha\Core\Code\CalculatorCode::class,

    'storage' => \Tao\Captcha\Core\Storage\CacheStorage::class,

    /*
   |--------------------------------------------------------------------------
   | Number type
   |--------------------------------------------------------------------------
   | ASCII number / Not ASCII number
   */
   //    'codeType' => [
   //        'chars' => '一二三四五六七八九',
   //        'isAscii' => false,
   //        'operations' => '加减乘' // if you use calculator-style, you need to add this (mapped to 'plus', 'minus', 'multiply')
   //    ],
    'codeType' => [
        'chars' => '1234567890',
        'isAscii' => true,
        'operations' => '+-*' // if you use calculator-style, you need to add this (mapped to 'plus', 'minus', 'multiply')
    ],

    /*
    |--------------------------------------------------------------------------
    | Font
    |--------------------------------------------------------------------------
    |
    */
    'font' => base_path('vendor/tao/captcha/src/resources/fonts/ximai.ttf'),

    /*
    |--------------------------------------------------------------------------
    | Font size
    |--------------------------------------------------------------------------
    | Font size in pixels.
    |
    */
    'fontSize' => 26,

    /*
    |--------------------------------------------------------------------------
    | Letter spacing
    |--------------------------------------------------------------------------
    | Spacing between letters in pixels.
    |
    */
    'letterSpacing' => 15,

    /*
    |--------------------------------------------------------------------------
    | Code Length
    |--------------------------------------------------------------------------
    */
    'length' => [4, 5],


    /*
    |--------------------------------------------------------------------------
    | Image Size
    |--------------------------------------------------------------------------
    | Captcha image size can be controlled by setting the width
    | and height properties.
    |
    |
    */
    'width' => 180,
    'height' => 50,

    /*
    |--------------------------------------------------------------------------
    | Background Captcha
    |--------------------------------------------------------------------------
    | You can specify an array or string.
    |
    */
    'background' => ['f9f4e0', 'd3dee0', 'f6f7f9'],

    /*
    |--------------------------------------------------------------------------
    | Colors characters
    |--------------------------------------------------------------------------
    | You can specify an array or string.
    |
    */
    'colors' => ['b8364f', '0390aa', '1b6aa8'],

    /*
    |--------------------------------------------------------------------------
    | Scratches
    |--------------------------------------------------------------------------
    | The number of scratches displayed in the Captcha.
    |
    */
    'scratches' => [3, 3],

];

文件结构

├── src
│   ├── CaptchaServiceProvider.php
│   ├── Controllers
│   │   └── CaptchaController.php
│   ├── Core
│   │   ├── Captcha.php
│   │   ├── Code
│   │   │   ├── AbstractCode.php
│   │   │   ├── CalculatorCode.php
│   │   │   └── SimpleCode.php
│   │   ├── Generator
│   │   │   ├── AbstractGenerator.php
│   │   │   ├── IGenerator.php
│   │   │   └── SimpleGenerator.php
│   │   ├── Helper.php
│   │   └── Storage
│   │       ├── CacheStorage.php
│   │       └── IStorage.php
│   ├── Facades
│   │   └── Captcha.php
│   ├── resources
│   │   ├── fonts
│   │   │   └── ximai.ttf
│   │   └── lang
│   │       ├── en
│   │       │   └── message.php
│   │       └── zh-CN
│   │           └── message.php
│   └── routes
│       └── api.php
├── tests
│   └── CaptchaTest.php

Github

欢迎到这里无情鼓励

《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 2

很赞

2年前 评论
__NULL (楼主) 2年前

现在这种验证码已经使用很少了,滑动验证现在比较热门

2年前 评论

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