Update the helper and template.

- Better defualts and config merging
- Config overriding when calling display()
- `callback` option added
- Cleaned up uneeded JS code
- Script block is now used by default

Author: ADmad

README.md

@@ -34,22 +34,22 @@ $this->loadComponent('Recaptcha.Recaptcha', [
     'secret' => 'your_secret',
     'type' => 'image',  // image/audio
     'theme' => 'light', // light/dark
-    'lang' => 'vi',      // default en
+    'lang' => 'en',
     'size' => 'normal'  // normal/compact
+    'callback' => null, // `callback` data attribute for the recaptcha div, default `null`
+    'scriptBlock' => true // Value for `block` option for HtmlHelper::script() call
 ]);
 ```
 
-Override default configure from app config file:
+Override default config from app config file:
 
 ```php
 // file: config/app.php
 
     /**
      * Recaptcha configuration.
-     *
      */
     'Recaptcha' => [
-        'enable' => true,
         'sitekey' => 'your_site_key',
         'secret' => 'your_secret',
         'type' => 'image',
@@ -62,7 +62,7 @@ Override default configure from app config file:
 Override default configure from recaptcha config file:
 
 ```php
-// ffile: config/recaptcha.php
+// file: config/recaptcha.php
 
 return [
     /**
@@ -96,12 +96,12 @@ Config preference:
 
 ## Usage
 
-Display recaptcha in your view:
+Display recaptcha in your template:
 
 ```php
     <?= $this->Form->create() ?>
     <?= $this->Form->control('email') ?>
-    // Display recaptcha box in your view, if configure has enable = false, nothing will be displayed
+    // Display recaptcha box in your template, if configure has enable = false, nothing will be displayed
     <?= $this->Recaptcha->display() ?>
     <?= $this->Form->button() ?>
     <?= $this->Form->end() ?>

src/Controller/Component/RecaptchaComponent.php

@@ -29,10 +29,12 @@ class RecaptchaComponent extends Component
         'secret' => '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe',
         'theme' => 'light',
         'type' => 'image',
+        'callback' => null,
         'enable' => true,
         'lang' => 'en',
         'size' => 'normal',
         'httpClientOptions' => [],
+        'scriptBlock' => true,
     ];
 
     /**

src/View/Helper/RecaptchaHelper.php

@@ -11,6 +11,33 @@
  */
 class RecaptchaHelper extends Helper
 {
+    /**
+     * Default config
+     *
+     * These are merged with user-provided config when the component is used.
+     *
+     * @var array<string, mixed>
+     */
+    protected array $_defaultConfig = [
+        // This is test only key/secret
+        'sitekey' => '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI',
+        'secret' => '6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe',
+        'theme' => 'light',
+        'type' => 'image',
+        'callback' => null,
+        'enable' => true,
+        'lang' => 'en',
+        'size' => 'normal',
+        'scriptBlock' => true,
+    ];
+
+    /**
+     * Helpers
+     *
+     * @var array
+     */
+    protected array $helpers = ['Form'];
+
     /**
      * initialize
      *
@@ -26,15 +53,18 @@ public function initialize(array $config = []): void
     /**
      * Display recaptcha function
      *
+     * @param array $config Config
      * @return string
      */
-    public function display(): string
+    public function display(array $config = []): string
     {
         $recaptcha = $this->getConfig();
         if (empty($recaptcha['enable'])) {
             return '';
         }
 
+        $recaptcha = $config + $recaptcha;
+
         return $this->_View->element('Recaptcha.recaptcha', compact('recaptcha'));
     }
 }

templates/element/recaptcha.php

@@ -1,19 +1,32 @@
-<?= $this->Html->script('https://www.google.com/recaptcha/api.js?hl=' . $recaptcha['lang'] . '&onload=CaptchaCallback&render=explicit') ?>
-<script type="text/javascript">
-var CaptchaCallback = function() {
-	var el = document.getElementsByClassName('g-recaptcha');
-    for (var i = 0; i < el.length; i++)
-        grecaptcha.render(el[i], {'sitekey' : '<?= $recaptcha['sitekey'] ?>'});
-};
-</script>
+<?php
+/**
+ * @var \App\View\AppView $this
+ */
 
+try {
+    $this->Form->unlockField('g-recaptcha-response');
+} catch (CakeException) {
+    // If FormProtectorComponent is not loaded, FormHelper::unlockField() throws an exception in older CakePHP versions.
+}
+?>
+<?= $this->Html->script(
+    'https://www.google.com/recaptcha/api.js?hl=' . $recaptcha['lang'],
+    [
+        'block' => $recaptcha['scriptBlock'],
+        'async' => true,
+        'defer' => true,
+    ]
+) ?>
 <div
     class="g-recaptcha"
     data-sitekey="<?= $recaptcha['sitekey'] ?>"
     data-theme="<?= $recaptcha['theme'] ?>"
     data-type="<?= $recaptcha['type'] ?>"
     data-size="<?= $recaptcha['size'] ?>"
-    async defer>
+    <?php if ($recaptcha['callback']) : ?>
+        data-callback="<?= $recaptcha['callback'] ?>"
+    <?php endif ?>
+>
 </div>
 <noscript>
   <div>

tests/TestCase/View/Helper/RecaptchaHelperTest.php

@@ -25,21 +25,25 @@ public function setUp(): void
         $this->Recaptcha = new RecaptchaHelper(
             $this->View,
             [
-                'enable' => true,
                 'sitekey' => 'sitekey',
                 'theme' => 'theme',
                 'type' => 'type',
                 'lang' => 'lang',
                 'size' => 'size',
+                'callback' => 'callback',
             ]
         );
     }
 
     public function testDisplay(): void
     {
         $result = $this->Recaptcha->display();
-        $this->assertTrue(is_string($result));
         $this->assertStringContainsString('class="g-recaptcha"', $result);
+        $this->assertStringContainsString('data-sitekey="sitekey"', $result);
+        $this->assertStringContainsString('data-theme="theme"', $result);
+        $this->assertStringContainsString('data-type="type"', $result);
+        $this->assertStringContainsString('data-size="size"', $result);
+        $this->assertStringContainsString('data-callback="callback"', $result);
 
         $this->Recaptcha->setConfig('enable', false);
         $this->assertEmpty($this->Recaptcha->display());