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

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

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>

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