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>

Precisa de explicações mais detalhadas?

Se as explicações nesta página não respondem a todas as suas perguntas, entre em contato com outros usuários de AMP para discutir seu caso de uso específico.

Ir para o Stack Overflow

Falta explicar algum recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Editar amostra no GitHub

Written by @elisameyer