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.

<form action="https://www.google.com/"
  method="get"
  target="_top">
  <input name="s"
    placeholder="Type Anything"
    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 [text]="captcha[state].condition">+</span>
  <span>4</span>
  <span>=</span>
  <span [text]="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>

需要进一步说明？

如果此页面的说明未能涵盖您的所有问题，欢迎与其他 AMP 用户取得联系，讨论您的具体用例。

前往 Stack Overflow

一项无法解释的功能？

AMP 项目强烈鼓励您参与其中并作出贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您对热衷问题做出单次贡献。

在 GitHub 上编辑实例

Written by @elisameyer

{{#initial}}重要组件{{/initial}}{{^initial}}组件{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}热门文章{{/initial}}{{^initial}}结果{{/initial}}

{{title}}

;(

出了点问题...

¯\_(ツ)_/¯

无搜索结果。

amp-bind-recaptcha

Introduction

Implementation

Form