amp-bind-recaptcha

Introduction

This example shows how to create recaptcha input using just amp-bind.

Import amp-bind so recaptcha can have multiple states

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Recaptcha input used to verify user for amp-form

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

Implementation

The amp-state below defines three different states that the recaptcha equation could be.

<amp-state id="captcha">
  <script type="application/json">
    {
       "state1": {
             "result": "10",
             "condition": "+",
             "captchaCorrect": "6"

       },
       "state2": {
             "result": "2",
             "condition": "-",
             "captchaCorrect": "6"
       },
       "state3": {
             "result": "8",
             "condition": "*",
             "captchaCorrect": "2"
       }
     }
  </script>
</amp-state>

Form

Recaptcha forces users to provide the correct input using the [pattern] requirement. The [pattern] updates dynamically as the state changes. In order for the recaptcha to work on first pass, disable the input until the amp-bind 'state' variable is set (i.e. [disabled]="!state"). As another workaround, you could set a default pattern (without brackets) and have the [pattern] update as user refreshes the conditional. Upon refresh the 'state' is updated to provide a new equation.

<form action="https://www.google.com/" method="get" target="_top">
  <input name="s" placeholder="Type Anything" type="text" on="input-debounced:AMP.setState({state: 'state1'})" required>
    <input [disabled]="!state" disabled type="text" name [pattern]="captcha[state].captchaCorrect" title="AMP recaptcha input" required>
    <span [text]="captcha[state].condition">+</span>
    <span>4</span>
    <span>=</span>
    <span [text]="captcha[state].result">10</span>
    <span on="tap:AMP.setState({state: (state == 'state1' ? 'state2' : state == 'state2' ? 'state3': 'state1')})" role="button" tabindex="0"></span>
    <amp-img src="https://fonts.gstatic.com/s/i/materialicons/autorenew/v4/24px.svg" width="24" height="24"></amp-img>
  <input type="submit" value="Submit">
</form>

Need further explanation?

If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.

Go to Stack Overflow

An unexplained feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Edit sample on GitHub

Written by @elisameyer