[擴充套件推薦] 使用 laravel-gridCaptcha 本地生成類似於谷歌點圖驗證碼

dabao_asda發表於2021-10-04
套件LaravelAPT谷歌

介紹

剛學習laravel幾個月，之前的一個專案使用的一個驗證碼看laravel好像沒有類似的驗證碼擴充套件，於是自己做了一個擴充套件包 laravel-gridCaptcha 生成類似於谷歌點圖驗證碼的小工具，因為現在PHP大部分生成的驗證碼，對於惡意者來說很容易識別，而這套小擴充套件很簡單但是對於機器人來說需要進行機器學習，惡意者攻擊的成本也就增加了，但是這套小擴充套件不同於谷歌驗證碼需要機器學習，只需要在本地配置好相應的檔案即可。因為是本地生成，不同於谷歌驗證碼需要進行網路互動，特別在國內很慢，因為生成的驗證碼圖片都是讀取檔案進行生成，所以建議使用Redis進行快取，程式碼預設有快取驗證碼圖片目錄以及驗證碼

ps:因為是第一次開源，有很多程式碼寫的不是很好，歡迎大佬提出修改意見。

Github主頁

packagist

預覽

Preview

安裝

支援 Laravel 8 以上版本：

 composer require deletedb/laravel-captcha-grid

配置項說明

  • 釋出配置檔案
php artisan vendor:publish --provider="Deletedb\Laravel\Providers\LaravelServiceProvider"

config/gridcaptcha.php
return [
    //生成驗證碼圖片配置
    'image' => [
        //驗證碼圖片路徑
        'path' => env('GRID_CAPTCHA_IMAGE_PATH', storage_path('gridcaptcha\image')),
        //從驗證碼圖片路徑中獲取的檔案字尾名
        'suffix' => env('GRID_CAPTCHA_IMAGE_SUFFIX', 'jpg'),
        //生成驗證碼質量
        'quality' => env('GRID_CAPTCHA_IMAGE_QUALITY', 70),
        //生產驗證碼寬
        'wide' => env('GRID_CAPTCHA_IMAGE_WIDE', 300),
        //生產驗證碼高
        'high' => env('GRID_CAPTCHA_IMAGE_HIGH', 300),
    ],
    //驗證碼配置
    'captcha' => [
        //生成的驗證碼過期時間 單位秒
        'validity' => env('GRID_CAPTCHA_IMAGE_VALIDITY', 180),
        //驗證碼快取的key
        'cache_key' => env('GRID_CAPTCHA_IMAGE_CACHE_KEY', 'grid_captcha'),
        //驗證碼生成的key長度
        'key_length' => env('GRID_CAPTCHA_IMAGE_KEY_LENGTH', 64),
        //自定義效驗驗證碼key欄位
        'key_string' => env('GRID_CAPTCHA_IMAGE_KEY_STRING', 'captcha_key'),
        //自定義效驗驗證碼code欄位
        'code_string' => env('GRID_CAPTCHA_IMAGE_CODE_STRING', 'captcha_code'),
    ],
];

使用

  • 生成驗證碼

    <?php
class TestController
{
  public function index(Request $request)
  {
      $captcha = new GridCaptcha();
      //可以設定儲存在驗證碼中的資訊 如果驗證碼成功這段資訊將返回
      $captcha_data = [
         'mobile' => '100xxxxx121'
      ];
      return $captcha->get($captcha_data);
  }
}

  • 生成結果

    {
    "hint": "猴子",//提示文字
    "captcha_key": "Qh8kHYF4C....",//快取key
    "image": "data:image/jpeg;base64,/9j/...."//base64驗證碼圖片 -- 前端渲染顯示
}

  • 效驗驗證碼

<?php

// http請求示例:
// POST http://xxx.com/api/auth/captcha -> 自己定義路由
// Body: -> 請求體
// {
//     "captcha_key":"Qh8kHYF4C...."//快取key
//     "captcha_code":"0543"//使用者輸入的驗證碼
// }

class TestController
{
    /**
     * Request 的方式進行效驗
     * @param Request $request
     * @return bool|\Illuminate\Http\JsonResponse
     */
    public function requestCheck(Request $request)
    {
        //注意: $request 裡面需要傳遞 配置檔案中的 code_string 以及 key_string 看上方 http 請求示例
        $captcha = new GridCaptcha();
        //注意一定要使用 === 還需要判斷返回的資料型別
        if ($captcha_data = $captcha->checkRequest($request) === false) {
            return response()->json([
                'message' => '驗證碼錯誤',
                'code' => 401,
            ]);
        }
        //此處您可以進行業務邏輯處理返回只是方便檢視，比如可以獲取到上方設定在驗證碼中的資料 如：上方設定的是手機號 ， 您這裡可以獲取驗證碼中的手機號，當效驗成功傳送簡訊驗證碼等...
        return $captcha_data;
    }


    /**
     * 傳值 的方式進行效驗
     * @param Request $request
     * @return bool|\Illuminate\Http\JsonResponse
     */
    public function check(Request $request)
    {
        $captcha = new GridCaptcha();
        //注意一定要使用 === 還需要判斷返回的資料型別
        if ($captcha_data = $captcha->check('Qh8kHYF4C...', '1574') === false)             {
            return response()->json([
                'message' => '驗證碼錯誤',
                'code' => 401,
            ]);
         }
        return $captcha_data;
    }
}
  • 效驗成功返回結果
    {
    "mobile" : "100xxxxx121"
}

  • 本地化提示

    resources/lang/grid-captcha.php
    <?php
//一個圖片目錄對應一個提示
return [
  'banmaxian' => '斑馬線',
  'gongjiaoche' => '公交車',
  'heiban' => '黑板',
  'honglvdeng' => '紅綠燈',
  'hongzao' => '紅棗',
  'houzi' => '猴子',
  'qianbi' => '鉛筆',
  'shutiao' => '薯條',
  'xiaofangshuan' => '消防栓',
  'zhenglong' => '蒸籠',
];

  • 新增驗證碼圖片

    例：新增一個型別為 pingguo 驗證碼型別的圖片，需要在配置檔案中的 image.path 目錄下建立名為 pingguo 的目錄並且把相關型別的圖片檔案存放在 pingguo 目錄，新增一個型別至少要有四張相關型別的圖片，不限制檔名，只要檔案字尾名是配置檔案中指定的即可如下:

    ─storage
  └─gridcaptcha
      └─image
          ├─pingguo
          │       1.jpg
          │       10.jpg
          │       11.jpg
          │       12.jpg
          │       13.jpg
          │
          ├─gongjiaoche
          │       1.jpg
          │       10.jpg
          │       11.jpg
          │       12.jpg

特別說明

因為讀取檔案是快取消耗I/O的操作所以我推薦使用Redis進行快取，此工具預設使用了快取了的只需要在 .env 檔案修改 CACHE_DRIVER=redis 即可

License

MIT

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章