Google AMP amp-bind-recaptcha
Amp-bind позволяет элементам изменять ответ на вводимые пользователем данные с помощью привязки данных и простых JSON-подобных выражений, а элемент recaptcha создает ввод recaptcha, используя только amp-bind.
Required Scripts: Importing amp-bind so that the recaptcha can have many states.
HTML
< script async custom-element = "amp-bind" src = </ script > |
Импорт amp-form, чтобы можно было использовать ввод рекапчи для проверки ввода пользователя.
HTML
< script async custom-element = "amp-form" src = </ 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 > |
Пример: Recaptcha требует, чтобы пользователи вводили правильный ввод, используя требование [шаблон]. [Шаблон] обновляется динамически при изменении состояния.
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 = </ 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 > |
Выход: