Topic on Extension talk:CIForms

Hi, I use reCAPTCHA V3 in CIForms for users to fill out their requests. Recently, users started to complain about errors when sending the form. It turned out the error is timeout-or-duplicate. Since the token is generated once the page is loaded and its lifetime is just 2 minutes, it can take more time for users to fill out the form. So far, I fixed it by calling the function that generates the captcha token every 90 seconds. The change was made in resources/validation.js. The patch is below. Is there any chance to fix this?

--- validation.js 2024-04-10 08:33:50.225438151 +0200

+++ validation_new.js 2024-04-10 08:33:43.701502919 +0200

@@ -35,6 +35,34 @@

.replace( />/g, '\x3E' );

}

+  function executeRecaptchaValidation() {

+    var site_key = mw.config.get('ci_forms_google_recaptcha_site_key');

+

+    mw.loader.getScript('https://www.google.com/recaptcha/api.js?render=' + site_key)

+        .then(

+            function () {

+                if ($('input[name="g-recaptcha-response"]').length) {

+                    grecaptcha.ready(function () {

+                        grecaptcha.execute(site_key, { action: 'validate_captcha' })

+                            .then(function (token) {

+                                $('input[name="g-recaptcha-response"]').val(token);

+                            })

+                            .catch(function (error) {});

+                    });

+                }

+            },

+            function (e) {

+                mw.log.error(e.message);

+            }

+        );

+  }

+

+  executeRecaptchaValidation();

+  // Obnoveni recaptcha tokenu kazdych 90 vterin

+  setInterval(executeRecaptchaValidation, 90 * 1000);

+

+

+  /*

var site_key = mw.config.get( 'ci_forms_google_recaptcha_site_key' );

mw.loader

@@ -57,6 +85,8 @@

}

);

+  */

+

$( '.ci_form' ).each( function ( index ) {

var paging = $( this )

.find( 'input[type=hidden][name=form_paging]' )

@Jachym16 thanks a lot! added in latest version (1.3.2)

Hi, Thank you for resolving that issue. However, it turned out to be a temporary solution for me. Since the form is placed on a landing page, it generated a large number of unwanted reCaptcha tokens. Recently, reCaptcha started to give everyone a score of about 0.1 (though I'm not sure if it's related). I believe the best solution would be to request the token only when the Submit button is pressed. Please find the patch file below. Thanks, Jáchym

--- validation.js	2024-07-08 10:54:01.464233524 +0200
+++ validation.js.new	2024-07-08 11:04:26.478076333 +0200
@@ -35,21 +35,29 @@


 			.replace( />/g, '\x3E' );
 	}
 
+
   function executeRecaptchaValidation() {
     var site_key = mw.config.get('ci_forms_google_recaptcha_site_key');
 
-    mw.loader.getScript('https://www.google.com/recaptcha/api.js?render=' + site_key)
+    return mw.loader.getScript('https://www.google.com/recaptcha/api.js?render=' + site_key)
         .then(
             function () {
-                if ($('input[name="g-recaptcha-response"]').length) {
-                    grecaptcha.ready(function () {
-                        grecaptcha.execute(site_key, { action: 'validate_captcha' })
-                            .then(function (token) {
-                                $('input[name="g-recaptcha-response"]').val(token);
-                            })
-                            .catch(function (error) {});
-                    });
-                }
+                return new Promise((resolve, reject) => {
+                    if ($('input[name="g-recaptcha-response"]').length) {
+                        grecaptcha.ready(function () {
+                            grecaptcha.execute(site_key, { action: 'validate_captcha' })
+                                .then(function (token) {
+                                    $('input[name="g-recaptcha-response"]').val(token);
+                                    resolve();
+                                })
+                                .catch(function (error) {
+                                    reject(error);
+                                });
+                        });
+                    } else {
+                        resolve();
+                    }
+                });
             },
             function (e) {
                 mw.log.error(e.message);
@@ -57,35 +65,6 @@
         );
   }
 
-  executeRecaptchaValidation();
-  // Obnoveni recaptcha tokenu kazdych 90 vterin
-  setInterval(executeRecaptchaValidation, 90 * 1000);
-
-
-  /*
-	var site_key = mw.config.get( 'ci_forms_google_recaptcha_site_key' );
-
-	mw.loader
-		.getScript( 'https://www.google.com/recaptcha/api.js?render=' + site_key )
-		.then(
-			function () {
-				if ( $( 'input[name="g-recaptcha-response"]' ).length ) {
-					grecaptcha.ready( function () {
-						grecaptcha
-							.execute( site_key, { action: 'validate_captcha' } )
-							.then( function ( token ) {
-								$( 'input[name="g-recaptcha-response"]' ).val( token );
-							} )
-							.catch( function ( error ) {} );
-					} );
-				}
-			},
-			function ( e ) {
-				mw.log.error( e.message );
-			}
-		);
-
-  */
 
 	$( '.ci_form' ).each( function ( index ) {
 		var paging = $( this )
@@ -425,5 +404,16 @@
 				return false;
 			}
 		}
+    
+    // zabrani odeslani formulare - provede se manualne po validaci recaptcha
+    evt.preventDefault();
+
+    executeRecaptchaValidation().then(() => {
+        this.submit(); // submit formulare
+    }).catch(() => {
+        alert('reCAPTCHA validation failed. Please try again.');
+    });
+
+
 	} );
 } );

@Jachym16 perhaps this is preferable https://gist.github.com/jonathanstark/dfb30bdfb522318fc819 -- I will check it later