webman-scaptcha

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

避坑

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

安裝

composer require isszz/webman-scaptcha

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

配置

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

    // API模式，使用token機(jī)制，使用這里的配置后API會(huì)攜帶一個(gè)token，在驗(yàn)證時(shí)需要攜帶token和輸入的code進(jìn)行驗(yàn)證
    /*'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,
        ],
    ],*/

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

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

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

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

使用方法

composer安裝后可直接訪問(wèn)/scaptcha路徑訪問(wèn)驗(yàn)證碼，默認(rèn)獲取的是json格式:

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

訪問(wèn)/scaptcha/svg時(shí)獲取到的是可渲染的svg：

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

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

快捷助手函數(shù)

tp模板文件中使用

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

或者

<!-- 配置項(xiàng)參考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ù)字驗(yàn)證碼
]);

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

若需要自行在控制器輸出驗(yàn)證碼??

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

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

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

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

    /**
     * 驗(yàn)證輸入驗(yàn)證碼是否正確|輸出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);
    }
}

驗(yàn)證

使用組件注冊(cè)的驗(yàn)證地址驗(yàn)證

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

// 返回
{
    'code': 0, // 0=驗(yàn)證成；1=驗(yàn)證失?。?=未提交驗(yàn)證碼；3=驗(yàn)證碼組件報(bào)錯(cuò)，請(qǐng)issue
    'msg': 'success',
}

或者使用助手函數(shù)手動(dòng)驗(yàn)證

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

本組件基于以下開(kāi)源庫(kù)

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