Allow multiple instances of reCAPTCHA on the same page

Is this intended to solve #1283004: Support multiple reCAPTCHA widgets on the page?

Thanks. The sample files need more documentation including an overall description of how this system works.

Since this requires custom code anyway, the recaptcha_custom_load variable should be set by that custom code, not in the reCAPTCHA UI.

Please provide your changes in a single patch file.

Please try the latest development version of reCAPTCHA to see if this patch is still required. If so, please re-roll.

I just tried the dev version of the module and the issue of only showing the captcha on the first form still persists. I haven't yet tried the patch but is there anything else that needs to be done otherwise to get multiple forms showing up?

I don't know. I haven't run into this problem. We need someone to figure out why it doesn't work and to write a patch to fix it.

Ok, I think I figured something out. What we need is (a) testing and (b) optimization (I am sure the javascript is somewhat horrid). But it seems to reasonably well. What I am doing is creating containers with different ids ('recaptcha_ajax_api_container_N'), the javascript goes through all such containers, marks the first one to show recaptcha and when a form element from another form is selected (or focused on), it will destroy the first recaptcha and create a new recaptcha within the new form.

To note: this only works with the ajax api so far. I have no clue how the non-ajax api works.

That sounds like a good approach. The reading I have done says that it is not possible to have more than one reCAPTCHA per page, so your approach of creating them as needed would work around this restriction.

If it only works in the Ajax API, that is better than it not working at all.

Please re-roll your patch from a checkout of just reCAPTCHA so that the resulting patch will apply. The patch file should not include paths outside of the reCATPCHA module directory.

There seem to have been a few changes since when the patch was first created (a few things around $recaptcha_custom_html. This should apply cleanly against commit a137f09a696e599e3650b6736504055ba34ff629

Also, unassigned.

I'll look at this shortly. Thanks.

Thanks for the patch.

Settings, such as the following, need to be put under Drupal.settings.recaptcha to ensure they don't conflict with anything else.

+      Drupal.settings.current_container = 0;
+      Drupal.settings.form_map = new Array();

Attached is a re-roll after I fixed the indentation in the dev. version.

I would appreciate it if others would test the patch and let us know if it is working for them.

Looks like it's coming along!

+++ b/recaptcha.jsundefined
@@ -1,7 +1,29 @@
+      $(document).ready(Recaptcha.create(Drupal.settings.recaptcha.public_key, Drupal.settings.recaptcha.containers[0], {theme: Drupal.settings.recaptcha.theme}));
+      Drupal.settings.current_container = 0;

Doesn't need $(document).ready() since behaviors are run automatically on that.

+++ b/recaptcha.moduleundefined
@@ -61,11 +61,26 @@ function recaptcha_permission() {
+    if (isset($values['recaptcha'])) {
+      $javascript['settings']['data'][$js_key]['recaptcha']['containers'] = $containers;

Could we use ['recaptcha'][$js_key] instead? Wouldn't want to overwrite any other settings.

+++ b/recaptcha.moduleundefined
@@ -61,11 +61,26 @@ function recaptcha_permission() {
   $op = array_shift($args);
+  $containers = &drupal_static('recaptcha_captcha_containers', array());
+  $current_counter = count($containers);
   switch ($op) {

Might be able to just use:

  static $current_counter = 0;
  $current_counter++;

Might be a bit simpler.

+++ b/recaptcha.moduleundefined
@@ -155,11 +170,12 @@ function recaptcha_captcha() {
+          $recaptcha_options['container'] = 'recaptcha_ajax_api_container_' . $current_counter;
+          $containers[] = 'recaptcha_ajax_api_container_' . $current_counter;
           drupal_add_js(array('recaptcha' => $recaptcha_options), 'setting');

If we did the above, we wouldn't need the $containers[] array.

+++ b/recaptcha.jsundefined
@@ -1,7 +1,29 @@
+      $(document).ready(Recaptcha.create(Drupal.settings.recaptcha.public_key, Drupal.settings.recaptcha.containers[0], {theme: Drupal.settings.recaptcha.theme}));
+      Drupal.settings.current_container = 0;

Doesn't need $(document).ready() since behaviors are run automatically on that.

Makes sense.

+++ b/recaptcha.moduleundefined
@@ -61,11 +61,26 @@ function recaptcha_permission() {
+    if (isset($values['recaptcha'])) {
+      $javascript['settings']['data'][$js_key]['recaptcha']['containers'] = $containers;

Could we use ['recaptcha'][$js_key] instead? Wouldn't want to overwrite any other settings.

This is in hook_js_alter. Unfortunately, this is pretty much the only way to get to the recaptcha data that we are setting up.

+++ b/recaptcha.moduleundefined
@@ -61,11 +61,26 @@ function recaptcha_permission() {
   $op = array_shift($args);
+  $containers = &drupal_static('recaptcha_captcha_containers', array());
+  $current_counter = count($containers);
   switch ($op) {

Might be able to just use:

<?php
  static $current_counter = 0;
  $current_counter++;
?>

Might be a bit simpler.

We need the $containers array due to hook_js_alter needing to know how many containers are being dealt with. We could create a function that holds the static value or simply use drupal_static (hence I opted for the latter).

hi all,

i notice that there is no recaptcha.js file for drupal 6 module. is there a solution or patch for drupal 6?

Thanks a lot

New features are not being added to the D6 version.

Here is a revision based on suggestions in #18 and #19 (minus my feedback from #20)

Thanks.

Has anyone else tried this? What is an easy way to get a page with multiple CAPTCHAs for testing?

Patch on #23 don't apply correctly.
It needs a little change. I'll try to attach that patch fixed.
With these changes it works well to me.

Rerolling the patch by @morgothz due to changes in recaptcha.js

I applied the Patch from 27.

I have Drupal 7.25 with the latest version of Captcha/recaptcha

The patch works great... for about an hour, then it stops. Then I clear caches through performance and it works again. Then an hour or so later it stops...

When it stops, I get this JS error: "Uncaught TypeError: Cannot read property '0' of undefined" on line 4 in reference to : Drupal.settings.recaptcha.containers[0]

under performance I turned off the options and have tried none, 1 min, 3 minute and a few others for min cache life and nothing has changed. The recaptcha still disappears leaving only the reCaptcha description. Then I hit "clear all caches" and it magically works again. I tried installing Cache Exclude and set it for the page, but it doesn't seem to do anything.

The page in question is here: http://fivecitiesvet.com/book-appointment

Anyhelp would be appreciated.

The way the array was figured out was incorrect in the patch. Try the new one.

If someone faces the issue and isn't able to apply the patch from comment #29 - here's a patch that is rebuilt for current 1.x-dev version of the module.

Please try out the patch in #31 and let us know if it is working for you.

Can anyone suggest an easy way to get multiple reCAPTCHAs on a single page?

We should move this case to 8.x-2-x first and backport later. Otherwise we end up in regressions.

Agreed.

I needed to implement this and added some code.
The attachment is the patch but I don't think it is following Drupal Standard, so if someone absorbs this functionality to the next version, it would be great.
This is working only for the 7.x-2.0 branch which utilizes recaptcha2.0.

Does anyone know if patch #44 is possible on a Drupal 6 install with ReCaptcha 2.0? Changes seem fairly straight forward when comparing with 6 module file until you get to drupal_add_html_head section. Anyone know how that would be re-worked for D6 version?

#44 causes a notice:
Notice: Undefined index: recaptcha_render_callback_script in recaptcha_captcha() function...

changing $callback_script = $current_head['recaptcha_render_callback_script']; to this: $callback_script = (isset($current_head['recaptcha_render_callback_script'])) ? $current_head['recaptcha_render_callback_script'] : NULL; solves the problem

Here's a reroll of #44 incorporating #47 that seems to work (and apply cleanly).

#44 causes another warning on admin/config/people/captcha page:

Warning: Missing argument 3 for recaptcha_captcha() recaptcha_captcha() function (.../recaptcha/recaptcha.module line 77).

It comes from call_user_func_array() in _captcha_available_challenge_types():

  ...
  // We do our own version of Drupal's module_invoke_all() here because
  // we want to build an array with custom keys and values.
  foreach (module_implements('captcha') as $module) {
    $result = call_user_func_array($module . '_captcha', array('list'));
    ...

Here is improved #48.

Code style issues, core apis not used, not d8 code.

#56 - git warning

          	'id'=>'g-recaptcha'.$captcha_sid,
warning: 1 line adds whitespace errors.

The patch solved the problem and looks good after a few minor fixes of coding standards.
Tested on recaptcha 7.x-2.0
Suggest moving 8.x-2.x-dev in a separate issue.

For 7.x-2.x-dev to work with:

https://www.drupal.org/project/bootstrap_login_modal

I applied number #56

However, if you click login or register with an empty field or wrong credentials, it refreshes and the recaptcha doesn't display.

I fixed that with:
https://www.drupal.org/node/1463768 #21

However that fails because of the first patch. So I manually added */ at the end of the correct line and did:

-              'https://www.google.com/recaptcha/api.js' => array('external' => TRUE),
+              'https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackForMultiple&render=explicit' => array('external' => TRUE),

Not sure how to make patches, sorry.

attached it a combined patch, it combines 1833822 #56 and 1463768 #21

It's for 7.x-2.x-dev

Changed version in order to upload a patch against 7.x-2.x-dev. Patch coming...

Removed reference to recaptcha.js from #70 which seems to do not be needed anymore. Tested #70 with latest recaptcha and it's working. Patch applied against 7.x-2.x-dev

As described here #69, after submitting with an wrong credentials the recapcha disappear. It is connected to ajax submit. The patch from #72 doesn't work for me. So here is new one, that is integration of my previous patch from #56 and #12 from issues #2493183.

Here is updated #74, for fixing tests.

Resubmitting the patch from #80, because tests weren't run.

See #58

@hass Yes, you are right, this code for D7, because exist the same trouble for D7 version of the module. Should I open new issue instead? Thank you.

Nothing get's committed if code quality and security bugs are not fixed and D8 will always committed very first.

Do not change the version again.

Some remarks on the patch in #81 regarding coding standards:

1. +++ b/recaptcha.js
   @@ -0,0 +1,27 @@
   \ No newline at end of file
   

   Add a newline to the end of the file.

2. +++ b/recaptcha.module
   @@ -122,14 +128,30 @@ function recaptcha_captcha($op, $captcha_type = '') {
   +              'src' => url('https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackForMultiple&render=explicit', array('query' => array('hl' => $language->language), 'absolute' => TRUE)),
   

   Why not use the url() options to add the parameters? Ie.

   url('https://www.google.com/recaptcha/api.js', array(
     'query' => array(
       'onload' => 'ReCaptchaCallbackForMultiple',
       'render' => 'explicit',
       'hl' => $language->language
     ),
     'absolute' => TRUE)
   )
   

3. +++ b/recaptcha.module
   @@ -122,14 +128,30 @@ function recaptcha_captcha($op, $captcha_type = '') {
   +          //to make it display multiple
   

   Should be a complete sentence, with a space after the //, starting with a captital letter, and ending with a dot.

4. +++ b/recaptcha.module
   @@ -122,14 +128,30 @@ function recaptcha_captcha($op, $captcha_type = '') {
   +        } else {
   

   The closing bracket and the else statement should be on separate lines.

Here's a re-roll of the patch in #81, addressing the remarks in #97.

@hass I understand and respect that you want to fix this in the D8 branch first. I hope that sharing my comments and code helps to achieve that. In any case, for me (and the project I'm working on) it was very helpful to find D7 patches here as well.

Patch failed,

Checking patch recaptcha.js...
Checking patch recaptcha.module...
error: while searching for:
/**
 * Implements hook_captcha().
 */
function recaptcha_captcha($op, $captcha_type = '') {
  global $language;

  switch ($op) {

error: patch failed: recaptcha.module:68
error: recaptcha.module: patch does not apply
Checking patch recaptcha.test...
error: recaptcha.test: No such file or directory

@AsadKamil The patch applies perfectly on my own machine and on simplytest.me. Against which branch did you try to apply the patch? The patch is meant for 7.x-2.x, as you can see in the file name 1833822-98-allow-multiple-per-page-D7-do-not-test.patch.

@marcvangend I tried applying that patch to D8 version,may be that is why It got failed.

Manual testing showed that a JS error "ReCAPTCHA placeholder element must be empty" occurred often, but not always. The cause was that the grecaptcha.render() method was triggered in two different places (inline JS and recaptcha.js).

The patch attached is a major cleanup of the previous patch, introducing (compared to #98) the following changes:

• Leverage jQuery.once(), instead of more elaborate if-else statements, to make sure recaptcha is added only once to each placeholder.
• Remove the inline javascript that is rendered in the page head, because it duplicates the functionality of the Drupal behavior in recaptcha.js. (This means that the patch should fix #2493183: Ajax support / Use behaviors too.)
• Change the onload parameter passed to the recaptcha script to 'Drupal.behaviors.recaptcha.attach' so it will trigger the Drupal behavior once the script is loaded.

To be completely clear: this is a patch against 7.x-2.x. I hope it will help move the 8.x version forward as well, but do not try to apply it to 8.x branches.

@marcvangend ,here in the issue you have mentioned 8.x-2.x-dev branch so I have applied the patch to the same and now I have applied it to 7.x-2.x-dev branch it is successfully applied.Thanks for the patch
Please change the version in the issue and update.

@AsadKamil, please read #57, #68, #82, #96... It is the explicit (and entirely understandable) wish of the project maintainer that the version of the issue is not changed until this problem is solved on the 8.x branch. Reading an issue's comment history before you get involved, helps understand what is happening in the last couple of comments.

Yet another patch. I had to bring back a dedicated onload callback because it can happen that the recaptcha script is loaded before the Drupal behaviors are. We cannot place this onload callback in the regular .js file because it needs to be defined before the recaptcha script itself (which is currently added with drupal_add_html_head as a workaround for missing async/defer support) is loaded. That is why the onload callback is also placed using drupal_add_html_head.

Hopefully this will fix the test failures.

Finally the patch #98 worked for me :) +1 !!

Confirming that the patch in #110 works as expected when applied to 7.x-2.2.

Thanks.

Sorry I am little confused with the version . Is it 7.x-2.x-dev or 8.x-2.x-dev ?

Issues are fixed in 8.x-2.x-dev then backported to 7.x-2.x-dev.

I can confirm that patch #110 worked with 7.x-2.2

Thanks

Confirming patch #110 works with 7.x-2.2.

Confirming patch #110 works for 7.x-2.2 had 2 forms loading recaptchas via modal windows. Only oddity was that the recaptcha.js file needed manually moved to where it was expected to be.

Confirming #110 worked for me in 7.x-2.2.

Well a bit of fun there :-)

If you run into an issue where PHP errors out on the raw JS in the middle (as I did) try replacing that section (line 133 - 138) with:

$data = array(
            '#tag' => 'script',
            '#value' => 'function recaptchaOnLoad() { if (typeof Drupal.behaviors.recaptcha.attach != "undefined") { Drupal.behaviors.recaptcha.attach(); }};',
            '#weight' => -1,
          );
          drupal_add_html_head($data, 'recaptcha_onload');

#110 works good for me but it's not enough to work with Invisible reCAPTCHA .

When using the invisible widget, we need to use a function called grecaptcha.execute() and pass it the widget ID as argument. If not, execute() tries to validate the first widget created, which means that submitting the second form will triggered the CAPTCHA of the first form.

The recaptcha.js file created by the patch on #110 must be modified to store widget IDs returned by grecaptcha.render() when called (API documentation). To do that, the following modification should do the job:

Modify the line 13:
grecaptcha.render(this, $(this).data());
By the following:
Drupal.behaviors.recaptcha.widgets[this.id] = grecaptcha.render(this, $(this).data());

Add this line:
widgets: {},
Before:
attach: function (context, settings) {

A working implementation of Invisible reCAPTCHA is already available as a patch but it needs to be modified to take into account the changes I'm suggesting here.

Since it's another subject, I'm gonna post the small changes needed over there and link to this answer for the first part of the solution : https://www.drupal.org/node/2852269

Can someone please post Drupal 8 Version Patch for Allow multiple recaptcha on Same Page. withing Form Page or Form Block(s).
I have uploaded my patch file, Please check it.

I'm attaching an updated patch for D7, based upon #110. The changes can be seen in the interdiff:

• Attempt to fix failing assert in test suite.
• Applying suggestions by @thedotwriter (see #127)

Let's see if the test bot likes this one.

EDIT: running the tests with simplytest.me result in a pass :)

Switching to 7.x-2.x temporarily in order to trigger full testing now that I got the tests passing again for PHP 5.6 + MySQL 5.5.

D7 is a pass :), back to 8.x-2.x.

Patch in #130 refused to apply, re-submitting this patch in correct format.

It may need some more work, but seems to be functioning correctly so far - submitting it to get this issue moving for Drupal 8.

Re upload with remove trailing space as checked in failed test cases.

#131 looks good

Updated patch again:

Are you planing to share a patch that is not failing?`

Comments on the code:

1. +++ b/recaptcha.module
   @@ -79,6 +79,7 @@ function recaptcha_captcha($op, $captcha_type = '') {
   +            'id' => 'g-recaptcha'.$captcha_sid,
   

   Code style bug

2. +++ b/recaptcha.module
   @@ -108,6 +109,20 @@ function recaptcha_captcha($op, $captcha_type = '') {
   +          $callback_script = [
   +            '#type' => 'html_tag',
   +            '#tag' => 'script',
   +            '#value' => 'var ReCaptchaCallbackForMultiple = function(){ console.log("Init ReCaptchaCallbackForMultiple"); };',
   +          ];
   +          $captcha['form']['recaptcha_widget']['#attached']['html_head'][] = [$callback_script, 'recaptcha_render_callback_script'];
   

   No need to make an extra line. Combine both together, please.

3. +++ b/recaptcha.module
   @@ -108,6 +109,20 @@ function recaptcha_captcha($op, $captcha_type = '') {
   +            'var ReCaptchaCallbackForMultiple = function(){ jQuery(".g-recaptcha").each(function(index, data) { /*console.info(jQuery(this).attr("id"));*/ var gcaptcha_id = jQuery(this).attr("id"); grecaptcha.render(gcaptcha_id, {"sitekey": "'.$recaptcha_site_key.'"}); });',
   

   Debugging code exists and XSS CODE INJECTION is possible via site_key setting.

4. +++ b/recaptcha.module
   @@ -108,6 +109,20 @@ function recaptcha_captcha($op, $captcha_type = '') {
   +          $captcha['form']['recaptcha_widget']['#attached']['html_head'][] = [$callback_script, 'recaptcha_render_callback_script'];
   

   Move together into one array.

Had a "fatal: corrupt patch at line 134" when applying #131
Don't know why. I applied manually last part of patch (in recaptcha.test) and it's working fine. Thanks jedihe

The patch in #131 applied and worked fine for me against the current D7 release (7.x-2.2).

Patch #137 working Drupal 8.4.4. ty
Error using patch
Error message:
patching file recaptcha.module
Hunk # 4 FAILED at 99.
Hunk # 5 succeeded at 100 (offset -9 lines).
Hunk # 6 succeeded at 176 with fuzz 2 (offset -9 lines).
1 out of 6 hunks FAILED - saving rejects to file recaptcha.module.rej

There are bugs in the patch shared in #131, see #2969211: Uncaught TypeError: grecaptcha.render is not a function.

Based on https://www.drupal.org/project/recaptcha/issues/2969211 patch from #131 was adjusted a little.

I just fixed the recaptcha.js one single line:
instead of if (typeof grecaptcha == 'undefined') {
I put if (typeof(grecaptcha) === 'undefined' || typeof(grecaptcha.render) === 'undefined' ) {

Based on users' feedback, looks like D8 is also having similar issue - I didn't test it.

Confirmed – #143 works to solve the race condition as well as the original problem of multiple forms per page.

Applied #143 but I am getting error. Please see the error screenshot.

+1 for #143. I had been using #131, and it stopped working (was throwing a javascript error: "grecaptcha.render is not a function"). I applied #143 which fixed the javascript error, and recaptcha started working correctly again.

Re-roll & minor coding standards fix of #143, so the patch can be applied against latest 2.x-dev branch. Also this was conflicting against issue #2852269: Integrate Invisible reCAPTCHA option from Google so I renamed the recaptcha.js to recaptcha-multiple.js.

Where is recaptcha-multiple.js?? I can't find it in the latest dev for D7.

Update: I see its a new file you create.

#147 gives me error and doesn't work:

Undefined variable: captcha_sid in recaptcha_captcha() (line 108 of /sites/all/modules/recaptcha/recaptcha.module).

this is line 108:

'id' => 'g-recaptcha' . $captcha_sid,

Re-roll patch for D7

Hi, I've tried the patch #137 but it simply makes disappear any recapcha after the first one, so it is not working for me (manually applied against latest webform/recapcha modules).

Fresh patch. Applies cleanly to 7.x-2.x, includes all the work from #143 (some was lost in #149) and fixes some typos in documentation.

Hi, the bug is still reproducible on D8. Until Captca/reCaptcha are not reliable shouldn't a warning be added on the module pages to inform that the module is not ready for production environment? Thanks.

I can confirm that this heavy problem still exists with 8.x-2.x-dev and recaptcha is not usable with two forms on the same page (for example CTA in the footer and another form on the page). So I suggest to increase the priority and change this to a bug, reason: As FiNeX wrote in #152 I agree that this will be unexpected for most developers and breaks functionality for this not unrealistic use case.

This issue should also be fixed at the same time to ensure the module works correctly and tests don't fail due to the other patch: #2493183: Ajax support / Use behaviors

Patch no longer applied to D8, I've reworked it to use a Drupal behaviour so that this also works on forms that are loaded in after page load.

Accidentally created patch against D9, rerolled.

8.x-2.x is no longer supported. If this applies to 8.x-3.x, please re-open.