lisotton commented 8 years ago

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 commented 8 years ago

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

rudygalfi commented 7 years ago

@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 commented 7 years ago

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

weeblr commented 7 years ago

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

jasti commented 7 years ago

@weeblr Yup, we are actively looking into this.

nickmoline commented 7 years ago

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.

alanorozco commented 7 years ago

reCAPTCHA component is currently blocked due to issues with rendering inside a 3p iframe. Will update this once we reach a decision on technical issues re: resizing and signals.

@nickmoline Sounds good, but could you provide an example for how a different CAPTCHA provider would work? The challenge with this is designing an API that is general enough but not badly overloaded. Would like to have more info :)

nickmoline commented 7 years ago

a Lot of simpler captchas work by simply generating a one time token which is used both in an image url, audio url and a hidden input field. We could use a JSON endpoint that would return the token something like this:

<form method="post" action-xhr="https://example.com/contact" target="_top">
<!-- normal form fields -->
<amp-captcha src="https://data.com/captcha.json">
   <template type="amp-mustache">
      <input type="hidden" name="captcha-token" value="{{token}}" />
      <amp-img src="{{imageUrl}}" width="100" height="50"></amp-img>
      <input type="text" name="captcha" value="" placeholder="Enter letters from the image above or from the audio file below" />
      <a href="{{audioUrl}}">Audio version of CAPTCHA</a>
   </template>
</amp-captcha>
</form>

the json endpoint can simply return a standard hash of values that can be used in the mustache template

{
  "token": "jkljqwe12351234asfd978!",
  "imageUrl": "https://example.com/captcha/image/jkljqwe12351234asfd978!.png",
  "audioUrl": "https://example.com/captcha/audio/jkljqwe12351234asfd978!.mp3"
}

ntwi commented 7 years ago

Thought I'd throw a vote in for this.

alanorozco commented 7 years ago

@NoahWilcox

If you're talking about the reCAPTCHA component, no more voting should be needed :)

We're actively working on this and you can expect this issue to be updated soon.

machadoug commented 7 years ago

@alanorozco What about support for other captcha providers such as phpcaptcha.org?

The amp-captcha tag suggested by @nickmoline would be nice, however it is missing a way to refresh the captcha image.

nickmoline commented 7 years ago

Just thought I'd drop a little note here for anyone else who likes my proposed situation for a generic captcha other than recaptcha. We ended up experimenting to see if this would work just using the existing <amp-list> inside of an amp-form as opposed to a brand new component, and sure enough it works just fine.

<form method="post" action-xhr="https://example.com/contact" target="_top">
<!-- normal form fields -->
<amp-list src="https://example.com/captcha/captcha.json" width="auto" height="60" template="amp-template-captcha" layout="fixed-height">
   <template type="amp-mustache" id="amp-template-captcha">
      <input type="hidden" name="captcha-token" value="{{token}}" />
      <amp-img src="https://example.com/captcha/image/{{token}}" width="100" height="50"></amp-img>
      <input type="text" name="captcha" value="" placeholder="Enter letters from the image above or from the audio file below" />
      <a href="https://example.com/captcha/audio/{{token}}">Audio version of CAPTCHA</a>
   </template>
</amp-list>
</form>

{
  "token": "jkljqwe12351234asfd978",
}

Note this would have worked fine using my discrete fields from my example above, but in this particular example, since the filename was based on the token, may as well save the extra bytes in the .json transfer :)

@machadoug I would assume in order to give an option to reforce a refresh of the captcha image you could either do something with <amp-live-list> or <amp-bind> to allow for changing the element after the page loads. and perhaps an eventual <amp-captcha> component could support this built in, but it might be possible with <amp-bind> now, would have to experiment.

Also the phpcaptcha.org other captcha shouldn't be too hard to adjust to generate the json necessary would just have to add an additional method to output the amp json

jasti commented 7 years ago

@nickmoline Glad to see this is working without a generic component. Keep us posted.

ampprojectbot commented 6 years ago

This issue hasn't been updated in awhile. @alanorozco Do you have any updates?

twd3 commented 6 years ago

Can we please get this going? I am using iframe so I can have captcha and it sucks.

lswang1618 commented 6 years ago

Work for this is in progress! Current time frame is to have support in April - will update this issue if that changes.

shishirm commented 6 years ago

Hello. Just checking in to see the proposed timeline. Is this still scheduled for release this month? Is there a beta version that we can try out using dev flags or will this be released live once it is ready.

aghassemi commented 6 years ago

@ericlindley-g I don't believe the team that was working on this is still actively doing so, do you know?

ericlindley-g commented 6 years ago

I'm not sure about the status, but I think @rudygalfi might be.

IamAlta commented 6 years ago

@rudygalfi aghassemi @ericlindley-g Can you update the status on a captcha for AMP? Thank you!

rudygalfi commented 6 years ago

We are currently looking to support the latest version of recaptcha (v3) once it's released.

rudygalfi commented 6 years ago

Reassigning to @lannka. It's looking like we'll get started in mid-August.

88kbbq commented 6 years ago

Why not just whitelist www.google.com/recaptcha/api.js and then create <amp-recaptcha> for the v3 script. This seems like you could do this in a couple hours, why wait until August?

lannka commented 6 years ago

@88kbbq we can't just let any non-AMP script run in the AMP window. @torch2424 will take on this work in next sprint. Sorry for the wait.

88kbbq commented 6 years ago

Well, it’s a google script so...

lannka commented 6 years ago

@88kbbq AMP is an open source project, and any scripts running inside AMP window has to be open sourced and visible in AMP repo.

IamAlta commented 6 years ago

@aghassemi @rudygalfi Any chance of expediting this? We're getting numerous spam, some that is obnoxious.

lannka commented 6 years ago

@IamAlta sorry for the wait. It's already planned for this sprint. To set up expectation, we'll be only supporting the latest version of ReCaptcha, which is V3

torch2424 commented 6 years ago

Hello! I'll be the one owning this feature for now, and we discussed the feature at our Design Review. And I also wanted to share our Design Doc. Which will incorporate two parts: AMP Async Inputs and <amp-recaptcha-input>.

It may be useful to review the reCAPTCHA v3 Documentation, as well as the reCAPTCHA Site Verification Documentation to help in reading the following design doc.

Where we currently have a rough initial implementation, though this does not reflect end user use case.

AMP Async Input

Project Goal(s)

To allow for asynchronous tasks to be run before submitting an AMP form.

Proposed Solution

The proposed solution to create a new derived class from BaseElement, named AsyncInputElement. AsyncInputElement should be considered as an AMP element, however with an overridable getValue() function that returns a promise. This will allow AMP form to query for AsyncInputElemens elements using an i-amphtml-asyncinput class query selector, and then use their overridable functions to wait for their value to be resolved and submitted alongside the form.

Proposed / Example Class Outline

`async-input.js`

// Imports

export class AsyncInputElement extends BaseElement {

  /** @override */
  buildCallback() {
    this.classList.add(‘i-amphtml-asyncinput’);
  }

  /**
  * Function to return the input value
  * @returns Promise<*>
  */
  getValue() {}

}

Example Async Input Component

// Imports
export class AmpExampleAsyncInput extends AsyncInputElement {

  ...

  /** @override */
  buildCallback() {
    super.buildCallback();

    ...
  }

  /** @override */
  getValue() {
    ...
  }

  ...
}

High-Level Implementation Walkthrough

Create a new AMP Component.
AMP Component extends AMP.AsyncInputElement instead of AMP.BaseElement
AMP Component overrides the AMP.AsyncInputElement functions, and returns promises for each.
End User submits an AMP Form.
AMP form adds loading state classes to the form.
AMP form scans all child elements, specifically grabbing input elements.
AMP form also scans for child elements, with a special class, i-amphtml-asyncinput.
AMP form finds all Async Input elements, and calls .getValue() and waits for Promises to resolve.
AMP form appends the resolved values to the form.
AMP form submits.
AMP form transitions away from loading state classes, and does a full page reload, or success/error state depending upon usage.

Concerns / Edge Cases

How will this work with AMP form’s existing Async Variable Substitution?

AsyncInput and variable substitution can be executed parallel, and can act as separate entities. We can simply replace the variable substitution async call, with a call to both Async input and variable substitution wrapped in a Promise.all() in the form submission flow.

How should Errors be handled with Async Inputs?

AsyncInput can follow the same error flow as a rejected variable substitution. Currently, on error of variable substitution, the form is simply thrown into the error state, and is not submitted.

Does the form currently have support for AMP components as children?

Yes, see the <amp-selector> component inside of forms.

Should there be an `isReady()` function for the AsyncInput Class?

AsyncInput should not need an isReady() function, as waiting for the readiness of an input can simply be part of the getValue() promise of the AsyncInput component itself.

Task Breakdown

Create a getAsycnInputFields_() function.
- This will query for all async input elements that a child of the form element, using the class i-amphtml-asyncinput. For example: document.querySelectorAll(‘.i-amphtml-asyncinput’)
Check for async input in the submit_ function, using getAsyncInputFields)().
If we have Async Inputs:
- Update the submit_ function so that the form enters the SUBMITTING state if there are async inputs.
- Create a promise that calls the respective getValue() function of the Async Inputs.
- Continue the form submit_() flow.
If we do not have Async Inputs:
- Follow the regular form submit_ flow.
- Write tests for the getAsyncInputFields().
- Write tests for the new submit_() flow.

`<amp-recaptcha-input>` Extension Design

Project Goal(s)

To allow developers to enable reCAPTCHA v3 on their AMP pages. Specifically, in conjunction with the AMP form component.

Proposed Solution

The proposed solution is to create an <amp-recaptcha-input> component. <amp-recaptcha-input> will be an AsyncInputComponent, which is a proposed method of AMP form to wait for asynchronous values on form submission. This component will be a child of AMP <form> elements, and will have the following attributes:

[Optional] name - The name of the input. Used for the request key in form submission where the reCAPTHA token is the value.
sitekey - the reCAPTCHA v3 sitekey that is used in the reCAPTCHA .execute().
action - the reCAPTCHA action that is used in the reCAPTCHA .execute().

Proposed / Example Format

<body>
…

  <form>
  …
   <amp-recaptcha-input name=”recaptcha-request-key” sitekey=”recaptcha-site-key” action=”recaptcha-action”>
  <form>
</body>

API Communication & Data Schemas

In order to communicate between AMP and the reCAPTCHA.js script, there will be a background recaptchaService.js to create a bootstrap iframe to a child document that loads the reCAPTCHA.js script. recaptchaService.js will communicate with the child document using Window.postMessage() calls to each document’s respective window. <amp-recaptcha-input> will register/unregister itself with the recaptchaService.js to handle creating/destroying the iframe. AMP form will communicate with <amp-recaptcha-input> with the proposed AsyncInputComponent.

Form Submission Payload

The form submission payload will follow the proposed AsyncInputComponent, and use the name attribute for the request key of the reCAPTCHA token. If no name attribute is on the element, the reCAPTCHA default of g-recaptcha-response will be used. For example:

{
  …, // Original/input form data here
  my-amp-recaptcha-input-name: “reCAPTCHA_response_token”
}

.postMessage() Data Object Schema

Please see the High-Level AMP Implementation Walkthrough and Window.postMessage() documentation for background.

recaptchaService.js => Child Document

{
  type: string // Name of the type of message, ‘action’
  action: string // Name of the action to dispatch to reCAPTCHA.
}

Child Document => recaptchaService.js

{
  type: string // Name of the type of message, ‘ready’, or ‘token’
  token?: string // reCAPTCHA token returned from reCAPTCHA `.execute()`.
}

reCAPTCHA script .execute() Action Details / Modifications

As mentioned in the reCAPTCHA v3 Beta Documentation, we use the .execute() function exposed by the reCAPTCHA object to get our response key. As suggested by the reCAPTCHA team, we will prefix the action passed to .execute() with amp_. This will help with the risk analysis done by the reCAPTCHA team. It also worth noting that the actions mentioned in the documentation are not enforced, and are more of a suggestion. Thus the user can create custom actions per form and denote them with any string. For example:

<form>
  …
  <amp-recaptcha-input name=”recaptcha-request-key” sitekey=”recaptcha-site-key” action=”recaptcha-action”>
<form>

// Will eventually be run on the child document as…

grecaptcha.execute('reCAPTCHA_site_key', {
  action: ‘amp_recaptcha_action’
}).then(function(token) {
    ...
});

Developer/User Intended Workflow

Developer registers for a reCAPTCHA v3 Site Key and Secret, by following the steps on the reCAPTCHA v3 documentation.
Developer creates an AMP document.
Developer adds a <form> element.
Developer adds an <amp-recaptcha-input> element as a child element of the <form>
Developer adds a name (Optional), sitekey, and action attribute to the <amp-recaptcha-input> element.
Developer adds support for their <form> element to do full page reloads, or page updates per the AMP form AMP By Example.
Developer receives reCAPTCHA token as name attribute on the <amp-recaptcha-input> in their <form>submission request. If the name attribute does not exist, the default key will be the reCAPTCHA default, g-recaptcha-response. Developer can then handle server side per the reCAPTCHA site verification documentation.

High-Level AMP Implementation Walkthrough

recatchaService.js is constructed, and waits for registration from AMP recaptcha components.
recaptchaService.js adds an event listener to its own window for ‘message’ events from .postMessage() calls.
<amp-recaptcha-input> is built, and reaches its layoutCallback().
<amp-recaptcha-input> retrieves the sitekey from its attributes.
<amp-recaptcha-input> registers itself with the recaptchaService.js, with its sitekey.
recaptchaService.js now has a component needing reCAPTCHA support.
recaptchaService.js creates an 1x1 iframe to a child document we control, and passes the sitekey from its registered AMP recaptcha components as a query parameter to the child document.
Child document gets the site key from its query params.
Child document creates a <script> element, with the src set to the recaptcha script URL, and passes along the site key in the recaptcha script query params.
Child document waits for both the script to be loaded, and the recaptcha object to run its ready() function.
recaptchaService.js and child document implement handlers for .postMessage calls, following the .postMessage() Data Object Schema.
Child document adds an event listener to its own window for ‘message’ events from .postMessage() calls. While making sure to filter out any and all .postMessage() calls from the reCAPTCHA script.
Child document uses .postMessage() to the parent window (recaptchaService.js) to inform that it is ready.
recaptchaService.js receives ready event, and flips ready flag.
On submission of an AMP form, AMP form finds child AsyncInputComponent , and calls respective getValue() like method, passing along the sitekey and action attributes from the <amp-recaptcha-input>.
<amp-recaptcha-input> receives the submission event and the action, and creates/returns a promise from the recaptchaService.js. The promise actions are outlined in the remaining steps.
recaptchaService.js does a .postMessage() to child document, passing along the action.
Child document gets message event from recaptchaService.js, and runs reCAPTCHA .execute() passing along the sitekey and action.
After .execute() resolves, .postMessage() the reCAPTCHA token back to recaptchaService.js.
recaptchaService.js receives reCAPTCHA token, and resolves its promise all the way back to AMP form with the reCAPTCHA token.
AMP form appends the reCAPTCHA token to its request following the AsyncInputComponent pattern.

Validation Rules

Please see the Implementation / Validation Edge Cases for reasoning behind the rules

<amp-recaptcha-input> is a child element of a form element.
<amp-recaptcha-input> must have a sitekey attribute.
<amp-recaptcha-input> must have an action attribute.
<amp-recaptcha-input> may optionally have a name attribute.

<form> is allowed to have a <amp-recaptcha-input> element.

Other Concerns / Considered Implementations

Why not use the script directly?

All external JS in AMP is sandboxed in an iframe for security and performance. This is to sandbox scripts as we have more control of the AMP document, and don’t have to be concerned with changes of the reCAPTCHA v3 script itself.

Why not have a forked reCAPTCHA script to handle .postMessage() events itself?

This would require the reCAPTCHA team to commit code into the AMP codebase, and have both teams maintain the script cooperatively. Having a child document handle the post message calls and embedding the script allows the AMP team more control over the component and the bootstrap iframe itself.

Why not use a Friendly Iframe solution?

reCAPTCHA relies on the current domain for domain verification, and generating the score. Friendly iframes set the domain to ‘about:blank’ which causes a domain error on the user side, and does not go away even with disabling all domain verification. Therefore we must use another child document, and communicate with the two using .postMessage().

What about Client Side Verification?

reCAPTCHA v3, and all previous versions of reCAPTCHA, appear to all require server side verification by using a secret, and their API. This makes sense since that any malicious actor could simply make a REST bot and skip the client side portion of this entirely, and spam the endpoint. Therefore, there is no client side verification AMP should have to provide with reCAPTCHA.

Why make a component, why not a service?

Since we are managing iframes of a child document, and site keys. It makes everything much easier to handle the lifecycle of our iframes, and if required, multiple site keys per iframe if we define this all in a component. Also, in order to follow the AsyncInputComponent pattern, this needs to be a component to minimize the amount of implementation.

What about running on page load for the `homepage` action?

There will be a lot of differences between a reCAPTCHA component that is part of a form submission vs. a reCAPTCHA component meant to make its own requests. The naming <amp-recaptcha-input> helps to be explicit as an input element on a form. In later implementations, we can create another <amp-recaptcha-X> component, that is meant to make requests. With this design, it can share the same recaptchaService.js, and share iframes if needed.

Why not abstract this out into a single `<amp-recaptcha>` component?

Having a single <amp-recaptcha> component would be great for things like handling layout and creating the iframe. However, having a single <amp-recaptcha> component makes specifying inputs on a form harder to understand for the user, handling onload events more difficult, and managing multiple sitekeys per form or action difficult as well. This was our initial idea, but decided this would be a slightly easier implementation, but would lock up the design, be less friend with AsyncInputComponent pattern, and hinder onload reCAPTCHA events.

Task Breakdown

Skeleton / outline the files for <amp-recaptcha-input>.
- This include the following:
- 3p Child document for bootstrap iframe
- recaptcha.js background service
- amp-recaptcha-input.js
- amp-recaptcha-input.css
- Documentation for amp-recaptcha-input
- Validator for amp-recaptcha-input
- Owners.yaml
- Tests for amp-recaptcha-input
- Tests for recaptcha.js
- Tests for 3p Child Document
Write implementation for the 3p Child document
- This should grab site keys from query params, and request the recaptcha script.
- Also, this should have handlers for .postMessage back and forth from the parent.
- See the Initial Implementation jsFiddle for more info.
Write implementation for the background recaptcha.js service
- This should talk to the 3p Child Document bootstrap iframe using .postMessage().
- This should also have a registration system for all <amp-recaptcha-x> components.
- When a component registers, create the iframe, and when all components unregisters, destroy the iframe.
- If something requests a token, return promise that gets token and no iframe even though we have no registrants, create the iframe, and then return token.
Write implementation for the <amp-recaptcha-input> component
- This should extend the AsyncInputElement base class
- This should register with the recaptcha.js background service in either buildCallback() or layoutCallback()
- This should unregister with the recaptcha.js background service in unlayoutCallback()
- This should simply make calls to the recaptcha.js background service, using it’s attributes for things like actions.
Write tests for the 3p Child document, the recaptcha.js background service, and <amp-recaptcha-input>.
Get Support from the Conduit team to enforce validations.
Write documentation for the component.
- Get it reviewed by our docs team.
Release component under experimental flag.
Create an AMP By Example page for the component.

IamAlta commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

@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 commented 6 years ago

@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 commented 6 years ago

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 commented 5 years ago

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:

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.
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.
Validator changes were only recently added, thus they may/may not be in PROD under the experiment.
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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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! 😄 🎉

torch2424 commented 5 years ago

Hello Everyone!

<amp-recaptcha-input> is now fully available and can be deployed to AMP pages, as we launched this for AMP Conf 2019 😄 🎉

Here are some resources to get started:

Thank you everyone for your patience! 👍 🙌 Looking forward to y'all trying this out!

cc @lisotton @neluzhin @ValentinBrclz @denis90 @NoahWilcox @xileftenurb @ymkjp @SweetLittleParsley @neos1993 @talmog @ajeetku @weeblr @nebuso @nickmoline @machadoug @twd3 @shishirm @IamAlta @natoinet @jorenham @SeanC-Nimble @joshcp @chigia001 @AOlivar @luisfranco @BaraCoda @doppl3r @heitorfig

uvarovdev commented 5 years ago

Hi! Can you please help me to install ? I've put this code to the form in my index.html file. But i don't understand how to execute captcha, and how to get $_POST['g-recaptcha-response'](like in normal sites) in my form action php file to validate form...

<amp-recaptcha-input layout="nodisplay"
      name="recaptcha_token"
      data-sitekey="6LfcQ7IUAAAAAIv1KcgqyExGK0v8dLJtvV_Q6xD-"
      data-action="recaptcha_example">
    </amp-recaptcha-input>

torch2424 commented 5 years ago

cc @zhouyx Can you help out @McAlex220 ? :smile:

zhouyx commented 5 years ago

Thank you @torch2424 for adding me : )

@McAlex220 I'm happy to help. Here's the docs that can be of help https://github.com/ampproject/amphtml/blob/master/extensions/amp-recaptcha-input/amp-recaptcha-input.md

Also the examples that @torch2424 added

I am traveling and attending conference this week. I'd be happy to help you further debug next week if you still have issue using the component. Thank you!

torch2424 commented 5 years ago

Thank you @zhouyx ! 😄

lannka commented 5 years ago

@Frenchomatic did you find something useful on reCaptcha's site? It should be similar (if not the same) how you integrate reCaptcha on your non-AMP pages.

luisfranco commented 5 years ago

NO - that is the point - there is no explanation of what is needed in term of the php server side code. For example, there is a secret key but what do you do with it? Is it the same as what is needed in a non-AMP page, different or what? Is it something like this perhaps - I am frankly lost because all examples are incomplete. They all talk about the html file but not what needs to happen on the backend.
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response'])) {

    // Build POST request:
    $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
    $recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY';
    $recaptcha_response = $_POST['recaptcha_response'];

    // Make and decode POST request:
    $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);
    $recaptcha = json_decode($recaptcha);

    // Take action based on the score returned:
    if ($recaptcha->score >= 0.5) {
        // Verified - send email
    } else {
        // Not verified - show form error
    }

Hi @Frenchomatic

I see you just pasted an example of backend, what's the part you don't actually get, in v3 you choose what to do depending on the score value, if it meets your criteria, then, // Verified - send email accept the contact lead, else, treat it as spam // Not verified - show form error.

ValentinBrclz commented 5 years ago

@Frenchomatic : This is an issue, not a support group. I recognise that the documentation can be improved but spamming the issue with your personal problem is not going to solve that.

I disliked your comments because I got fed up of it and I'm not the only one. However, I would be happy to help if your personal problem was described completely In an adjacent issue or , even better, if you open an issue to improve the documentation about this topic. You can DM me on Twitter if that is the case.

nainar commented 5 years ago

@Frenchomatic your comments above are violating AMP's Code of Conduct which aim to promote civil discourse on all AMP channels.

Please ensure that all future comments follow the Code of Conduct. Technical critique of features is appreciated - however, personally attacking any of our other members is not.

ampproject / amphtml

Support reCAPTCHA component #2273

AMP Async Input

Project Goal(s)

Proposed Solution

Proposed / Example Class Outline

`async-input.js`

Example Async Input Component

High-Level Implementation Walkthrough

Concerns / Edge Cases

How will this work with AMP form’s existing Async Variable Substitution?

How should Errors be handled with Async Inputs?

Does the form currently have support for AMP components as children?

Should there be an `isReady()` function for the AsyncInput Class?

Task Breakdown

`<amp-recaptcha-input>` Extension Design

Project Goal(s)

Proposed Solution

Proposed / Example Format

API Communication & Data Schemas

Form Submission Payload

.postMessage() Data Object Schema

recaptchaService.js => Child Document

Child Document => recaptchaService.js

reCAPTCHA script .execute() Action Details / Modifications

Developer/User Intended Workflow

High-Level AMP Implementation Walkthrough

Validation Rules

Other Concerns / Considered Implementations

Why not use the script directly?

Why not have a forked reCAPTCHA script to handle .postMessage() events itself?

Why not use a Friendly Iframe solution?

What about Client Side Verification?

Why make a component, why not a service?

What about running on page load for the `homepage` action?

Why not abstract this out into a single `<amp-recaptcha>` component?

Task Breakdown

ampproject / amphtml

Support reCAPTCHA component #2273

AMP Async Input

Project Goal(s)

Proposed Solution

Proposed / Example Class Outline

async-input.js

Example Async Input Component

High-Level Implementation Walkthrough

Concerns / Edge Cases

How will this work with AMP form’s existing Async Variable Substitution?

How should Errors be handled with Async Inputs?

Does the form currently have support for AMP components as children?

Should there be an isReady() function for the AsyncInput Class?

Task Breakdown

<amp-recaptcha-input> Extension Design

Project Goal(s)

Proposed Solution

Proposed / Example Format

API Communication & Data Schemas

Form Submission Payload

.postMessage() Data Object Schema

recaptchaService.js => Child Document

Child Document => recaptchaService.js

reCAPTCHA script .execute() Action Details / Modifications

Developer/User Intended Workflow

High-Level AMP Implementation Walkthrough

Validation Rules

Other Concerns / Considered Implementations

Why not use the script directly?

Why not have a forked reCAPTCHA script to handle .postMessage() events itself?

Why not use a Friendly Iframe solution?

What about Client Side Verification?

Why make a component, why not a service?

What about running on page load for the homepage action?

Why not abstract this out into a single <amp-recaptcha> component?

Task Breakdown

`async-input.js`

Should there be an `isReady()` function for the AsyncInput Class?

`<amp-recaptcha-input>` Extension Design

What about running on page load for the `homepage` action?

Why not abstract this out into a single `<amp-recaptcha>` component?