laravel實(shí)現(xiàn)谷歌點(diǎn)圖驗(yàn)證碼【推薦】

ps: 如有不足之處，歡迎大佬提出修改意見。

 composer require deletedb/laravel-captcha-grid

php artisan vendor:publish --provider="DeletedbLaravelProvidersLaravelServiceProvider"

config/gridcaptcha.php

return [     //生成驗(yàn)證碼圖片配置     'image' => [         //驗(yàn)證碼圖片路徑         'path' => env('GRID_CAPTCHA_IMAGE_PATH', storage_path('gridcaptchaimage')),         //從驗(yàn)證碼圖片路徑中獲取的文件后綴名         'suffix' => env('GRID_CAPTCHA_IMAGE_SUFFIX', 'jpg'),         //生成驗(yàn)證碼質(zhì)量         'quality' => env('GRID_CAPTCHA_IMAGE_QUALITY', 70),         //生產(chǎn)驗(yàn)證碼寬         'wide' => env('GRID_CAPTCHA_IMAGE_WIDE', 300),         //生產(chǎn)驗(yàn)證碼高         'high' => env('GRID_CAPTCHA_IMAGE_HIGH', 300),     ],     //驗(yàn)證碼配置     'captcha' => [         //生成的驗(yàn)證碼過期時(shí)間 單位秒         'validity' => env('GRID_CAPTCHA_IMAGE_VALIDITY', 180),         //驗(yàn)證碼緩存的key         'cache_key' => env('GRID_CAPTCHA_IMAGE_CACHE_KEY', 'grid_captcha'),         //驗(yàn)證碼生成的key長度         'key_length' => env('GRID_CAPTCHA_IMAGE_KEY_LENGTH', 64),         //自定義效驗(yàn)驗(yàn)證碼key字段         'key_string' => env('GRID_CAPTCHA_IMAGE_KEY_STRING', 'captcha_key'),         //自定義效驗(yàn)驗(yàn)證碼code字段         'code_string' => env('GRID_CAPTCHA_IMAGE_CODE_STRING', 'captcha_code'),     ],];

- 生成結(jié)果```json5{   "hint": "猴子",//提示文本   "captcha_key": "Qh8kHYF4C....",//驗(yàn)證碼key   "image": "data:image/jpeg;base64,/9j/...."//base64驗(yàn)證碼圖片 -- 前端渲染顯示}

 <!--  生成的是一個(gè)九宮格圖片，前端需要渲染圖片，并且生成九個(gè)div用于記錄用戶點(diǎn)擊的宮格位置，宮格位置從 0 開始，當(dāng)點(diǎn)擊到四位的時(shí)候返回給后端進(jìn)行效驗(yàn) ，因?yàn)榍岸思夹g(shù)拙劣我就不放例子了歡迎大佬補(bǔ)充。  大概思路: --> <div>     <!-- img 顯示的是返回的驗(yàn)證碼圖片-->     @@##@@     <div id="0"></div>     <div id="1"></div>     <div id="2"></div>     <div id="3"></div>     <div id="4"></div>     <div id="5"></div>     <div id="6"></div>     <div id="7"></div>     <div id="8"></div> </div>

<?php namespace AppHttpControllers;use IlluminateHttpRequest;class TestController extends Controller{      /**      * 輔助函數(shù)方式效驗(yàn)      * @param Request $request      * @return array|false|IlluminateHttpJsonResponse      */     public function helpersCheck(Request $request)     {         /**          * 傳參效驗(yàn)          */         if ($captcha_data = grid_captcha()->check('Qh8kHYF4C....', '1540') === false) {             return response()->json(['message' => '驗(yàn)證碼錯(cuò)誤', 'code' => 401]);         }          /**          * 傳遞 Request 對象效驗(yàn)          */         if ($captcha_data = grid_captcha()->checkRequest($request)) {             return response()->json(['message' => '驗(yàn)證碼錯(cuò)誤', 'code' => 401]);         }          return $captcha_data;     }      /**      * 門面方式效驗(yàn)      * @param Request $request      * @return array|false|IlluminateHttpJsonResponse      */     public function facadeCheck(Request $request)     {         /**          * 傳參效驗(yàn)          */         if ($captcha_data = DeletedbLaravelFacadesGridCaptcha::check('Qh8kHYF4C....', '1540') === false) {             return response()->json(['message' => '驗(yàn)證碼錯(cuò)誤', 'code' => 401]);         }          /**          * 傳遞 Request 對象效驗(yàn)          */         if ($captcha_data = DeletedbLaravelFacadesGridCaptcha::checkRequest($request)) {             return response()->json(['message' => '驗(yàn)證碼錯(cuò)誤', 'code' => 401]);         }          return $captcha_data;     }      /**      * 對象方式效驗(yàn)      * @param Request $request      * @return array|false|IlluminateHttpJsonResponse      */     public function objectCheck(Request $request)     {         $captcha = new DeletedbLaravelGridCaptcha();         /**          * 傳參效驗(yàn)          */         if ($captcha_data = $captcha->check('Qh8kHYF4C....', '1540') === false) {             return response()->json(['message' => '驗(yàn)證碼錯(cuò)誤', 'code' => 401]);         }          /**          * 傳遞 Request 對象效驗(yàn)          */         if ($captcha_data = $captcha->checkRequest($request)) {             return response()->json(['message' => '驗(yàn)證碼錯(cuò)誤', 'code' => 401]);         }          return $captcha_data;     }}      //效驗(yàn)完成正確后 您可以進(jìn)行業(yè)務(wù)邏輯處理，比如可以獲取到上方設(shè)置在驗(yàn)證碼中的數(shù)據(jù) 如：上方設(shè)置的是手機(jī)號，您這里可以獲取驗(yàn)證碼中的手機(jī)號，當(dāng)效驗(yàn)成功發(fā)送短信驗(yàn)證碼等...