Google is coming out with a new option for the reCAPTCHA service: https://developers.google.com/recaptcha/docs/invisible

It would be cool if we could have the option to use the invisible widget with this module. It doesn't look like there's much of a difference in markup for the invisible widget.

TODO:

  • The Invisible reCAPTCHA requires JavaScript and has no support for browsers without JavaScript enabled. This means the NOSCRIPT fallback no longer works and need to be removed if invisible captcha is used.
CommentFileSizeAuthor
#89 protected-by-recaptcha.png111.51 KBesod
#87 recaptcha-no-contact.png137.07 KBesod
#85 no-recaptcha.png134.51 KBesod
#85 invisible.png109.27 KBesod
#61 2852269-61-invisible-recaptcha-D7--interdiff-vs-58.patch5.83 KBjedihe
#61 2852269-61-invisible-recaptcha-D7--interdiff-vs-57.patch7.87 KBjedihe
#61 2852269-61-invisible-recaptcha-D7.patch13.09 KBjedihe
#60 2852269-60-invisible-recaptcha-D7--interdiff-vs-58.patch5.7 KBjedihe
#60 2852269-60-invisible-recaptcha-D7--interdiff-vs-57.patch7.73 KBjedihe
#60 2852269-60-invisible-recaptcha-D7.patch12.96 KBjedihe
#59 2852269-59-invisible-recaptcha-D7--interdiff-vs-58.patch5.66 KBjedihe
#59 2852269-59-invisible-recaptcha-D7--interdiff-vs-57.patch7.69 KBjedihe
#59 2852269-59-invisible-recaptcha-D7.patch12.92 KBjedihe
#58 2852269-58-invisible-recaptcha-interdiff-vs-57.patch2.29 KBjedihe
#58 2852269-58-invisible-recaptcha-D7.patch9.63 KBjedihe
#57 2852269-57-invisible-recaptcha.patch7.33 KBjedihe
#56 recaptcha-invisible-option-2852269-56.patch13.98 KBid.aleks
#54 recaptcha-invisible-option-2852269-52.patch6.66 KBid.aleks
Google reCaptcha module problem.PNG12.53 KBSuperbank
#48 recaptcha-invisible-without-2852269-48-7.x-2.x-dev.patch13.4 KBShawnRong
recaptcha-invisible-without-ajax-form-submit-2852269-42-7.x-2.x.patch11.9 KBShawnRong
#39 recaptcha-invisible-without-ajax-form-submit.patch8.7 KBmozh92
#36 invisible_option-2852269-36.patch5.62 KBMatroskeen
#36 interdiff-2852269-24-2852269-36.txt1.69 KBMatroskeen
#33 interdiff-2852269-24-2852269-33.txt526 bytesMatroskeen
#33 invisible_option-2852269-33.patch5.53 KBMatroskeen
#24 invisible_option_8_x_2_x_dev-2852269-15.patch5.55 KBhass
invisible_recaptcha.patch3.51 KBVacuumWizard
#6 recaptcha_implement_invisible_recaptcha.patch5.4 KBbobdekinder
#8 invisible_option-2852269-8.patch3.64 KBchgasparoto
#14 invisible_option_8_x_2_x_dev-2852269-14.patch5.56 KBchgasparoto
#15 invisible_option_8_x_2_x_dev-2852269-15.patch5.55 KBchgasparoto
#15 interdiff-2852269-14-15.txt798 byteschgasparoto
#17 recaptcha-7.x-2.2.patch3.79 KBBedstvie
Members fund testing for the Drupal project. Drupal Association Learn more

Comments

amklose created an issue. See original summary.

hass’s picture

looking for your patch...

hass’s picture

Status: Active » Needs work
bobdekinder’s picture

Hi, i tested out the patch provided by VacuumWizaard. But I think a part about the actual form submission is missing. I therefore wrote my own patch based on his. Would love some feedback ...

inovegil’s picture

I'm trying to patch with first the second, then the first file, the module on a working D7 site and I cannot achieve that. Perhaps I should apply it over d8 or directly on the repo? Anyway if it isn't too difficult would be interesting to officially add support for this. Thanks in advance by your help.

chgasparoto’s picture

I made this patch based on @bobdekinder code, with some little improvements.
This is for version 7.x-2.0, once the issue for it was closed earlier (https://www.drupal.org/node/2859577).

Please review.

Thanks!

hass’s picture

D8 first, than backports. We always write patches against DEV.

Hiding bad patches.

inovegil’s picture

@chgasparoto #8 I don't achieve to get this running. I've applied the patch but the options don't appear as modified in recaptcha.admin.inc. I've already reinstalled the module. Ideas? Thanks. Thanks @hass #9.

chgasparoto’s picture

@hass alright, thanks!

@inovegil did you look up on size option? I got this running on a simplytest.me instance without any problems.

inovegil’s picture

Yes I did. The options are normal and compact. I'll try completely erasing and reinstalling. Thanks.

inovegil’s picture

I tried that in simplytest.me it works fine, It's strange because uninstalling and erasing the module (captcha and recaptcha) and then reinstalling them the option is not appearing. One posible reason is that my site is in spanish but I added english, changed the language of the page and the box size was the same options. It's really strange. I tried applying the patch both with patch and git apply without errors. Thanks.

chgasparoto’s picture

@inovegil That's weird. Later I'll try with another language and I'll let you know.

I wrote a patch for the dev version.

Please review.

Thanks!

chgasparoto’s picture

Re-uploading the patch.

I made a mistake forgetting right blank spaces on Badge options array.

chgasparoto’s picture

@inovegil I tested with a Portuguese site and worked fine too. Did you get any errors?

Bedstvie’s picture

FileSize
3.79 KB

integrated your patch to Drupal 7

hass’s picture

Why is testbot not running on the patches? :-(

hass’s picture

D7 uninstall code is missing.

inovegil’s picture

Hello. It seems that there isn't any error. It's very strange, because on all my tests outside this site it worked properly. Regards.

inovegil’s picture

Hide the chgasparoto patch with errors (8.x). He said that they reuploaded the patch dued to mistakes.

levmyshkin’s picture

I tried #17 patch, but it doesn't work for me. It shows always:
The answer you entered for the CAPTCHA was not correct.

I'm not sure why it happens. Firstly I think invisible reCaptcha works only with https, I tested it on local instance without https:
https://developers.google.com/recaptcha/docs/invisible

The script must be loaded using the HTTPS protocol and can be included from any point on the page without restriction.

Secondary I'm not how it should work. Follow docs save/submit button must have attributes:
class="g-recaptcha" data-sitekey="your_site_key" data-callback='onSubmit'

But now I see another button has the same attributes, not save/submit button.

mchaplin’s picture

Will the Invisible reCAPTCHA option be incorporated into a D7 version of this module?

Is there a time frame for that?

Thanks Mike

Status: Needs review » Needs work

The last submitted patch, 24: invisible_option_8_x_2_x_dev-2852269-15.patch, failed testing.

hass’s picture

Failing patches cannot committed.

hass’s picture

We should add a note that people should uncheck Add a description to the CAPTCHA in CAPTCHA settings or an empty fieldset with just a bit confusing text is shown.

hass’s picture

hass’s picture

Issue summary: View changes
hass’s picture

Component: reCAPTCHA Captcha » Invisible reCAPTCHA
thedotwriter’s picture

#17 works fine for a simple form.

But it does not work when two forms use invisible reCAPTCHA on the same page.

To be able to make it work, I had to do a few things:

1. Apply the following patch to enable reCAPTCHA to be set on two forms in the same page: https://www.drupal.org/node/1833822#comment-11430341

2. Modify the code of the patch like I suggested here: https://www.drupal.org/node/1833822#comment-12034233

3. Modify line 54 of recaptcha.invisible.js :
grecaptcha.execute();
by:
grecaptcha.execute(Drupal.behaviors.recaptcha.widgets[$('.g-recaptcha[data-size="invisible"]', $form).attr('id')]);

That way, you'll make sure reCATPCHA executes the right widget and not the first to have been defined when loading the page (without the widget ID as argument, grecaptcha.execute() automatically fallback to the first defined CAPTCHA).

Sorry, I did not do a patch, I'm not sure how that works and I'm lacking time. I still wanted to throw the solution out there though, it may help a few folks.

Cheers

loze’s picture

I tried the patch in #17 as well as the changes suggested in #31
The captcha badge shows up on the form, but on submit I get "The answer you entered for the CAPTCHA was not correct"

I'm getting this in the logs:
"post blocked by CAPTCHA module: challenge reCAPTCHA (by module recaptcha), user answered "Google no captcha", but the solution was "1""

My fault, I had applied the patch incorrectly.
#17 Appears to be working in my case.

Matroskeen’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 33: invisible_option-2852269-33.patch, failed testing.

Matroskeen’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 36: invisible_option-2852269-36.patch, failed testing.

mozh92’s picture

hass’s picture

Status: Needs work » Needs review

Status: Needs review » Needs work

The last submitted patch, 39: recaptcha-invisible-without-ajax-form-submit.patch, failed testing.

ShawnRong’s picture

Status: Active » Needs review

I had integrated the new Google Invisible reCAPTCHA options for Drupal 7.And it supports multiple forms in one page.In the recaptcha-customize.js file, Users can rewrite two functions before or after Google reCAPTCHA widget rendered.(ps.Please ignore my last three comments,I was really confused with the drupal org issue rules.)Here's my patch:

Status: Needs review » Needs work
hass’s picture

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

Status: Needs work » Needs review

@hass
I had updated the new Google Invisible reCAPTCHA options into the 7.x version.Can you merge the patch into the development release?

Status: Needs review » Needs work

The last submitted patch, 48: recaptcha-invisible-without-2852269-48-7.x-2.x-dev.patch, failed testing.

hass’s picture

  1. Failing patches cannot committed.
  2. D7 can only committed after D8 has been committed.
id.aleks’s picture

Status: Needs work » Needs review
FileSize
6.66 KB

I have refined a patch of Matroskeen (Thanks for your work =) ) for D8, that was added here #36. Tested it with Form API Examples, seems it works both on ajax and non-ajax form. Please, test it again.

hass’s picture

There is a typo in recapthcaOnInvisibleSubmit. I guess that the noscript code no longer works and may need to be removed. Not tested.

id.aleks’s picture

Hass, I have updated patch according to you comment. Seems, that reCaptcha doesn't work at all with disabled javascript option. So I removed completely that feature from module. Actually, I think that we need some features if javascript is disabled, but not sure if it's related to this issue. Moreover, I have updated recaptcha.invisible.js code, due to some issues in it. Please test it.

jedihe’s picture

Version: 8.x-2.x-dev » 7.x-2.x-dev
FileSize
7.33 KB

#39 didn't apply cleanly, re-rolling to fix that problem. Re-roll was verified with a visual diff tool: no code changes, only diff metadata and file paths were updated.

Switching to D7 to run tests.

jedihe’s picture

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

Just 1 warning about coding standards, will leave it like that. Manual testing is still to be done.

Switching to 8.x while I perform manual testing and perform some other adjustments (we may need to call .reset() as done in #2493183: Ajax support / Use behaviors for 2.x).

jedihe’s picture

Hiding interdiffs.

hass’s picture

Have you ever seen the test with select box next to file upload button?

mozh92’s picture

this in not work with ajax, I try patch https://www.drupal.org/files/issues/2493183-71-ajax-support.patch with #61

jedihe’s picture

@hass: hey! I've seen it :), it only offers a single test setup, but I need more comprehensive testing than that. Any other way you know to get multiple test envs without (temporarily) switching the issue to 7.x?

Some results from manual testing for #61 (D7, using Examples module):
reCaptcha V2:

  • Works fine for normal forms (e.g. login form in block).
  • Works fine for AJAX-enabled forms.
  • Two forms with reCaptcha get a separate reCaptcha widget.
  • A valid reCaptcha is "cached" when submitting the login form; so if there are validation errors, no reCaptcha widget is shown again (I'm guessing it gets stored in the form cache?).

Invisible reCaptcha:

  • Click handler to trigger background fetching of reCaptcha is not triggering for AJAX-enabled submit (try examples module, /examples/ajax_example/wizard path). This is related to Drupal's AJAX using mousedown to trigger the AJAX submission and disabling the click to prevent other problems. See https://drupal.stackexchange.com/questions/11638/how-to-programmatically...
  • Multiple forms with invisible reCaptcha generate multiple badges (icon at bottom left/right); subtle, but ugly.

In summary:

  • reCaptcha V2: multiple widgets working, AJAX-enabled forms working.
  • invisible reCaptcha: works for normal forms, doesn't yet work for AJAX-enabled submit buttons (it may be possible to get it working by overriding Drupal.ajax.prototype.beforeSubmit()).

Given how difficult it seems to be to get the invisible reCaptcha working with AJAX-enabled forms, I won't even attempt it.

jedihe’s picture

@mozh92: #61 and https://www.drupal.org/files/issues/2493183-71-ajax-support.patch can not be applied together. I think #61 does everything that https://www.drupal.org/files/issues/2493183-71-ajax-support.patch does (only exception may be calling .reset() when the behavior is triggered again in a form that was already processed, but I don't yet know why is that necessary).

jedihe’s picture

Using Drupal.ajax.prototype.beforeSubmit() for this may require https://www.drupal.org/node/1907932; this is in order to halt the AJAX submission while the reCaptcha request is performed asynchronously; later, the callback can be used to re-trigger the AJAX submission, but this time with a flag that should let it run in its entirety.

jedihe’s picture

mozh92’s picture

Given how difficult it seems to be to get the invisible reCaptcha working with AJAX-enabled forms, I won't even attempt it.

I try this do, but I no have high experience

mikemadison’s picture

The invisible captcha patches and seems work fine on the 8.2.x-dev branch. Are there specific concerns other than being able to add an invisible captcha and seeing that it triggers validation when it should (and doesn't otherwise)?

jerry’s picture

If this is working acceptably now, at least for conventional single-form applications, I'd love to see it back-ported to D7 soon. I have a lot of D7 clients that I need to migrate from Mollom before it shuts down, and I expect that I'm hardly the only one in that situation.

hass’s picture

@jerry: you can still use the module. No need to wait for invisible recaptcha.

I remember some people reported issues with above patch that are not fixed yet.

jerry’s picture

No need to wait for invisible recaptcha.

Understood (and thanks), but I hope to wait for the invisible recaptcha if possible as it provides a user experience closer to Mollom's (no visible captcha in most cases).

mikemadison’s picture

the patches worked for me!

mikemadison’s picture

Status: Needs review » Reviewed & tested by the community
id.aleks’s picture

I have almost finished applying that patch for webforms form. I will try to complete it and update here in near feature.

hass’s picture

Status: Reviewed & tested by the community » Needs work

There have been bugs / issues reported with this patch.

id.aleks’s picture

Issue tags: +LutskGSW18
id.aleks’s picture

Assigned: Unassigned » id.aleks
mstef’s picture

Is this any different than https://drupal.org/project/antibot ?

id.aleks’s picture

Is this any different than https://drupal.org/project/antibot ?

@mstef antibot uses another method to indicate a bot. For example, it waits for a mouse to move to indicate that the visitor is human. This module provides a Google Recaptcha functionality.

esod’s picture

FileSize
109.27 KB
134.51 KB

The patch is causing us to not be able to contact reCAPTCHA. With 8.x-2.x-dev ((HEAD detached at 572d857)) ...

Invisible configured

no recaptcha

When I change the widget size back to Normal, reCAPTCHA is contacted again.

dandaman’s picture

FileSize
53.22 KB

esod,

When you register for a new site with Google, you have to choose between reCAPTCHA V2 or Invisible reCAPTCHA. So maybe you have to get a new API key for Invisible to work?

Google's reCAPTCHA registration form screenshot.

Which also brings up a question: Can an API request tell what type it is? So maybe we could even detect the type and display it accordingly? (I'm not sure this is how it works... I'm just noticing how it looks from the above registration screen--that it seems you sign up for an API key for the classic reCAPTCHA or the Invisible reCAPTCHA.)

esod’s picture

FileSize
137.07 KB

@dandaman, redoing my keys with Invisible reCAPTCHA does get my site contacting reCAPTCHA again using the widget size invisible. Thanks.

However, the reCAPTCHA is never invisible and after ten page reloads it never launches the reCAPTCHA widget itself.

esod’s picture

esod’s picture

FileSize
111.51 KB

Please ignore the screen shot recaptcha-no-contact.png. It's there by mistake.

I am seeing g-recaptcha on the page here:

<input data-drupal-selector="form-nfpouo2wpk2xnrsiiykat1hajjv8hll0fffzzcucbag" type="hidden" name="form_build_id" value="form-NfpoUO2Wpk2XnrsIiyKat1hAJjV8Hll0ffFzZCucBAg" />
<input data-drupal-selector="edit-user-login-form" type="hidden" name="form_id" value="user_login_form" />
   <div class="captcha js-form-wrapper form-wrapper details" open="open"><h4 role="button" aria-expanded="true" aria-pressed="true" class="summary">CAPTCHA</h4><div class="details-wrapper"><div class="details-description">This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.</div><input data-drupal-selector="edit-captcha-sid" type="hidden" name="captcha_sid" value="329245" />
<input data-drupal-selector="edit-captcha-token" type="hidden" name="captcha_token" value="c67585fc88267b5b4235ef3e8b454120" />
<input data-drupal-selector="edit-captcha-response" type="hidden" name="captcha_response" value="Google no captcha" />
<div class="g-recaptcha" data-sitekey="6LegHkYUAAAAAL9wIc5seYwv65n1FZ7zrar2z2ma" data-theme="light" data-type="image" data-size="invisible" data-badge="bottomright" data-callback="recaptchaOnInvisibleSubmit"></div></div>
</div>

As well as the protected by reCAPTCHA sticker.

protected-by-recaptcha

Now if I can just get the reCAPTCHA widget itself to fire...