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.