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.
< script async custom-element = "amp-bind" src =
</ script >
|
Importing amp-form so that the recaptcha input can be used to verify user input.
< script async custom-element = "amp-form" src =
</ script >
|
Using amp-state to define different states to be used in the recaptcha equation.
< 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.
<!doctype html> < html amp>
< head >
< title >Google AMP amp-bind-recaptcha</ title >
< meta charset = "utf-8" >
< script async src =
</ script >
< link rel = "canonical" href =
< 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 =
</ script >
<!-- Recaptcha input used to verify user
for `amp-form` -->
< script async custom-element =
"amp-form" src =
</ 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" >
GeeksforGeeks
</ 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 >
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 =
width = "24" height = "24" >
</ amp-img >
< input type = "submit" value = "Submit" >
</ span >
</ form >
</ body >
</ html >
|
Output: