laravel-5.6 【mews/captcha】图片验证码 api接口形式获取、验证,不通过session

[mews/captcha]

扩展GitHub地址: https://github.com/mewebstudio/captcha

前期准备与说明

在laravel 中使用此扩展,正常的用法是通过session来保存与验证用户输入的验证码是否正确,但我目前的项目是前后台彻底分离的。前台使用vue框架来搭建,后台用laravel来做api后台的接口。前后台通过jwt来标识用户。所以没法使用session来使用这个扩展,百度了好久,无用,最终还是在官方论坛找到解决方案,在此贴出方案,以便后来人查阅

  1. 在laravel中引入此扩展【我的框架版本laravel5.5】

    composer require mews/captcha
    
  1. 找到config/app.php下的providers,添加如下代码

    \Mews\Captcha\CaptchaServiceProvider::class,
    
  2. 找到config/app.php下的aliases,添加如下代码

    'Captcha' => Mews\Captcha\Facades\Captcha::class,
    
  3. 发布配置文件

    php artisan vendor:publish
    

    之后便可以在 config/captcha.php下,配置验证码

   return [
    'characters' => '2346789abcdefghjmnpqrtuxyzABCDEFGHJMNPQRTUXYZ',

    'default'   => [
        'length'    => 9,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'math'      => true,
    ],

    'flat'   => [
        'length'    => 6,
        'width'     => 160,
        'height'    => 46,
        'quality'   => 90,
        'lines'     => 6,
        'bgImage'   => false,
        'bgColor'   => '#ecf2f4',
        'fontColors'=> ['#2c3e50', '#c0392b', '#16a085', '#c0392b', '#8e44ad', '#303f9f',     '#f57c00', '#795548'],
        'contrast'  => -5,
    ],

    'mini'   => [
        'length'    => 3,
        'width'     => 60,
        'height'    => 32,
    ],

    'inverse'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
        'sensitive' => true,
        'angle'     => 12,
        'sharpen'   => 10,
        'blur'      => 2,
        'invert'    => true,
        'contrast'  => -5,
    ]

];

正文开始

因为正常用session的使用方案比较简单,在此不赘述。
下面放上通过api来验证的前后端的关键代码

  1. PHP返回验证码

    // 路由
    Route::get('GetCaptchaImg','UserController@GetCaptchaImg')->name("GetCaptchaImg");
    // 代码
    public function GetCaptchaImg(Request $request){
        return app('captcha')->create('inverse', true);
    }
    
    说明:这里返回的url.img是base64后的图片,可直接放入img标签中的src属性中。key值是与图片绑定的数值,之后需传给后台验证。
    
  2. PHP关键验证代码

    // 路由
    Route::post('CheckCaptcha','UserController@CheckCaptcha')->name("CheckCaptcha");
    // 代码
    public function CheckCaptcha(Request $request){
        $key = $this->FormCheck->isEmpty($request->key,'验证码key');
        if (!$key->code) {
            return result($key->msg);
        }
        $captcha = $this->FormCheck->isEmpty($request->captcha,'验证码');
        if (!$captcha->code) {
            return result($captcha->msg);
        }
    
        if (!captcha_api_check($request->captcha, $request->key)){
            return $this->Resources('验证失败', 0, []);
        }
        return $this->Resources('验证成功', 1, []);
    }
    
  3. 验证结果
    验证码2.png
    验证码.png

标签: none

添加新评论