AMP

Thank you!

  • websites

amp-bind-recaptcha

Introduction

This example shows how to create recaptcha input using just amp-bind.

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>

Implementation

The amp-state below defines three different states that the recaptcha equation could be.

<amp-state id="captcha">
  <script type="application/json">
    {
       "state1": {
             "result": "10",
             "condition": "+",
             "captchaCorrect": "6"

       },
       "state2": {
             "result": "2",
             "condition": "-",
             "captchaCorrect": "6"
       },
       "state3": {
             "result": "8",
             "condition": "*",
             "captchaCorrect": "2"
       }
     }
  </script>
</amp-state>

Form

Recaptcha forces users to provide the correct input using the [pattern] requirement. The [pattern] updates dynamically as the state changes. In order for the recaptcha to work on first pass, disable the input until the amp-bind 'state' variable is set (i.e. [disabled]="!state"). As another workaround, you could set a default pattern (without brackets) and have the [pattern] update as user refreshes the conditional. Upon refresh the 'state' is updated to provide a new equation.

+ 4 = 10
<formaction="https://www.google.com/"method="get"target="_top"><inputname="s"placeholder="Type Anything"type="text"on="input-debounced:AMP.setState({state: 'state1'})"required><input[disabled]="!state"disabledtype="text"name[pattern]="captcha[state].captchaCorrect"title="AMP recaptcha input"required><span[text]="captcha[state].condition">+</span><span>4</span><span>=</span><span[text]="captcha[state].result">10</span><spanon="tap:AMP.setState({state: (state == 'state1' ? 'state2' : state == 'state2' ? 'state3': 'state1')})"role="button"tabindex="0"><amp-imgsrc="https://fonts.gstatic.com/s/i/materialicons/autorenew/v4/24px.svg"width="24"height="24"></amp-img><inputtype="submit"value="Submit"></span></form></body></html>
さらに説明が必要ですか?

このページの説明でご質問のすべてを解消できない場合は、あなたの実際の使用事例について他の AMP ユーザーに問い合わせて話し合ってください。

Stack Overflow にアクセスする
説明されていない機能ですか?

AMP プロジェクトでは皆さんの参加と貢献を強くお勧めしています!当社はオープンソースコミュニティに継続的にご参加いただくことを希望しますが、特に熱心に取り組んでいる問題があれば1回限りの貢献でも歓迎します。

GitHub でサンプルを編集する