Laravel验证码-Layui验证码实现

在Web开发中，验证码是防止恶意操作的重要手段之一。介绍如何在Laravel项目中使用Layui框架实现验证码功能。我们将通过两种方法来实现这一目标：一种是使用Laravel自带的验证码功能，另一种是使用第三方库。

1. 使用Laravel自带的验证码功能

Laravel自带了生成验证码的功能，我们可以通过以下步骤来实现：

1.1 安装依赖

确保你的Laravel项目已经安装了intervention/image包，这个包用于生成验证码图片。

bash
composer require intervention/image


1.2 创建验证码控制器

在app/Http/Controllers目录下创建一个名为CaptchaController.php的文件，并添加以下代码：

php
<?php</p>

<p>namespace AppHttpControllers;</p>

<p>use IlluminateHttpRequest;
use IlluminateSupportFacadesCache;
use IlluminateSupportStr;
use InterventionImageFacadesImage;</p>

<p>class CaptchaController extends Controller
{
    public function index()
    {
        // 生成随机验证码
        $code = Str::random(6);</p>

<pre><code>    // 将验证码存储到缓存中
    Cache::put('captcha', $code, now()->addMinutes(5));

    // 生成验证码图片
    $image = Image::canvas(120, 40, '#ffffff');
    $fontFile = public_path('fonts/arial.ttf');
    $image->text($code, 10, 30, function ($font) use ($fontFile) {
        $font->file($fontFile);
        $font->size(20);
        $font->color('#000000');
        $font->align('left');
        $font->valign('top');
    });

    // 输出验证码图片
    return response($image->response('png'))->header('Content-Type', 'image/png');
}

}

1.3 添加路由

在routes/web.php文件中添加路由：

php
use AppHttpControllersCaptchaController;</p>

<p>Route::get('/captcha', [CaptchaController::class, 'index']);

1.4 在前端显示验证码

在你的Layui页面中，添加以下HTML和JavaScript代码来显示验证码：

html
</p>



    
    <title>Layui验证码示例</title>
    



<div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
        
    </div>
    <div class="layui-form-mid">
        <img src="/captcha" alt="验证码" id="captcha">
    </div>
</div>



    layui.use(['form'], function(){
        var form = layui.form;

        form.verify({
            captcha: function(value){
                if(value.length !== 6){
                    return '验证码必须为6位';
                }
            }
        });
    });





<p>

2. 使用第三方库

除了使用Laravel自带的验证码功能，我们还可以使用第三方库来实现更复杂的验证码功能。这里推荐使用mews/captcha库。

2.1 安装依赖

安装mews/captcha库：

bash
composer require mews/captcha


2.2 发布配置文件

运行以下命令发布配置文件：

bash
php artisan vendor:publish --provider="MewsCaptchaCaptchaServiceProvider"


2.3 配置验证码

在config/captcha.php文件中，你可以根据需要配置验证码的样式和行为。

2.4 创建验证码控制器

在app/Http/Controllers目录下创建一个名为CaptchaController.php的文件，并添加以下代码：

php
<?php</p>

<p>namespace AppHttpControllers;</p>

<p>use IlluminateHttpRequest;
use MewsCaptchaFacadesCaptcha;</p>

<p>class CaptchaController extends Controller
{
    public function index()
    {
        return response()->json([
            'captcha' => Captcha::src()
        ]);
    }</p>

<pre><code>public function verify(Request $request)
{
    $captcha = $request->input('captcha');

    if (Captcha::check($captcha)) {
        return response()->json(['success' => true]);
    } else {
        return response()->json(['success' => false, 'message' => '验证码错误']);
    }
}

}

2.5 添加路由

在routes/web.php文件中添加路由：

php
use AppHttpControllersCaptchaController;</p>

<p>Route::get('/captcha', [CaptchaController::class, 'index']);
Route::post('/captcha/verify', [CaptchaController::class, 'verify']);

2.6 在前端显示验证码

在你的Layui页面中，添加以下HTML和JavaScript代码来显示验证码：

html
</p>



    
    <title>Layui验证码示例</title>
    



<div class="layui-form-item">
    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
        
    </div>
    <div class="layui-form-mid">
        <img src="" alt="验证码" id="captcha">
    </div>
</div>

<button class="layui-btn">验证</button>



    layui.use(['form'], function(){
        var form = layui.form;

        form.verify({
            captcha: function(value){
                if(value.length !== 6){
                    return '验证码必须为6位';
                }
            }
        });

        function refreshCaptcha() {
            fetch('/captcha')
                .then(response => response.json())
                .then(data => {
                    document.getElementById('captcha').src = data.captcha;
                });
        }

        function verifyCaptcha() {
            var captcha = document.querySelector('input[name="captcha"]').value;

            fetch('/captcha/verify', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ captcha: captcha })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('验证码正确');
                } else {
                    alert(data.message);
                    refreshCaptcha();
                }
            });
        }

        // 初始加载验证码
        refreshCaptcha();
    });





<p>

通过以上两种方法，你可以在Laravel项目中轻松实现Layui验证码功能。希望这篇对你有所帮助！