webman-scaptcha

• 使用PHP生成SVG格式的驗證碼
• 需要PHP大于8.0
• 需要安裝redis
• 現(xiàn)已支持緩存字形，提高了在字體文件過大，導(dǎo)致生成驗證碼過慢的問題

避坑

• 每個文字首次載入時還是需要讀取字體，所以在使用英文，數(shù)字的情況緩存下來還是挺快的，因為文字種類比較少，能很快緩存下來
• 如果自行配置char為中文，使用中文驗證碼時，請務(wù)必確認所使用字體包含該漢字，并且需要配置font參數(shù)為中文字體路徑
• 建議生產(chǎn)環(huán)境盡量使用緩存后的字形，提高生成驗證碼的速度

安裝

composer require isszz/webman-scaptcha

如果需要添加字體，放入tp根目錄下config/fonts目錄即可，更改配置fontName=字體文件名

配置

return [
    'type' => null, // 單獨的配置項
    'cache' => true, // 是否啟用字形緩存
    'api' => false, // 是否是API模式
    // 設(shè)置為1時不管驗證對錯, 都會刪除存儲憑證，若驗證失敗則需要刷新一次驗證碼
    // 設(shè)置為0時, 直到驗證輸入正確時, 才刪除存儲憑證，也就是允許試錯
    // 非API模式或者未配置token機制，則需要設(shè)置2才能讓驗證碼為一次性
    'disposable' => 0,
    'width' => 150, // 寬度
    'height' => 50, // 高度
    'noise' => 5, // 干擾線條的數(shù)量
    'inverse' => false, // 反轉(zhuǎn)顏色
    'color' => true, // 文字是否隨機色
    'background' => '', // 驗證碼背景色
    'size' => 4, // 驗證碼字數(shù)
    'ignoreChars' => '', // 驗證碼字符中排除
    'fontSize' => 52, // 字體大小
    'char' => 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', // 預(yù)設(shè)隨機字符
    'math' => '', // 運算模式：1=加法，2=減法，3=乘法，4=除法，或非1=4，則隨機四種
    'mathMin' => 1, // 用于計算的最小值
    'mathMax' => 9, // 用于計算的最大值
    'font' => '', // 用于驗證碼的字體文件路徑, 建議字體文件不超過3MB

    // API模式，使用token機制，使用這里的配置后API會攜帶一個token，在驗證時需要攜帶token和輸入的code進行驗證
    /*'token' => [
        // 也可以自定義\app\common\libs\MyStore::class,
        // 自帶可選：redis，session；建議使用redis
        'store' => 'cache', 
        'expire' => 300,
        'redis' => [
            'host' => '127.0.0.1',
            'port' => 6379,
            'password' => '',
            'select' => 1,
            'timeout' => 0,
        ],
    ],*/

    // 單獨的配置, 會覆蓋上面的配置
    'test' => [
        'noise' => 3,
        'color' => false,
        'char' => '0123456789',
        // 'token' => null,
    ],
];

支持的url參數(shù)配置

url配置參數(shù)優(yōu)先級最高

/scaptcha/t/單獨的配置名
         /m/運算模式：1=加法，2=減法，3=乘法，4=除法，或隨機四種
         /w/寬度
         /h/高度
         /s/字體大小
         /l/非運算模式時，文字數(shù)量
         /n/干擾線條數(shù)量
         /c/文字是否隨機色
         /b/背景顏色
         /d/一次性驗證碼（忽略對錯），非API模式需要設(shè)置2
         /cs/api模式輸出格式1=svg，2=base64
         /rt/禁用緩存字形，生產(chǎn)模式不建議禁用
         /reset/刪除已緩存字形，不建議在生產(chǎn)模式一直加在url參數(shù)中，否則字形緩存無效，字體文件超過3MB會比較慢

使用方法

composer安裝后可直接訪問/scaptcha路徑訪問驗證碼，默認獲取的是json格式:

{
    'code': 0,
    'msg': 'success',
    'token': '8SOy2KSfcSVIP7qTogFCLvLZb9tj5eTB', // API模式，使用token機制否則返回null
    'svg': 'data:image/svg+xml,.../%3E%3C/svg%3E',
}

訪問/scaptcha/svg時獲取到的是可渲染的svg：

<svg xmlns="...."></svg>

非必要情況，可使用組件自己注冊的路由地址使用

快捷助手函數(shù)

tp模板文件中使用

<!-- 第一個參數(shù)為配置項，可參考URL參數(shù)配置，第二個參數(shù)用來設(shè)置domID -->
<div>{:scaptcha_img(['l' => 3], 'J_captcha')}</div>

或者

<!-- 配置項參考URL參數(shù)配置 -->
<?php
    $captchaSrc = scaptcha_src([
        'l' => 5,
    ]);
?>
<img src="{$captchaSrc}" alt="captcha" onclick="this.src='{$captchaSrc}?'+Math.random();">

如果是API方式調(diào)用

[$token, $image] = scaptcha_api([
    'noise' => 3, // 3條干擾線
    'color' => false, // 灰色模式
    'char' => '0123456789', // 數(shù)字驗證碼
]);

// 或指定單獨的配置，第二個參數(shù)用于選擇生成的格式false=svg，true=base64
[$token, $image] = scaptcha_api('test', true);

若需要自行在控制器輸出驗證碼??

use support\Request;
use isszz\captcha\Captcha;

class CaptchaController
{
    /**
     * 獲取驗證碼, 用于api
    */
    public function index(Request $request)
    {
        return json([
            'code' => 0,
            'data' => scaptcha_api(),
            'msg' => 'success',
        ]);
    }

    /**
     * 直接顯示svg驗證碼
    */
    public function svg()
    {   
        $content = scaptcha();

        return response($content, 200, [
            'Content-Type' => 'image/svg+xml',
            'Content-Length' => strlen($content),
        ]);
    }

    /**
     * 驗證輸入驗證碼是否正確|輸出json
    */
    public function check($code, string|null $token = null)
    {
        $json = [
            'code' => 0,
            'msg' => 'success',
            'data' => null,
        ];

        if(!scaptcha_check($code, $token)) {
            $json['code'] = 1;
            $json['msg'] = 'error';
        }

        return json($json);
    }
}

驗證

使用組件注冊的驗證地址驗證

# POST提交
/scaptcha/check?code=xxx
// 如果是API模式
/scaptcha/check?code=輸入驗證碼&token=接口返回的token字段

// 返回
{
    'code': 0, // 0=驗證成；1=驗證失??；2=未提交驗證碼；3=驗證碼組件報錯，請issue
    'msg': 'success',
}

或者使用助手函數(shù)手動驗證

if(!scaptcha_check($code, $token)) {
    // 驗證失敗
}

本組件基于以下開源庫

• php字體庫: PhenX/php-font-lib
• svg-captcha nodejs版: lichaozhy/svg-captcha