El amp-bind permite que los elementos cambien la respuesta a las entradas del usuario a través del enlace de datos y expresiones simples similares a JSON y el elemento recaptcha crea una entrada de recaptcha usando solo amp-bind.
Scripts requeridos: importar amp-bind para que el recaptcha pueda tener muchos estados.
HTML
<script async custom-element="amp-bind" src= "https://cdn.ampproject.org/v0/amp-bind-0.1.js"> </script>
Importando amp-form para que la entrada de recaptcha se pueda usar para verificar la entrada del usuario.
HTML
<script async custom-element="amp-form" src= "https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>
Uso de amp-state para definir diferentes estados que se utilizarán en la ecuación de recaptcha.
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>
Ejemplo: Recaptcha requiere que los usuarios proporcionen la entrada correcta utilizando el requisito [patrón]. El [patrón] se actualiza dinámicamente a medida que cambia el estado.
Para que el recaptcha funcione en el primer paso, la entrada está deshabilitada hasta que se establezca la variable amp-bind. Al actualizar, el ‘estado’ se actualiza para proporcionar una nueva ecuación.
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">
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>
<form action="https://www.geeksforgeeks.org.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>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA