Skip to content
Related Articles

Related Articles

Google AMP amp-bind-recaptcha
  • Last Updated : 16 Oct, 2020

 

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




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

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



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>

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




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

Output:

My Personal Notes arrow_drop_up
Recommended Articles
Page :