Laravel 图片验证码 Captcha

原创已于 2022-07-27 15:36:31 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#laravel #php

于 2022-03-02 10:52:19 首次发布

laravel 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在 Laravel 中使用组件实现图片验证码，包括拉取相关组件、实例应用、配置路由、前端交互等方面，详细讲解了整个过程。

1. 拉取组件

composer require gregwar/captcha

use Gregwar\Captcha\CaptchaBuilder; 
use Gregwar\Captcha\PhraseBuilder;

2. 使用实例

//生成验证码 
public function getCaptcha($key = null){
      $phrase = new PhraseBuilder;
      // 设置验证码位数
      $code = $phrase->build(4);
      // 生成验证码图片的Builder对象,配置相应属性
      $builder = new CaptchaBuilder($code, $phrase);
      // 设置背景颜色
      $builder->setBackgroundColor(220, 210, 230);
      $builder->setMaxAngle(25);
      $builder->setMaxBehindLines(10);
      $builder->setMaxFrontLines(10);
      // 可以设置图片宽高及字体
      $builder->build($width = 100, $height = 40, $font = null);
      // 获取验证码的内容
      $phrase = $builder->getPhrase();
      // 把内容存入session
      session()->put('captcha', $phrase);
      // 生成图片
      header('Cache-Control: no-cache, must-revalidate');
      header('Content-Type:image/jpeg');
      $builder->output();
      }

    //检验验证码
    public function check(){
       $code = session()->get('captcha');
        if(strtolower($param['captcha']) != strtolower($code)) {
            //验证码未通过
            return errorReturn(4,'验证码有误','');
        }
    }

3. 路由

Route::get('getCaptcha','admin\AdminController@getCaptcha');

4.js

<script>
$('#register-form').find('.captcha-img').click(function () {
$(this).attr('src', routeHome + '/getCaptcha' + '/' + Math.random() + '/register');
});
</script>

vue
  
this.getCaptcha="{{url('getCaptcha')}}?s="+Math.random();

5. 前台

<img class="captcha-img" src="{{url('/getCaptcha/1/register')}}" alt="">

VUE

 <el-input style="width: 60%;" v-model="form.verify" class="{{$errors->has('captcha')?'parsley-error':''}}"  placeholder="验证码"></el-input>
 <img id="verify" :src="getCaptcha" style="cursor: pointer;float: right" @click="refresh()">