Laravel 快速新增驗證碼教程

心智極客發表於2019-04-24
Laravel

注：本文使用的 Laravel 版本為 5.8。

建立應用

$ laravel new Captcha

配置資料庫及執行遷移

$ php artisan migrate

使用 Laravel 自帶的 auth 元件

$ php artisan make:auth

安裝擴充套件包

$ composer require mews/captcha

釋出配置檔案

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

本文使用預設配置，如果有需要，可根據自己需要進行配置，配置後清空配置快取。

$ php artisan config:cache

captcha 提供了一系列輔助方法

captcha(); // 圖片
captcha_src(); // URL
captcha_img(); // HTML

輔助方法可傳入配置項

captcha_img('inverse');
captcha_src('flat');

同時，該擴充套件包預設註冊了供使用者獲取驗證碼的路由

Laravel 快速新增驗證碼教程

本地路由測試

127.0.0.1:8000/captcha  // 預設使用 default 配置
127.0.0.1:8000/captcha/flat  // 使用 flat 配置
127.0.0.1:8000/captcha/api // 測試 API 返回

測試成功後，我們來為註冊檢視新增驗證碼，可新增到密碼後面

// /resources/views/auth/register.blade.php
<div class="form-group row">
    <label for="captcha" class="col-md-4 col-form-label text-md-right">驗證碼</label>

    <div class="col-md-6">

        <input id="captcha" class="form-control{{ $errors->has('captcha') ? ' is-invalid' : '' }}" name="captcha" required>

        <img class="thumbnail mt-3 mb-2" src="{{ captcha_src() }}" onclick="this.src='/captcha?'+Math.random()" title="點選圖片重新獲取驗證碼">

    @if ($errors->has('captcha'))
      <span class="invalid-feedback" role="alert">
        <strong>{{ $errors->first('captcha') }}</strong>
      </span>
    @endif
  </div>
</div>

該步驟中，我們在 URL 後面附帶了隨機數，防止瀏覽器快取。

Laravel 快速新增驗證碼教程

最後，只需要在註冊控制器中新增驗證即可

// /app/Http/Controllers/Auth/RegisterController.php

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:8', 'confirmed'],
        'captcha' => ['required', 'captcha'],
    ]);
}

相關文章