1、安装扩展包

$ composer require "mews/captcha:~2.0"

运行以下命令生成配置文件 config/captcha.php：

$  php artisan vendor:publish --provider='Mews\Captcha\CaptchaServiceProvider'

打开配置文件，查看其内容：

config/captcha.php

<?php
 
return [
    'characters' => ['2', '3', '4', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'j', 'm', 'n', 'p', 'q', 'r', 't', 'u', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'M', 'N', 'P', 'Q', 'R', 'T', 'U', 'X', 'Y', 'Z'],
    'default' => [
        'length' => 9,
        'width' => 120,
        'height' => 36,
        'quality' => 90,
        'math' => false,
    ],
    'math' => [
        '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,
    ]
];

characters 选项是用来显示给用户的所有字符串，default, flat, mini, inverse 分别是定义的四种验证码类型，你可以在此修改对应选项自定义验证码的长度、背景颜色、文字颜色等属性

2、页面嵌入

此扩展包的使用分为两步：

1. 前端展示 —— 生成验证码给用户展示，并收集用户输入的答案；

2. 后端验证 —— 接收答案，检测用户输入的验证码是否正确。

1. 前端展示

@extends('layouts.app')
 
@section('content')
<div>
  <div class="row justify-content-center">
    <div>
      <div>
        <div>{{ __('Register') }}</div>
 
        <div>
          <form method="POST" action="{{ route('register') }}">
            @csrf
 
            <div class="form-group row">
              <label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
 
              <div>
                <input id="name" type="text" class="form-control{{ $errors->has('name') ? ' is-invalid' : '' }}" name="name" value="{{ old('name') }}" required autofocus>
 
                @if ($errors->has('name'))
                <span role="alert">
                  <strong>{{ $errors->first('name') }}</strong>
                </span>
                @endif
              </div>
            </div>
 
            <div class="form-group row">
              <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
 
              <div>
                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required>
 
                @if ($errors->has('email'))
                <span role="alert">
                  <strong>{{ $errors->first('email') }}</strong>
                </span>
                @endif
              </div>
            </div>
 
            <div class="form-group row">
              <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
 
              <div>
                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
 
                @if ($errors->has('password'))
                  <span role="alert">
                    <strong>{{ $errors->first('password') }}</strong>
                  </span>
                @endif
              </div>
            </div>
 
            <div class="form-group row">
              <label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
 
              <div>
                <input id="password-confirm" type="password" name="password_confirmation" required>
              </div>
            </div>
 
            <div class="form-group row">
              <label for="captcha" class="col-md-4 col-form-label text-md-right">验证码</label>
 
              <div>
                <input id="captcha" class="form-control{{ $errors->has('captcha') ? ' is-invalid' : '' }}" name="captcha" required>
 
                <img class="thumbnail captcha mt-3 mb-2" src="{{ captcha_src('flat') }}" onclick="this.src='/captcha/flat?'+Math.random()" title="点击图片重新获取验证码">
 
                @if ($errors->has('captcha'))
                  <span role="alert">
                    <strong>{{ $errors->first('captcha') }}</strong>
                  </span>
                @endif
              </div>
            </div>
 
            <div class="form-group row mb-0">
              <div class="col-md-6 offset-md-4">
                <button type="submit" class="btn btn-primary">
                  {{ __('Register') }}
                </button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

1. captcha_src()      方法是 mews/captcha 提供的辅助方法，用于生成验证码图片链接；

2. 验证码 区块中      onclick() 是 JavaScript 代码，实现了点击图片重新获取验证码的功能，允许用户在验证码太难识别的情况下换一张图片试试。

2. 后端验证

前端展示部分我们已经开发完毕，接下来处理后端验证逻辑。 mews/captcha 是专门为 Laravel 量身定制的扩展包，能很好的兼容 Laravel 生成的注册逻辑。我们只需要在注册的时候，添加上表单验证规则即可：

app/Http/Controllers/Auth/RegisterController.php
<?php
.
.
.
 
class RegisterController extends Controller
{
    .
    .
    .
 
    /**
     * Get a validator for an incoming registration request.
     *
     * @param  array  $data
     * @return \Illuminate\Contracts\Validation\Validator
     */
    protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'email', 'max:255', 'unique:users'],
            'password' => ['required', 'string', 'min:6', 'confirmed'],
            'captcha' => ['required', 'captcha'],
        ], [
            'captcha.required' => '验证码不能为空',
            'captcha.captcha' => '请输入正确的验证码',
        ]);
    }
    .
    .
    .
}

我们添加了验证规则：

'captcha' => ['required', 'captcha'],

表达式里的第二个 captcha 是 mews/captcha 自定义的表单验证规则。扩展包非常巧妙地利用了 Laravel 表单验证器提供的 自定义表单验证规则 功能。令我们在开发验证码时非常方便。

Validator 表单验证的 make() 方法第三个参数是自定义错误提示，这里我们对验证码的错误提示进行自定义。