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

filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-bind" src=
</script>

chevron_right


Importing amp-form so that the recaptcha input can be used to verify user input.



HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-form" src=
</script>

chevron_right


Using amp-state to define different states to be used in the recaptcha equation.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>
      
    <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=
                width="24" height="24">
            </amp-img>
            <input type="submit" value="Submit">
        </span>
    </form>
</body>
  
</html>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.