簡(jiǎn)介

webman-gridCaptcha 生成類似于谷歌點(diǎn)圖驗(yàn)證碼的小擴(kuò)展，因?yàn)楝F(xiàn)在PHP大部分生成的驗(yàn)證碼，對(duì)于惡意者來(lái)說(shuō)很容易識(shí)別，而這套小擴(kuò)展很簡(jiǎn)單但是對(duì)于機(jī)器人來(lái)說(shuō)需要進(jìn)行深度的機(jī)器學(xué)習(xí)，惡意者攻擊的成本也就增加了，但是這套小擴(kuò)展不同于谷歌驗(yàn)證碼需要機(jī)器學(xué)習(xí)，只需要在本地配置好相應(yīng)的文件即可。因?yàn)樯傻尿?yàn)證碼圖片都是讀取文件進(jìn)行生成，所以建議使用Redis進(jìn)行緩存，代碼默認(rèn)有使用緩存。

安裝

composer require yzh52521/webman-captcha-grid

配置項(xiàng)說(shuō)明

return [
    //生成驗(yàn)證碼圖片配置
    'image' => [
        //驗(yàn)證碼圖片路徑
        'path' => env('GRID_CAPTCHA_IMAGE_PATH', public_path().'/storage/gridcaptcha/image'),
        //從驗(yàn)證碼圖片路徑中獲取的文件后綴名
        'suffix' => env('GRID_CAPTCHA_IMAGE_SUFFIX', 'jpg'),
        //生成驗(yàn)證碼質(zhì)量
        'quality' => env('GRID_CAPTCHA_IMAGE_QUALITY', 70),
        //生產(chǎn)驗(yàn)證碼寬
        'wide' => env('GRID_CAPTCHA_IMAGE_WIDE', 300),
        //生產(chǎn)驗(yàn)證碼高
        'high' => env('GRID_CAPTCHA_IMAGE_HIGH', 300),
    ],
    //驗(yàn)證碼配置
    'captcha' => [
        //生成的驗(yàn)證碼過(guò)期時(shí)間 單位秒
        'validity' => env('GRID_CAPTCHA_IMAGE_VALIDITY', 180),
        //驗(yàn)證碼緩存的key
        'cache_key' => env('GRID_CAPTCHA_IMAGE_CACHE_KEY', 'grid_captcha'),
        //驗(yàn)證碼生成的key長(zhǎng)度
        'key_length' => env('GRID_CAPTCHA_IMAGE_KEY_LENGTH', 64),
        //自定義效驗(yàn)驗(yàn)證碼key字段
        'key_string' => env('GRID_CAPTCHA_IMAGE_KEY_STRING', 'captcha_key'),
        //自定義效驗(yàn)驗(yàn)證碼code字段
        'code_string' => env('GRID_CAPTCHA_IMAGE_CODE_STRING', 'captcha_code'),
    ],
];

使用

生成驗(yàn)證碼

<?php

namespace app\controller;

class Test
{

    /**
     * 生成驗(yàn)證碼
     * @return array
     */
    public function captcha()
    {
        return json(\yzh52521\GridCaptcha\facade\GridCaptcha::get([
            'mobile' => '100xxxxx121'
        ]));
    }
}

-生成結(jié)果

{
  "hint": "猴子",//提示文本
  "captcha_key": "Qh8kHYF4C....",//驗(yàn)證碼key
  "image": "data:image/jpeg;base64,/9j/...."http://base64驗(yàn)證碼圖片 -- 前端渲染顯示
}

前端渲染

 <!--

生成的是一個(gè)九宮格圖片，前端需要渲染圖片，并且生成九個(gè)div用于記錄用戶點(diǎn)擊的宮格位置，宮格位置從 0 開始，當(dāng)點(diǎn)擊到四位的時(shí)候返回給后端進(jìn)行效驗(yàn) ，因?yàn)榍岸思夹g(shù)拙劣我就不放例子了歡迎大佬補(bǔ)充。

大概思路:
-->
<div>
    <!-- img 顯示的是返回的驗(yàn)證碼圖片-->
    <img src="data:image/jpeg;base64...." width="300" height="300" alt="" style="display: block;">
    <div id="0"></div>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
    <div id="4"></div>
    <div id="5"></div>
    <div id="6"></div>
    <div id="7"></div>
    <div id="8"></div>
</div>

效驗(yàn)驗(yàn)證碼

本插件使用了 yzh52521/webman-validate 驗(yàn)證器

<?php
namespace app\controller;

use support\Request;

class Test 
{

    /**
     * 效驗(yàn)
     * @param Request $request
     * @return array|false
     */
    public function check(Request $request)
    {
        /**
         * 傳參效驗(yàn)
         */
        if ($captcha_data = \yzh52521\GridCaptcha\facade\GridCaptcha::check('Qh8kHYF4C....', '1540') === false) {
            return json(['message' => '驗(yàn)證碼錯(cuò)誤', 'code' => 401]);
        }
        /**
         * 傳遞 Request 對(duì)象效驗(yàn)
         */
        if ($captcha_data = \yzh52521\GridCaptcha\facade\GridCaptcha::checkRequest($request)) {
            return json(['message' => '驗(yàn)證碼錯(cuò)誤', 'code' => 401]);
        }

        return $captcha_data;
    }
}

效驗(yàn)成功返回: 返回的是您在生成驗(yàn)證時(shí)傳遞的數(shù)據(jù)，默認(rèn)返回空數(shù)組
效驗(yàn)失敗返回: false

提示： 效驗(yàn)完成正確后 您可以進(jìn)行業(yè)務(wù)邏輯處理，比如可以獲取到上方設(shè)置在驗(yàn)證碼中的數(shù)據(jù) 如：上方設(shè)置的是手機(jī)號(hào)，您這里可以獲取驗(yàn)證碼中的手機(jī)號(hào)，當(dāng)效驗(yàn)成功發(fā)送短信驗(yàn)證碼等...

{
  "mobile" : "100xxxxx121"
}

-本地化提示
文檔 http://www.wtbis.cn/doc/webman/components/translation.html
resource/translations/zh_CN/grid-captcha.php

 <?php
//一個(gè)圖片目錄對(duì)應(yīng)一個(gè)提示
return [
    'banmaxian' => '斑馬線',
    'gongjiaoche' => '公交車',
    'heiban' => '黑板',
    'honglvdeng' => '紅綠燈',
    'hongzao' => '紅棗',
    'houzi' => '猴子',
    'qianbi' => '鉛筆',
    'shutiao' => '薯?xiàng)l',
    'xiaofangshuan' => '消防栓',
    'zhenglong' => '蒸籠',
];

• 新增驗(yàn)證碼圖片

  例：新增一個(gè)類型為 pingguo 驗(yàn)證碼類型的圖片，需要在配置文件中的 image.path 目錄下創(chuàng)建名為 pingguo 的目錄并且把相關(guān)類型的圖片文件存放在 pingguo 目錄，新增一個(gè)類型至少要有四張相關(guān)類型的圖片，不限制文件名，只要文件后綴名是配置文件中指定的即可如下:

─storage
    └─grid-captcha
        └─image
            ├─pingguo
            │       1.jpg
            │       10.jpg
            │       11.jpg
            │       12.jpg
            │       13.jpg

效果圖(可選)