Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support reCAPTCHA component #2273

Open
lisotton opened this Issue Feb 25, 2016 · 41 comments

Comments

@lisotton
Copy link

lisotton commented Feb 25, 2016

Hi everyone,

I don't know if someone is already working in this request, but I believe that we need to implement support for recaptcha in AMP.

Thanks.

@jmadler

This comment has been minimized.

Copy link
Contributor

jmadler commented Feb 25, 2016

Is there a specific problem that would solve for you? I'd like to better understand the use case.

@rudygalfi

This comment has been minimized.

Copy link
Contributor

rudygalfi commented Feb 18, 2017

@jasti Do you know anyone on the captcha team we could talk to? This is going to be needed for some landing page and e-commerce scenarios.

@jasti

This comment has been minimized.

Copy link
Collaborator

jasti commented Feb 18, 2017

We've reached out to the reCaptcha team and will update progress here.

@weeblr

This comment has been minimized.

Copy link

weeblr commented Feb 23, 2017

HI

Hope this can be done. Now that we have forms conversion (from html to amp) working, people need to make special version of their forms to remove the captcha field, big annoyance, and of course, there is no captcha so spam rate can be high.

Rgds

@aghassemi aghassemi self-assigned this Feb 23, 2017

@jasti

This comment has been minimized.

Copy link
Collaborator

jasti commented Feb 24, 2017

@weeblr Yup, we are actively looking into this.

@ericlindley-g ericlindley-g added this to Sprint (candidate) in UI Feb 27, 2017

@ericlindley-g ericlindley-g modified the milestones: Sprint H1 March, Pending 3P Implementation Feb 27, 2017

@alanorozco alanorozco changed the title Support do reCaptcha Support reCAPTCHA component Feb 27, 2017

@nickmoline

This comment has been minimized.

Copy link

nickmoline commented Mar 7, 2017

Can we have an implementation more generic than this, something like <amp-captcha> that could be extended to multiple CAPTCHA providers including self provided ones.

@IamAlta

This comment has been minimized.

Copy link

IamAlta commented Oct 5, 2018

Is there an estimated time of launch for this project?
Bots are getting out the word that our forms are open.
This page is blank.
https://www.ampproject.org/docs/reference/components/amp-recaptcha-input

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Oct 5, 2018

Hello!

Currently we have no "set date" estimate, but I can let you know on what's been happening at a high level:

So the component is definitely making its way along! We've had a few PRs make it into Master, e.g #17971 . Which makes significant progress on the component 😄 However, after working with the recaptcha team, we had to find a solution for supporting both Cannonical (https://example.com) and Cache (https://example-com.cdn.ampproject.org) domains for all AMP Caches. And thankfully we did! So currently I have been working on a module to handle getting the cache subdomain (example-com) inside of an AMP extension, that way we can move forward on this and get the component finished up.

After this is all code complete, we are going to put it into experimental, that way pages can start to be built, and test out the component, so we can then get feedback from developers on anything we might have missed, and then we can send it out to production.

Hope that helps! Let me know if I can help with anything else! Definitely still working on this and is one of my main focuses right now on the project.

@IamAlta

This comment has been minimized.

Copy link

IamAlta commented Oct 6, 2018

Hi Aaron @torch2424,
Thank you for the quick reply. You guys are the best!

The number of spam and indecent submissions are increasing on our form indicating that word is out that our form has no captcha.

QUESTION 1:
So, would this work?
Add a random image with the recaptcha characters to the form input.
Have visitors enter the chars into a text input.
Submit the form with submit-success and submit-error.
If the recaptcha doesn't match, then send a submit-error back.

QUESTION 2:
Will the visitor have a second chance to enter the form with the recaptcha
or will the program have to reload the page for them?

QUESTION 3:
Normally, the form loads a random image upon page _reload.
Will the recaptcha image reload with a new one when the visitor is sent back with the submit-error?
If not, how do you recommend that the image be reloaded, preferably without refreshing the page (for smoothness)?

Thank you!

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Oct 8, 2018

You are welcome! Sorry for the slower reply this time around, had a busy weekend 😄

QUESTION 1:
So, would this work?
Add a random image with the recaptcha characters to the form input.
Have visitors enter the chars into a text input.
Submit the form with submit-success and submit-error.
If the recaptcha doesn't match, then send a submit-error back.

By "recaptcha characters", are you referring to the older recaptcha that had you solve a challenge by reading modified text, and then entering the text? Also, are you asking if this would work as a temporary solution? If yes to both, I am not entirely sure, as someone could just as easily send requests directly to your server, without going through your AMP page as a normal user, thus bypassing the process. Especially in the case that there is a single image.

QUESTION 2:
Will the visitor have a second chance to enter the form with the recaptcha
or will the program have to reload the page for them?

AMP recaptcha will only support using reCAPTCHA v3, which has no UI or client side challenge associated with it. And will work along side AMP form, so any type of rejection or error you would normally do with an AMP form, should also work when processing the <amp-recaptcha-input> inside of the form. 😄

QUESTION 3:
Normally, the form loads a random image upon page _reload.
Will the recaptcha image reload with a new one when the visitor is sent back with the submit-error?
If not, how do you recommend that the image be reloaded, preferably without refreshing the page (for smoothness)?

See my above response, the newest version of reCAPTCHA has no image associated 😄

Hope this helps, feel free to continue this discussion, and you are welcome. 👍

@IamAlta

This comment has been minimized.

Copy link

IamAlta commented Oct 8, 2018

Hi Aaron @torch2424,

As I understand it, AMP doesn't have reCaptcha ready.

ANSWER TO QUESTION 1.
By "recaptcha characters" ... I have images of the characters to be entered into a text input box.

One image is shown and the visitor enters the chars into a text input and they eventually submit the form.

The action xhr URL on the form decodes which characters are correct and proceeds if they are ok.
I was trying to send back a message to display depending on whether the captcha chars matched.
But amp-mustache doesn't work. (action-xhr, amp-mustache per https://ampbyexample.com/components/amp-form/, "Form Submission with Page Update" but the returned json is not displayed in the mustaches. (I have a request for help about that).

ANSWER TO QUESTIONS 2 and 3.
I think the form would have to _reload with a new image unless the amp-img url can be used in a mustache, then json can display a new amp-img (and the json/mustaches work)?

I am uncertain if that would work, but anyway, the visitor would be instructed to refresh the page.
Their inputs other than captcha can be saved in a session variable to load when the page refreshes.

Does this make sense?

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Oct 9, 2018

@IamAlta

Hello!

As I understand it, AMP doesn't have reCaptcha ready.

Yes you are correct, Currently, AMP does not have reCAPTCHA support, though we are working on it 😄

Now, regarding your Answers to my answers, I think what you are trying to do is implement your own reCAPTCHA v2 as a temporary solution until <amp-recaptcha-input> is ready ? Personally, I cannot guarantee any solution will work as a replacement to reCAPTCHA, as I am unfamiliar with how all of it works internally.

My apologies if I am having trouble understanding. 😃

@IamAlta

This comment has been minimized.

Copy link

IamAlta commented Oct 9, 2018

@torch2424,
Almost.
Not reCAPTCHA at all.
Our own simple one to stop the spammers until AMP recaptcha is completed.

I think what I outlined will work but the json/mustache isn't behaving for a return message. I'll wait for that response on another issue.

You've been great - stay that way!

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Oct 9, 2018

Glad I can help! We are working to get amp-recaptcha-input out as soon as we can. Will definitely let you know once it hits experimental 😄

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Jan 18, 2019

Hello!

So a quick update on anyone following this, here is a quick status update:

Let me start by saying, In my opinion, this still needs a couple weeks before experimenting with this in your development environment, due to our release cycles.

So as of now, as far as I know, this is now available in PROD under an experiment. Meaning you can now use this for development, by doing AMP.toggleExperiment('amp-recaptcha-input'), but will not work for your end users. And, here are some Gotchas:

  1. Only the reference documentation is done. We are currently working on our new AMP homepage (amp.dev), and thus it is kind of / sort of blocking us on releasing new AMP By Example, examples. Currently, we have to write two versions for each, which I could do, but there are other things that need to also be done for recaptcha, so I'm hoping that gets released to lower the amount of overall work. If you are REALLY excited to try this out (as am I 😄 ), I opened a PR for the local dev with a full end-to-end example. But I closed per some offline discussions, and other amp.dev stuff. This is not an official example, and is more for someone interested.

  2. There are some Bugs that were fixed after this hit PROD under the experiment. And these bugs won't be in PROD under the experiment for a little while. This one about NonXHR GET requests. This one after our security review.

  3. Validator changes were only recently added, thus they may/may not be in PROD under the experiment.

  4. We are still working on an integration test.

I've had some people reach out saying that they got this working on their dev environment for their sites, and tested it working. There should be a checkbox to enable AMP support for your reCAPTCHA sites, though I also heard it was not visible yet, so your mileage may vary with that.

And most of all, anyone who plans to try this it, please please please leave some feedback for this experiment on this issue. The more feedback we get on the extension, the sooner we can get it out to your end users as we will feel more confident on making the extension publicly available.

Thank you everyone for your patience, and I will give another status update once we figure out the example and things, and we are certain everything is available in PROD under the experiment.

Thank you!

EDIT: Spoke with the recaptcha team, there was a miscommunication of when the checkbox for AMP should be enabled. Was told this should be available in the next few days. 😄

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Jan 23, 2019

Confirmed the checkbox is enabled. Please see the post above, and be aware of the bugs mentioned. Should be good for testing <amp-recaptcha-input> as an experiment. Feedback is greatly appreciated! 😄 🎉

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Jan 24, 2019

So, another update, found out there is an SSL Error with our recaptcha iframe. Will write up a fix for that, and then let everyone know when this is 100% ready for feedback and testing 😄

Thank you!

@torch2424

This comment has been minimized.

Copy link
Member

torch2424 commented Feb 21, 2019

Hello!

So the SSL Error should now all be fixed up, and all functionality that is required for amp-recaptcha-input should now be fixed/working in our PROD rollout of the extension! 😄 🎉

Now all we need is AMP community feedback!

You can now use this for development, by doing AMP.toggleExperiment('amp-recaptcha-input'), but amp-recaptcha-input will not currently work for your end users. Meaning we'd love it if you could play around with this in your non-production environments and/or demos and things. And there should now be a checkbox on your recaptcha admin dashboard to "Allow this key to work with AMP pages". Which should enable your reCAPTCHA sitekey to be used on AMP pages using the extension.

We currently have reference documentation, and the Amp By Example should be coming soon, so in the meantime I made a quick example using Glitch:

And again, anyone who plans to try this it, please please please leave some feedback for this experiment on this issue. The more feedback we get on the extension, the sooner we can get it out to your end users as we will feel more confident on making the extension publicly available.

Sorry the back and forth on the comments I made above about how this may be ready for development purposes 🙃. But now it definitely is! Thank you everyone for you patience! Super excited that we are close to bringing this into your AMP pages! 😄 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.