Google AMP amp-bind-recaptcha
The amp-bind allows elements to change the response to user inputs via data binding and simple JSON-like expressions and recaptcha element creates a recaptcha input using just amp-bind.
Required Scripts: Importing amp-bind so that the recaptcha can have many states.
HTML
< script async custom-element = "amp-bind" src = "https://cdn.ampproject.org/v0/amp-bind-0.1.js" > </ script > |
Importing amp-form so that the recaptcha input can be used to verify user input.
HTML
< script async custom-element = "amp-form" src = "https://cdn.ampproject.org/v0/amp-form-0.1.js" > </ script > |
Using amp-state to define different states to be used in the recaptcha equation.
HTML
< amp-state id = "captcha" > < script type = "application/json" > { "state1": { "result": "9", "condition": "+", "captchaCorrect": "5" }, "state2": { "result": "4", "condition": "-", "captchaCorrect": "8" }, "state3": { "result": "8", "condition": "*", "captchaCorrect": "2" } } </ script > </ amp-state > |
Example: Recaptcha requires users to provide the correct input using the [pattern] requirement. The [pattern] updates dynamically as the state changes.
For the recaptcha to work on first pass, the input is disabled until amp-bind variable is set. Upon refresh the ‘state’ is updated to provide a new equation.
HTML
<!doctype html> < html amp> < head > < title >Google AMP amp-bind-recaptcha</ title > < meta charset = "utf-8" > < script async src = "https://cdn.ampproject.org/v0.js" > </ script > < link rel = "canonical" href = "https://amp.dev/documentation/examples/components/amp-bind-recaptcha/index.html" > < meta name = "viewport" content = "width=device-width,minimum-scale=1,initial-scale=1" > <!-- 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 > < style amp-boilerplate> body { -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both; -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both; animation: -amp-start 8s steps(1, end) 0s 1 normal both } @-webkit-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-moz-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-ms-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @-o-keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } @keyframes -amp-start { from { visibility: hidden } to { visibility: visible } } </ style > < noscript > < style amp-boilerplate> body { -webkit-animation: none; -moz-animation: none; -ms-animation: none; animation: none } </ style > </ noscript > </ head > < body style = "text-align: center;" > < h1 style = "color:green" > w3wiki </ h1 > < header > Type text in the TextBox and Verify captcha. < br >If you don't know the captcha answer then < br >you can refresh it for new recaptcha </ header > <!-- The `amp-state` defines three different states --> < amp-state id = "captcha" > < script type = "application/json" > { "state1": { "result": "9", "condition": "+", "captchaCorrect": "5" }, "state2": { "result": "3", "condition": "-", "captchaCorrect": "7" }, "state3": { "result": "12", "condition": "*", "captchaCorrect": "3" } } </ script > </ amp-state > < form action = "https://www.w3wiki.net.com/" method = "get" target = "_top" > < input name = "s" placeholder = "Type Your Name ..." 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 ="captcha[state].condition">+</ span > < span >4</ span > < span >=</ span > < span ="captcha[state].result">10</ span > < span on = "tap:AMP.setState({state: (state == 'state1' ? 'state2' : state == 'state2' ? 'state3': 'state1')})" role = "button" tabindex = "0" > < 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" > </ span > </ form > </ body > </ html > |
Output: