How Can I Implement CAPTCHA in Shield Forms?

[YusufDurmaz]

Make captcha verification available to developers with simple settings in the config (such as adding an API key).

[datamweb]

Dear @YusufDurmaz ,

You can easily implement CAPTCHA in your project by following these steps. I have used the package denis303/codeigniter4-recaptcha from https://github.com/denis303/codeigniter4-recaptcha, but feel free to use any package, including the one I’ve written myself (online demo).

Steps:

1. Copy the login view: First, copy the login view from vendor\codeigniter4\shield\src\Views\login.php and move it to the app\Views\Shield\login.php.

2. Add CAPTCHA field: In the new login view(app\Views\Shield\login.php), add the CAPTCHA field by including the following code:

   <?php helper('reCaptcha'); ?>
   <!-- reCaptcha2 -->
   <?= reCaptcha2('reCaptcha2', ['id' => 'recaptcha_v2'], ['theme' => 'dark']); ?>

3. Register the new view: Now, register the new view in your application by modifying the view configuration as follows:

   /**
    * --------------------------------------------------------------------
    * View files
    * --------------------------------------------------------------------
    */
   public array $views = [
       'login' => '\App\Views\Shield\login',
   ];
   

4. Validation Rules: Now, update the validation rules(app\Config\validation.php) to include the CAPTCHA validation. Modify the login validation array like this:

   public $login = [
       'email' => [
           'label' => 'Auth.email',
           'rules' => [
               'required',
               'max_length[254]',
               'valid_email'
           ],
       ],
       'password' => [
           'label' => 'Auth.password',
           'rules' => [
               'required',
               'max_byte[72]',
           ],
           'errors' => [
               'max_byte' => 'Auth.errorPasswordTooLongBytes',
           ]
       ],
       'reCaptcha2' => 'reCaptcha2[]' //add this line
   ];

By following these steps, Google reCAPTCHA will be fully integrated into your login form. Feel free to use any other package you prefer for CAPTCHA integration.

[codeXpedite]

How about magic-link page? There is only e-mail field on shield's src, I cannot add another validation rule on magic link page.

[datamweb]

Create a new class that extends MagicLinkController and override the getValidationRules() method.

Regarding the view, since Viewable is used, you can utilize it to add a captcha field.

[codeXpedite]

Make sense. I added it to the View. It's working but not validating. I hadn't thought of extending the class.
Where should I put the class whic is going to extend the MagicLinkController? If I create a new controller, I guess I need to override routes too.

[datamweb]

If I create a new controller, I guess I need to override routes too.

Yes, proceed similarly to what is mentioned:

https://shield.codeigniter.com/customization/extending_controllers/#how-to-extend

[codeXpedite]

Thank you for the help...