說明

mews/captcha 是一個非常易於整合的圖片驗證碼擴充套件包，使用此擴充套件包可以分分鐘給你的網站加上驗證碼功能。

完整的高質量擴充套件包推薦列表，請前往：下載量最高 100 個 Laravel 擴充套件包推薦

1. 安裝

1). 使用 composer 安裝：

composer require mews/captcha

2). 修改 config/app 檔案，新增 ServiceProvider：

在 providers 陣列內追加如下內容

'providers' => [
    ...
    Mews\Captcha\CaptchaServiceProvider::class,
],
 

在 aliases 陣列內追加如下內容

'aliases' => [
    ...
    'Captcha' => Mews\Captcha\Facades\Captcha::class,
],

3). 執行 php artisan vendor:publish 生成配置檔案 config/captcha.php

我們可以開啟配置檔案，檢視其內容：

return [

    'characters' => '2346789abcdefghjmnpqrtuxyzABCDEFGHJMNPQRTUXYZ',

    'default'   => [
        'length'    => 5,
        'width'     => 120,
        'height'    => 36,
        'quality'   => 90,
    ],

    '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,
    ]

];
 

可以看到這些配置選項都非常通俗易懂，你可以在此修改對應選項自定義驗證碼的長度、背景顏色、文字顏色等屬性，在此不做過多敘述。

至此，此擴充套件包就安裝完成了。

2. 用例

此擴充套件包的使用邏輯分為兩步：

1. 給使用者展示驗證碼；
2. 驗證使用者輸入的驗證碼是否正確。

下面將分別為大家講解。

2.1 給使用者展示驗證碼

擴充套件包提供了兩個函式用於展示驗證碼：

1. captcha_img() - 返回 img 格式的驗證碼；
2. captcha_src() - 返回驗證碼的 url 地址。

在你的模板檔案裡（如：register.blade.php）直接呼叫即可：

<div class="form-group code">
    <label>驗證碼</label>
    <input class="tt-text" name="captcha">
    {!! captcha_img() !!}
</div>

又或者：

<div class="form-group code">
    <label>驗證碼</label>
    <input class="tt-text" name="captcha">
    <img src="{{captcha_src()}}">
</div>

輸出的效果如下：

使用自定義樣式的驗證碼

如果想使用自定義的驗證碼，如上文配置檔案裡的 inverse 選項：

return [
    ...

    'default'   => [
        ...
    ],

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

];

則只要這樣呼叫即可：

{!! captcha_img('inverse') !!}
{{captcha_src('inverse')}}

展示的效果為：

怎麼樣，是不是很簡單呢？

2.2 判斷使用者輸入的驗證碼是否正確

擴充套件包使用了 自定義驗證規則 方式擴充套件了驗證規則，我們只要在對應的 Controller 新增以下的規則即可：

$this->validate($request, [
    'captcha' => 'required|captcha'
]);

同理，你也可以建立專門的 表單驗證 來處理此判斷。

以上。

本專案由 The EST Group 成員 @monkey 整理髮布，首發地為 PHPHub 社群，轉載必須貼上原文連結 https://laravel-china.org/topics/2895

轉自https://laravel-china.org/topics/2895/extension-recommended-mewscaptcha-image-authentication-code-solution