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>
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