Google AMP amp-bind-recaptcha

Опубликовано: 12 Апреля, 2022

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=
"https://cdn.ampproject.org/v0/amp-bind-0.1.js">
</script>

Импорт amp-form, чтобы можно было использовать ввод рекапчи для проверки ввода пользователя.

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>

Пример: 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=
        "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>

Выход:

РЕКОМЕНДУЕМЫЕ СТАТЬИ