【源码】基于PHP的旋转图片角度验证码系统

项目简介

本项目是基于PHP构建的旋转图片角度验证码系统，可生成验证图片。系统支持使用GD库或Imagick扩展，提供session、cache、cookie、Redis等多种存储驱动，同时具备jquery版、原生js版、vue版、uniapp版等多种前端版本，能有效提高验证码的安全性和识别难度。

项目的主要特性和功能

1. 多方式生成验证图片：支持GD库或Imagick扩展，满足不同环境需求。
2. 多存储驱动选择：提供session、cache、cookie、Redis等存储驱动，适应不同应用场景。
3. 多前端版本适配：有jquery版、原生js版、vue版、uniapp版，便于集成到各类项目。
4. 多种输出格式：支持webp、png、jpg等输出格式，webp格式图片更小、清晰度高且支持透明底色。
5. 安全验证机制：验证采用token交换，加密方式为AES，保障验证安全。
6. 容错率设置：可设置容错率，提升用户体验。
7. 多语言支持：可通过setLang方法设置语言。

安装使用步骤

安装

使用Composer安装项目依赖： composer require isszz/rotate-captcha -vvv

配置

编辑配置文件，示例如下： ```php <?php

return [ 'size' => 350, // 生成图片尺寸 'expire' => 300, // 生成验证有效期 'outputType' => 'webp', // 输出类型, png, jpg, webp 'salt' => '%%$$#$~#$^isszz@cfyun.cc^&*$#$~', 'handle' => 'gd', 'earea' => 10, // 容错率 'gd' => [ 'quality' => 80, 'bgcolor' => '', // 底色, #fff ], 'imagick' => [ 'quality' => 80, 'bgcolor' => '', // 底色, white ], // Redis存储驱动需要的配置 'redis' => [ 'host' => '127.0.0.1', 'port' => 6379, 'password' => '', 'select' => 0, 'timeout' => 0, 'expire' => 0, 'persistent' => false, 'prefix' => 'captcha_', ], // token存储驱动，默认为thinkphp6，需要其他的可以参考下面实现 // 'store' => isszz\captcha\rotate\store\CacheStore::class, // cache token存储驱动，基于thinkphp6 // 'store' => isszz\captcha\rotate\store\CookieStore::class, // cookie token存储驱动，基于thinkphp6 // 'store' => isszz\captcha\rotate\store\SessionStore::class, // session token存储驱动，基于thinkphp6 'store' => isszz\captcha\rotate\store\RedisStore::class, // redis token存储驱动，需支持redis，不依赖框架 ]; ```

使用

PHP部分（以tp6为例）

```php <?php declare (strict_types = 1);

namespace app\common\controller;

use isszz\captcha\rotate\CaptchaException; use isszz\captcha\rotate\facade\Captcha as RotateCaptcha; use isszz\captcha\rotate\support\File;

use think\Response; use think\Request;

class Captcha { /* * 生成验证码图片和相关信息 / public function rotate(Request $request) { $image = File::make(upload_path('captcha_mtl'))->rand();

    $data = RotateCaptcha::setLang('zh-cn')->create(
        $image,
        upload_path('captcha') // 用于存储生成图片的目录
    )->get(260); // 260为最终生成的图片尺寸

    if(!$data) {
        $this->result(1, 'error');
    }
    $this->result(0, 'success', ['str' => $data['str']], ['X-CaptchaToken' => $data['token']]);
}

/**
 * 验证
 */
public function verify(Request $request)
{
    $angle = $request->get('angle');
    $token = $request->header('X-CaptchaToken') ?: $request->get('token');

    if(empty($token) || empty($angle)) {
        $this->result(1, 'error');
    }

    try {
        if(RotateCaptcha::setLang('zh-cn')->check($token, $angle) === true) {
            $this->result(0, 'success');
        }
    } catch(CaptchaException $e) {
        $this->result(1, $e->getMessage());
    }

    $this->result(1, 'error');
}

/**
 * 通过前端传递str字段给后端叫唤图片显示到前端
 */
public function img(Request $request)
{
    $str = $request->get('id');

    [$mime, $image] = RotateCaptcha::output($str, upload_path('captcha'));

    if(empty($image)) {
        return '';
    }

    return response($image, 200, [
        'Cache-Control' => 'private, no-cache, no-store, must-revalidate',
        'Content-Type' => $mime,
        'Content-Length' => strlen($image)
    ]);
}

/**
 * 返回json
 */
public function result(int|string $code = 0, string $msg = 'success', array|string $data, array $header = [])
{
    $result = [
        'code' => $code,
        'data' => $data,
        'msg' => lang($msg) ?: ($code > 0 ? 'error' : 'success'),
    ];

    $response = Response::create($result, 'json')->code(200);

    if(!empty($header)) {
        $response = $response->header($header);
    }
    throw new \think\exception\HttpResponseException($response);
}

} ```

前端部分（以原生JS为例）

javascript // .J__captcha__是输出验证码的容器 // 方式1 let myCaptcha = document.querySelectorAll('.J__captcha__').item(0).captcha({ // 验证成功时显示 timerProgressBar: !0, // 是否启用进度条 timerProgressBarColor: '#07f', // 进度条颜色 url: { create: '/common/captcha/rotate', // 获取验证码信息 check: '/common/captcha/verify', // 验证 img: '/common/captcha/img', // 交换旋转图 }, // 初始化回调 init: function (captcha) { // console.log(captcha); }, // 验证成回调 success: function() { console.log('Captcha state：success'); }, // 验证失败回调 fail: function() { console.log('Captcha state：fail'); }, // 触发验证回调, 不管成功与否 complete: function(state) { console.log('Captcha complete， state：', state); }, // 验证码触发关闭(验证成功后需要关闭) close: function(state) { modal.close(); // 关闭你的modal console.log('Captcha close， state：', state); } }); // 方式2 let myCaptcha = new Captcha(document.querySelectorAll('.J__captcha__').item(0), { // options同上... });

以上是基本的安装和使用步骤，你可根据实际需求调整配置和代码。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】