Issues found on new version wip-invisible

[ProxiBlue]

This relates to new version in branch : https://github.com/ProxiBlue/reCaptcha/tree/wip-invisible

[vishy93]

@ProxiBlue First issue, when hovering over the collapsing "protected by reCaptcha", and you move your mouse over to the Blue rectangle it disappears quickly, and thus making the ability to click the privacy and terms none.

[vishy93]

Second issue, it is affixed without choice to bottom right, and it might affect design. I.e, if you have a back to top link in bottom right.

[ProxiBlue]

@vishy93 To trigger reCaotcha, set your browser identifier to 'googlebot'

https://winaero.com/blog/change-user-agent-chrome/

it will immediately trigger images reCaptcha

[ProxiBlue]

@vishy93

Updated to allow position setting, using admin settings.

[ProxiBlue]

@vishy93

First issue, when hovering over the collapsing "protected by reCaptcha", and you move your mouse over to the Blue rectangle it disappears quickly, and thus making the ability to click the privacy and terms none.

I cannot reproduce. Can you confirm same issue is with base RWD theme, or is it only with your own theme.

[vishy93]

Base RWD theme on latest chrome browser

[ProxiBlue]

https://drive.google.com/file/d/1vmk3wygoB335qnUdVVC2qVOi5aBCAsAa/view

Possible a browser compatibility issue. I am using Chrome 68

[vishy93]

Works well there.

[ProxiBlue]

I have determined is not working on checkout. I am investigating why.

[vishy93]

@ProxiBlue I've not tried in checkout but will have a look.

[vishy93]

@ProxiBlue not sure if you have noticed, but thought it might be useful, when you login on checkout for a brief moment you can see that it correctly logins you in and takes you to checkout but then it literally after like half a second or so redirects you back and sets the "Incorrect CAPTCHA." error.

[vishy93]

@ProxiBlue Also if your logged in is intentionally not meant to show in the contacts page?

[ProxiBlue]

Updated wip-invisible branch with code that makes checkout work.

So far I have tested: Login, create account, checkout login, checkout as guest, checkout with register

[ProxiBlue]

@vishy93

Also if your logged in is intentionally not meant to show in the contacts page?

Can you elaborate? I am not sure what you mean

[ProxiBlue]

@vishy93

not sure if you have noticed, but thought it might be useful, when you login on checkout for a brief moment you can see that it correctly logins you in and takes you to checkout but then it literally after like half a second or so redirects you back and sets the "Incorrect CAPTCHA." error.

Checkout was not working, latest update is adjusted for checkout. The code from the initial PR that got me working on this, broke checkout completely for recaptcha, so I also reverted that.

Can you check with latets code, see if this is still happening.

[ProxiBlue]

I have tested all sections that require reCaptcha, and they all seem to be working with invisible

[vishy93]

@ProxiBlue I meant if your logged in as a customer and go to contact us the reCapcha won't be there. Only shows on contact us if you are not logged in

[ProxiBlue]

This is intentional. If person is logged in, there should be no need to check.

You get spammed via bots on contact us page, without being logged in.

[vishy93]

@ProxiBlue Sweet, yeah just wanted to make sure :) I will test the new version now :)

[ProxiBlue]

New feature:

https://github.com/ProxiBlue/reCaptcha/tree/wip-invisible#newsletter-subscribe-captcha

[vishy93]

Awesome :)

[vishy93]

@ProxiBlue Error for Newsletter Subscriptions:

`

Uncaught Error: grecaptcha.execute only takes the 'action' parameter   | Qs | @ | recaptcha__en_gb.js:417 | (anonymous) | @ | (index):987

`

To replicate error, set your user-agent as either 'Google smartphone' or 'Android (4.0.2) Browser - Galaxy Nexus'.

Also, downloading the new zip only get the app folder, so no skin or js folder.

[vishy93]

Also, If you use on two locations at once, for example contact us page and the newsletter subscription form which is situated in the footer you get the error:

Uncaught Error: reCAPTCHA has already been rendered in this element at Object.Ms [as render] (VM21174 recaptcha__en_gb.js:415) at (index):357 at prototype.js:825 at Array.forEach (<anonymous>) at Array.each (prototype.js:824) at window.reCaptchaCallback ((index):350) at ws (VM21174 recaptcha__en_gb.js:422) at xs (VM21174 recaptcha__en_gb.js:406) at VM21174 recaptcha__en_gb.js:423 at VM21174 recaptcha__en_gb.js:432

[vishy93]

Also, not sure if this is allowed but I quite like how dropbox have got the privacy and terms message in the sign page https://www.dropbox.com/

[ProxiBlue]

Also, not sure if this is allowed but I quite like how dropbox have got the privacy and terms message in the sign page https://www.dropbox.com/

They used their own text box, with links, and own styles on an inline display of the reCaptcha element

ref: https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge

You can do the same by using the INLINE option in admin.

[ProxiBlue]

Also, downloading the new zip only get the app folder, so no skin or js folder.

That is correct. The skin folder was deleted, as it only contained images for V1, which is now obsolete I don't think there ever was a js part....

BTW - noticed they are beta testing v3!

[vishy93]

@ProxiBlue Indeed I was just more concerned about the "These terms do not grant you the right to use any branding or logos used in our Services. Don’t remove, obscure, or alter any legal notices displayed in or along with our Services."

[vishy93]

V3 looks very good. I like the newer approach less user experience hinderence. Did you see the other two errors I found?

[ProxiBlue]

Yes. Will be looking at that later the evening

[vishy93]

@ProxiBlue The script is being called twice.

<script

  | src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit&hl=en-GB"   | async   | defer>

This may be the issue for the second issue

[ProxiBlue]

Also, If you use on two locations at once, for example contact us page and the newsletter subscription form which is situated in the footer you get the error:

Uncaught Error: reCAPTCHA has already been rendered in this element at Object.Ms [as render] (VM21174 recaptchaen_gb.js:415) at (index):357 at prototype.js:825 at Array.forEach () at Array.each (prototype.js:824) at window.reCaptchaCallback ((index):350) at ws (VM21174 recaptcha__en_gb.js:422) at xs (VM21174 recaptchaen_gb.js:406) at VM21174 recaptcha__en_gb.js:423 at VM21174 recaptcha__en_gb.js:432

screen shot 2018-08-12 at 18 19 19

I cannot reproduce this.

Can you ensure your browser cache is cleared, and don't have any old/previous recapctha.phtml in theme folders.

https://drive.google.com/file/d/1XwCacjgcVnnULQBta-5X6lLFaUp-TAAh/view

[ProxiBlue]

Uncaught Error: grecaptcha.execute only takes the 'action' parameter | Qs | @ | recaptcha__en_gb.js:417 | (anonymous) | @ | (index):987 To replicate error, set your user-agent as either 'Google smartphone' or 'Android (4.0.2) Browser - Galaxy Nexus'.

I can reproduce this one.

[vishy93]

@ProxiBlue I have disabled cacheing :) also I always clear. This is my recaptcha.phtml file

https://hastebin.com/ragoxofawa.xml

[ProxiBlue]

Soled issue with error: Uncaught Error: grecaptcha.execute only takes the 'action' parameter

[ProxiBlue]

You are using inline option?

[vishy93]

@ProxiBlue just testing different things out, the error is there in in-line, bottom-left and bottom-right.

[vishy93]

@ProxiBlue I think the below might be a contributing factor:

@ProxiBlue The script is being called twice.

<script -- | src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit&hl=en-GB" | async | defer> This may be the issue for the second issue

Also, specifically it is line 22 of repatcha.phtml that is throwing the error:

var cpatchaId = grecaptcha.render(elm.id, {

[vishy93]

@ProxiBlue

Soled issue with error: Uncaught Error: grecaptcha.execute only takes the 'action' parameter

Sorry, what was the fix for this issue?

[ProxiBlue]

That's the thing, I am not getting that, it is only called once....for me here.

[ProxiBlue]

Soled issue with error: Uncaught Error: grecaptcha.execute only takes the 'action' parameter Sorry, what was the fix for this issue?

The execute was incorrectly loading elements that was passed. Seems those elements are not working correctly when those mobile devices are loaded/used.

I pushed new code to branch for that fix

[vishy93]

@ProxiBlue What browser would you be using? I am using Chrome and can confirm I am using latest package.

[ProxiBlue]

[vishy93]

The execute was incorrectly loading elements that was passed. Seems those elements are not working correctly when those mobile devices are loaded/used.

@ProxiBlue Ah okay, how would we fix this?

[ProxiBlue]

Should already be fixed in latest code.

[ProxiBlue]

trying to reproduce other issue

[vishy93]

@ProxiBlue Could you view your page source and do a find search for recaptcha/api. I see two instances.

[ProxiBlue]

very odd

Contact us page....

one instance in source

what page are you testing on? Can you send me the cms source of that page?

[ProxiBlue]

stick it in a gist...

[ProxiBlue]

busy installing chrome

[ProxiBlue]

Can you show in source from your side the second instance?