In 2.x, recaptcha breaks when using ajax callbacks of any kind. Using behaviors should resolve that.

The attached patch defers activation of the recaptcha widget to the behavior, either rendering or resetting as appropriate. Lightly tested.

CommentFileSizeAuthor
#89 2493183-ajax-support-89.patch3.46 KBjanchojnacki
#85 2493183-ajax-support-85.patch3.43 KBVitaliyB98
2493183-ajax-support-82.patch3.4 KBmertindervish
#76 2493183-recaptcha-use-behaviors-76.patch3.4 KBameymudras
#74 2493183-recaptcha-use-behaviors-74.patch3.24 KBilya.no
#71 2493183-71-ajax-support--interdiff-vs-51.patch1.06 KBjedihe
#71 2493183-71-ajax-support.patch3.49 KBjedihe
#68 2493183-recaptcha-use-behaviors-68.patch3.18 KBakozma
#51 2493183-recaptcha-use-behaviors-51.patch3.47 KBrang501
#37 interdiff.txt6.59 KBrang501
#37 2493183-recaptcha-use-behaviors-37.patch3.47 KBrang501
#28 interdiff-2493183-11-28.txt6.43 KBrang501
#28 2493183-recaptcha-use-behaviors-28.patch4.03 KBrang501
#22 Issue-2493183-by-hass-Ajax-support---Use-behaviors-f.patch3.74 KBhass
PASSED: [[SimpleTest]]: [PHP 5.5 MySQL] 110 pass(es). View
#19 1463768-recaptcha-in-modal-forms.patch2.33 KBalemadlei
#12 recaptcha-use-behaviors-11.patch3.39 KBbceyssens
FAILED: [[SimpleTest]]: [MySQL] 113 pass(es), 1 fail(s), and 0 exception(s). View
#10 recaptcha-use-behaviors-10.patch3.36 KBbceyssens
FAILED: [[SimpleTest]]: [MySQL] 113 pass(es), 1 fail(s), and 0 exception(s). View
#9 recaptcha-use-behaviors-9.patch3.02 KBfearlsgroove
PASSED: [[SimpleTest]]: [MySQL] 102 pass(es). View
#2 recaptcha-use-behaviors-2.patch2.13 KBfearlsgroove
PASSED: [[SimpleTest]]: [MySQL] 102 pass(es). View
recaptcha-use-behaviors-1.patch1.54 KBfearlsgroove
FAILED: [[SimpleTest]]: [MySQL] 100 pass(es), 2 fail(s), and 0 exception(s). View
Members fund testing for the Drupal project. Drupal Association Learn more

Comments

Status: Needs review » Needs work

The last submitted patch, recaptcha-use-behaviors-1.patch, failed testing.

fearlsgroove’s picture

FileSize
2.13 KB
PASSED: [[SimpleTest]]: [MySQL] 102 pass(es). View

With test updates

hass’s picture

Component: General » reCAPTCHA Captcha

Do not change the g-recaptcha class name or reCAPTCHA may break! CNW therefore. See https://developers.google.com/recaptcha/docs/display

fearlsgroove’s picture

Status: Needs work » Needs review

Well, that's the point. g-recaptcha class causes the recaptcha script to apply the recaptcha automagically, which would lead to having to discover it's state before resetting or reapplying via behaviors. If we change the class name and call render explicitly we can control it via behaviors and it's trivial to make it work consistently.

hass’s picture

Status: Needs review » Needs work
fearlsgroove’s picture

Status: Needs work » Needs review

You set it back to needs work without any further comment? As I said changing the class is necessary to fix the bug. What specifically do you think this change will break?

hass’s picture

I thought this class is a must. Why are you not implementing it the way Google proposed with a callback? We may also need to fix the captcha on multiple forms per page issue. Is the recaptcha now loading slower than in past?

fearlsgroove’s picture

In my light testing it worked well, but theoretically it might try to run the behavior before the recaptcha dependencies have loaded, and since google recommends it that way ..

Here's a version that:

  • Uses the boilerplate google class for the captcha element
  • uses the google callback for the initial load
  • tells google to render explicit
  • and in the behavior defensively bails if the recaptcha api isn't available yet.
fearlsgroove’s picture

FileSize
3.02 KB
PASSED: [[SimpleTest]]: [MySQL] 102 pass(es). View

oops ..patch

bceyssens’s picture

FileSize
3.36 KB
FAILED: [[SimpleTest]]: [MySQL] 113 pass(es), 1 fail(s), and 0 exception(s). View

fearlsgroove, I tested your patch in #9 but it didn't work with ajax and sometimes the grecaptcha wasn't loaded at the time the behavior was called.

The things I changed:

  • added the recaptcha api.js in #attached settings
  • changed to callback attributes to an onload attribute, as mentioned in the docs

This solution works well for us. I haven't checked the tests though.

Status: Needs review » Needs work

The last submitted patch, 10: recaptcha-use-behaviors-10.patch, failed testing.

bceyssens’s picture

FileSize
3.39 KB
FAILED: [[SimpleTest]]: [MySQL] 113 pass(es), 1 fail(s), and 0 exception(s). View

When you get an error on the form, the script will try to load the widget again. But it has no css-class when it is rendered through the drupalRecaptchaOnload callback function.

I also tried to fix the tests.

hass’s picture

Status: Needs work » Needs review

Interdiffs are a cool thing :-)

Status: Needs review » Needs work

The last submitted patch, 12: recaptcha-use-behaviors-11.patch, failed testing.

hass’s picture

api.js need to be added with async and defer to the page, too.

hass’s picture

Title: Use behaviors for 2.x » Ajax support / Use behaviors for 2.x
hass’s picture

Version: 7.x-2.x-dev » 8.x-2.x-dev
hass’s picture

  1. +++ b/drupal-recaptcha.js
    @@ -0,0 +1,28 @@
    +(function ($, window, document) {
    

    - "Drupal" seems missing
    - document seems not required.

  2. +++ b/drupal-recaptcha.js
    @@ -0,0 +1,28 @@
    +Drupal.behaviors.recaptcha = {
    

    Indention incorrect

  3. +++ b/drupal-recaptcha.js
    @@ -0,0 +1,28 @@
    +  attach: function (context, settings) {
    

    What is "settings" added for?

  4. +++ b/drupal-recaptcha.js
    @@ -0,0 +1,28 @@
    +      if (typeof grecaptcha == 'undefined') {
    

    Not eslint safe. Requires "==="

  5. +++ b/drupal-recaptcha.js
    @@ -0,0 +1,28 @@
    +window.drupalRecaptchaOnload = function() {
    

    Indention incorrect

  6. +++ b/drupal-recaptcha.js
    @@ -0,0 +1,28 @@
    +    $(this).addClass('drupal-recaptcha-processed');
    

    Why is the class prefixed with Drupal? Do we have a name space collission or just prepare for any possibility?

  7. +++ b/drupal-recaptcha.js
    @@ -0,0 +1,28 @@
    +})(jQuery, window, document);
    

    - "Drupal" seems missing
    - document seems not required.

  8. +++ b/recaptcha.module
    @@ -118,20 +118,13 @@ function recaptcha_captcha($op, $captcha_type = '') {
    +                drupal_get_path('module', 'recaptcha') . '/drupal-recaptcha.js',
    

    Why is the file named "drupal-recaptcha" and not only "recaptcha"?

alemadlei’s picture

This is a patch I did while experiencing https://www.drupal.org/node/1463768 (reCAPTCHA in Modal Forms)

Works against 7.x-2.0. Should work with dev too, but didn't test.

hass’s picture

We schould move forward with #12 only.

alemadlei’s picture

Does #12 work with ajax forms?

hass’s picture

Status: Needs work » Needs review
FileSize
3.74 KB
PASSED: [[SimpleTest]]: [PHP 5.5 MySQL] 110 pass(es). View

Ported #12 to D8 and fixed the issues. However I have no idea how I can test this with Ajax under D8.

Status: Needs review » Needs work

The last submitted patch, 22: Issue-2493183-by-hass-Ajax-support---Use-behaviors-f.patch, failed testing.

hass’s picture

Status: Needs work » Needs review
Related issues: +#2548325: Schema errors for captcha.settings

Bug in captcha module

mozh92’s picture

#12 work for me, Thanks!

hass’s picture

You need to test the latest version.

rang501’s picture

Status: Needs review » Needs work

The last submitted patch, 28: 2493183-recaptcha-use-behaviors-28.patch, failed testing.

The last submitted patch, 28: 2493183-recaptcha-use-behaviors-28.patch, failed testing.

The last submitted patch, 28: 2493183-recaptcha-use-behaviors-28.patch, failed testing.

The last submitted patch, 28: 2493183-recaptcha-use-behaviors-28.patch, failed testing.

The last submitted patch, 28: 2493183-recaptcha-use-behaviors-28.patch, failed testing.

The last submitted patch, 28: 2493183-recaptcha-use-behaviors-28.patch, failed testing.

The last submitted patch, 28: 2493183-recaptcha-use-behaviors-28.patch, failed testing.

vlad.dancer’s picture

@rang501, Thanks for patch it applies to latest 2.x, but
- should be applicable from the root of the module folder
- needs to rewrite according to the notes from here https://www.drupal.org/node/2493183#comment-10199293

rang501’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

vlad.dancer’s picture

Version: 8.x-2.x-dev » 7.x-2.x-dev
Status: Needs work » Needs review

Change to 7.x-2.x-dev to test latest path. Will be back later to the original version.

Status: Needs review » Needs work

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

The last submitted patch, 37: 2493183-recaptcha-use-behaviors-37.patch, failed testing.

vlad.dancer’s picture

Version: 7.x-2.x-dev » 8.x-2.x-dev
hass’s picture

The D8 version need to be done very first.

rang501’s picture

Status: Needs review » Needs work

The last submitted patch, 51: 2493183-recaptcha-use-behaviors-51.patch, failed testing.

The last submitted patch, 51: 2493183-recaptcha-use-behaviors-51.patch, failed testing.

The last submitted patch, 51: 2493183-recaptcha-use-behaviors-51.patch, failed testing.

The last submitted patch, 51: 2493183-recaptcha-use-behaviors-51.patch, failed testing.

The last submitted patch, 51: 2493183-recaptcha-use-behaviors-51.patch, failed testing.

The last submitted patch, 51: 2493183-recaptcha-use-behaviors-51.patch, failed testing.

The last submitted patch, 51: 2493183-recaptcha-use-behaviors-51.patch, failed testing.

hass’s picture

Version: 7.x-2.x-dev » 8.x-2.x-dev
grahor_targ’s picture

#19 worked for me, for ctools modal window. Tested extensively.

RajabNatshah’s picture

Tested #51 with with 2.2 and Drupal 7.52

RajabNatshah’s picture

Status: Needs work » Reviewed & tested by the community
hass’s picture

Status: Reviewed & tested by the community » Needs work

Patch is broken and not against D8. Do not set broken patches rtbc, please.

Patsient’s picture

all patches didnt work for me in D 8.2.4. #22 seemed more responsible, but did not work with
<a class="use-ajax" href="/form/tatata">tatata</a>

anyone have an idea how to fix this?
Please help )

RajabNatshah’s picture

Noted, Hass

Aha:
hass CreditAttribution: hass commented 12 months ago
Version: 7.x-2.x-dev » 8.x-2.x-dev

It was pass for Drupal 7
Tested #51 with with 2.2 and Drupal 7.52

But you moved it to 8.x-2.x-dev

nubeli’s picture

Is it possible to use this issue to fix 7.x-2.x and create a new issue for 8.x-2.x? Maybe you've got a good reason but it seems that the 7.x patch is ready, more or less, and the 8.x patch doesn't exist yet. Aren't they independent of each other?

hass’s picture

Component: reCAPTCHA Captcha » reCAPTCHA V2
akozma’s picture

Using this patch the recaptcha scripts are attached as libraries. For me it's working now, with (modal forms) or without ajax.

Sorry for no interdiff, I had some issues while creating.

akozma’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 68: 2493183-recaptcha-use-behaviors-68.patch, failed testing.

jedihe’s picture

#51 is working for me (D7), in a setup where the form is being served via Authcache p13n (Ajax client).

I'm attaching the updated patch with a minor update to 1 trivial failure in tests.

jedihe’s picture

Version: 8.x-2.x-dev » 7.x-2.x-dev

Setting to 7.x-2.x temporarily in order to trigger full testing.

jedihe’s picture

Version: 7.x-2.x-dev » 8.x-2.x-dev

Alright, D7 tests back to green. Didn't fully check if the current tests actually check for compatibility with AJAX, though.

Back to D8.

ilya.no’s picture

Updated #68 patch for current 8.x-2.x-dev branch. Worked for me, as well. Thanks!

s_leu’s picture

Can confirm that the last patch work with the latest dev release (on a webform with ajax enabled).

ameymudras’s picture

Status: Needs work » Needs review
FileSize
3.4 KB

The last patch worked for me except for multilingual websites where the captcha would be displayed in a language the site would be first called. This would happen because recaptcha_library_info_build() function would call only once as a result all the other languages would be ignored. Ive created a patch to fix this

Status: Needs review » Needs work

The last submitted patch, 76: 2493183-recaptcha-use-behaviors-76.patch, failed testing. View results
- codesniffer_fixes.patch Interdiff of automated coding standards fixes only.

ameymudras’s picture

Issue tags: +Need tests
makbuk’s picture

#71 don't work for me.
I use reCAPTCHA 7.x-2.2 with Bootstrap Login Modal module release 7.x-3.2 for create modal registration form. Unfortunately the reCaptcha doesn't display on the registration form until you click registration button, after that the form will be closed and when you reopen it reCaptcha will be dispayed.

Yago Elias’s picture

Why we are keeping closing the child as duplicated to this issue? That's not the correct flow i think. None of the issues are related to each others, and keep a issue to submit patches from 7.x and 8.x is not a good idea.

Artusamak’s picture

#76 is working like a charm when embedding a captcha field in an AJAX webform block.

fhaupt’s picture

#76 seems to work but I get the following JS error

recaptcha__en.js:380 Uncaught Error: ReCAPTCHA placeholder element must be empty
    at zr (recaptcha__en.js:380)
    at recaptcha__en.js:385
    at c (recaptcha__en.js:375)
gurunathan’s picture

#71 working fine.

VitaliyB98’s picture

Update patch from #76

VitaliyB98’s picture

Status: Needs work » Needs review

The last submitted patch, 2493183-ajax-support-82.patch, failed testing. View results

Status: Needs review » Needs work

The last submitted patch, 85: 2493183-ajax-support-85.patch, failed testing. View results

janchojnacki’s picture