introduce

A few months after learning laravel, one of the previous projects used a validation code that didn't seem to have a similar validation code extension, so I made my own extension package, laravel-gridCaptcha Generate a gadget similar to Google Point Map Authentication Code, because most of the generated verification codes from PHP are now easily identifiable to malicious people, and this small extension is simple but requires machine learning for robots and increases the cost of malicious attacks, but unlike Google Point Map Authentication Code, this small extension requires machine learning and only needs to be configured locallyBecause it is generated locally, different from Google Authentication Code, it requires network interaction, especially slowly in China, because the generated Authentication Code pictures are generated by reading files, so it is recommended to use Redis for caching. The code defaults to the cache Authentication Code picture directory and Authentication Code

ps: Since this is the first time open source, there are a lot of code written poorly. The big guys are welcome to make changes.

Github Home Page

packagist

preview

install

Supports Laravel 8+ versions:

 composer require deletedb/laravel-captcha-grid

Configuration Item Description

• Publish Profile

php artisan vendor:publish --provider="Deletedb\Laravel\Providers\LaravelServiceProvider"

config/gridcaptcha.php

return [
    //Generate Authentication Code Picture Configuration
    'image' => [
        //Verification Code Picture Path
        'path' => env('GRID_CAPTCHA_IMAGE_PATH', storage_path('gridcaptcha\image')),
        //File Suffix Name Obtained from Authenticode Picture Path
        'suffix' => env('GRID_CAPTCHA_IMAGE_SUFFIX', 'jpg'),
        //Generate Authentication Code Quality
        'quality' => env('GRID_CAPTCHA_IMAGE_QUALITY', 70),
        //Production Verification Code Width
        'wide' => env('GRID_CAPTCHA_IMAGE_WIDE', 300),
        //Production Verification Code Height
        'high' => env('GRID_CAPTCHA_IMAGE_HIGH', 300),
    ],
    //Authentication Code Configuration
    'captcha' => [
        //Generated Authentication Code expiration time unit seconds
        'validity' => env('GRID_CAPTCHA_IMAGE_VALIDITY', 180),
        //key of Authentication Code Cache
        'cache_key' => env('GRID_CAPTCHA_IMAGE_CACHE_KEY', 'grid_captcha'),
        //Length of key generated by Authentication Code
        'key_length' => env('GRID_CAPTCHA_IMAGE_KEY_LENGTH', 64),
        //Custom Validation Code key Field
        'key_string' => env('GRID_CAPTCHA_IMAGE_KEY_STRING', 'captcha_key'),
        //Custom validation code field
        'code_string' => env('GRID_CAPTCHA_IMAGE_CODE_STRING', 'captcha_code'),
    ],
];

Use

• Generate Authentication Code

  <?php
  class TestController
  {
    public function index(Request $request)
    {
        $captcha = new GridCaptcha();
        //You can set the information stored in the Authentication Code that will be returned if the Authentication Code succeeds
        $captcha_data = [
           'mobile' => '100xxxxx121'
        ];
        return $captcha->get($captcha_data);
    }
  }

• Generate results

  {
      "hint": "Monkey",//Prompt Text
      "captcha_key": "Qh8kHYF4C....",//Cache key
      "image": "data:image/jpeg;base64,/9j/...."//base64 Authentication Code Picture--Front End Rendering Display
  }

• Verification Code

<?php

// Example http request:
// POSThttp://xxx.com/api/auth/captcha ->Define your own route
// Body: ->Request Body
// {
//     "captcha_key":"Qh8kHYF4C..."//cache key
//     "captcha_code":"0543"//Authentication code entered by the user
// }

class TestController
{
    /**
     * Request Way to validate
     * @param Request $request
     * @return bool|\Illuminate\Http\JsonResponse
     */
    public function requestCheck(Request $request)
    {
        //Note: $request needs to pass code_string and key_string from the configuration file to see the http request example above
        $captcha = new GridCaptcha();
        //Note that it is important to use===and to determine the type of data returned
        if ($captcha_data = $captcha->checkRequest($request) === false) {
            return response()->json([
                'message' => 'Authentication code error',
                'code' => 401,
            ]);
        }
        //Here you can do business logic processing and return for easy viewing, for example, you can get the data set in the verification code above such as: the mobile phone number set above, you can get the mobile phone number in the verification code here, when the validation successfully sends the SMS verification code, etc..
        return $captcha_data;
    }


    /**
     * Value transfer method works
     * @param Request $request
     * @return bool|\Illuminate\Http\JsonResponse
     */
    public function check(Request $request)
    {
        $captcha = new GridCaptcha();
        //Note that it is important to use===and to determine the type of data returned
        if ($captcha_data = $captcha->check('Qh8kHYF4C...', '1574') === false)             {
            return response()->json([
                'message' => 'Authentication code error',
                'code' => 401,
            ]);
         }
        return $captcha_data;
    }
}

• Validation successfully returned results

  {
      "mobile" : "100xxxxx121"
  }

• Localization Tips

  resources/lang/grid-captcha.php

  <?php
  //A picture catalog corresponds to a hint
  return [
    'banmaxian' => 'Zebra crossing',
    'gongjiaoche' => 'Bus',
    'heiban' => 'blackboard',
    'honglvdeng' => 'Traffic lights',
    'hongzao' => 'Jujube',
    'houzi' => 'Monkey',
    'qianbi' => 'pencil',
    'shutiao' => 'Chips',
    'xiaofangshuan' => 'Fire Hydrant',
    'zhenglong' => 'Steamer',
  ];

• Add Authentication Code Picture

  Example: To add a new type of picture with pingguo authentication code, you need to create a directory named pingguo in the image.path directory of the configuration file and store the related type of picture files in the pingguo directory. To add a new type of picture with at least four related types, there is no restriction on the file name, as long as the file suffix name is specified in the configuration file, you can do the following:

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

Special description

Since reading files is a cache I/O-consuming operation, I recommend using Redis for caching. By default, this tool uses cached files only by modifying CACHE_DRIVER=redis in the.env file

License

MIT