Laravel驗證碼類庫: gregwar/captcha

    laravel框架自身並不攜帶驗證碼類，我這裏採用開源的gregwar/captcha，來作驗證。

    gregwar/captcha的github地址爲 https://github.com/Gregwar/Captcha

 

    一、下載 gregwar/captcha 

    （1） 在Laravel根目錄（app同級目錄）的 composer.json 的 "require"最後添加一行代碼，以下代碼塊所示：

"require": {
    "php": ">=5.6.4",
    "laravel/framework": "5.4.*",
    "laravel/tinker": "~1.0",
     "gregwar/captcha": "1.*" //這一行是新添的，其餘代碼不用理睬
  },

    （2） cd 至 Laravel根目錄，執行 composer update 。若你係統沒安裝 composer 可參考我寫的這篇文章 《windows 與 linux 下composer的安裝與經常使用命令》

composer update

    這時候，若安裝成功，則\vendor目錄下應該有  gregwar 文件夾。

 

    二、生成簡易的驗證碼圖文

    （1）添加路由

Route::any('index/login', 'IndexController@login');

    （2）生成驗證碼

   在 \app\Http\Controllers 目錄下的 IndexController.php中，添加以下代碼

<?php 
namespace App\Http\Controllers;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Gregwar\Captcha\CaptchaBuilder;//驗證碼類

class IndexController extends Controller
{
     /**
     * 生成驗證碼圖片
     */
    public function verifycode()
    {

        $builder = new CaptchaBuilder();
        $builder->build($width = 116, $height = 37);//自定義圖片寬高 
        session(['loginVerifyCode' => $builder->getPhrase()]); //將驗證碼存入session，方便登錄驗證
        header("Cache-Control: no-cache, must-revalidate");  
        header('Content-Type: image/jpeg');  
        $builder->output(); 

    }

｝

（3）前端頁面調用驗證碼圖片

在\resources\views\index 目錄下，新建login.blade.php 模版。裏面關於圖片驗證碼大致代碼以下：

<img src="{{url('index/verifycode')}}" data-url="{{url('index/verifycode')}}" class="VerifyCode">

// 引入jquery.js
<script type="text/javascript">

   $('body').on('click','.VerifyCode',function(){
      $(this).attr('src',$(this).data('url') + '?id=' + Math.random());
   });

</script>

驗證碼圖片效果圖

    （4）後臺驗證

在上文提到的  IndexController.php 控制器中，添加login方法（倘若post提交至該方法）。

public function login(Request $request)
{
    if ($request->isMethod('post')){
        
        $code = $request->input('code');//post提交後的驗證碼
        echo ( session()->get('loginVerifyCode') == $code )
                ? '驗證碼正確'
                : '驗證碼錯誤';
    }

}

這時候簡單的驗證碼邏輯，便可走通。

 

三、定製驗證碼類

（1）改變圖文驗證碼的顯示內容，長度

改變驗證碼顯示的內容與長度，有以下2種方法，但其均不支持中文驗證碼。

    第一種：本身生成驗證碼內容。寫一個生成隨機內容的驗證碼，並在實例化 CaptchaBuilder 時將其做爲參數傳入便可，以下代碼所示。

/**
* 生成驗證碼圖片
*/
public function verifycode()
{

  $builder = new CaptchaBuilder('abcd'); //只是這裏多傳了個參數，其它代碼地方均與上文中的verifycode()方法如出一轍
  $builder->build($width = 116, $height = 37);
  session(['loginVerifyCode' => $builder->getPhrase()]);
  header("Cache-Control: no-cache, must-revalidate");  
  header('Content-Type: image/jpeg');  
  $builder->output(); 

}

    你只需傳參至new CaptchaBuilder('abcd')中，前端頁面即顯示"abcd"的驗證碼。

    第二種：調用類自身方法，生成自定義的驗證碼。

    gregwar/captcha 生成隨機驗證碼的方法是在 PhraseBuilder類的 build方法。你只需傳入本身想要驗證碼的長度，與生成驗證碼的內容2個參數便可。簡單代碼以下

use Gregwar\Captcha\CaptchaBuilder;//驗證碼類
use Gregwar\Captcha\PhraseBuilder;// 生成驗證碼內容類

public function verifycode()
  {
     //生成驗證碼內容. 第一個參數表明長度，第二個則是組成驗證碼內容的元素
     $phrase = (new PhraseBuilder())->build(4,'abcdefghijkmnpqrstuvwxy3456789');

     $builder = new CaptchaBuilder($phrase);//將生成的驗證碼傳入類中
     $builder->build($width = 116, $height = 37);
     session(['loginVerifyCode' => $builder->getPhrase()]);
     header("Cache-Control: no-cache, must-revalidate");  
     header('Content-Type: image/jpeg');  
     $builder->output(); 
  }

    這裏，便可定製長度爲 4，內容爲'abcdefghijklmnpqrstuvwxyz123456789' 組成的驗證碼。