amp-bind-recaptcha

简介

此示例展示了如何仅使用 amp-bind 创建 reCAPTCHA 输入。

导入 amp-bind，以便 reCAPTCHA 可以有多种状态

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

reCAPTCHA 输入用于验证 amp-form 的用户

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

实现

下面的 amp-state 定义了 reCAPTCHA 方程可能处于的三种不同状态。

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

表单

reCAPTCHA 强制用户使用 [pattern] 要求提供正确的输入。 [pattern] 会随着状态的更改动态更新。为了使 reCAPTCHA 首次通过，请禁用输入，直到设置了 amp-bind 'state' 变量（即 [disabled]="!state"）。作为另一种解决方法，您可以设置默认模式（不带括号），并使 [pattern] 在用户刷新条件时更新。刷新后，'state' 会更新以提供新的方程式。

<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"></span>
    <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">
</form>

需要进一步解释吗？

如果本页上的解释未能涵盖您的所有问题，请随时联系其他 AMP 用户，讨论您的具体用例。

转到 Stack Overflow

一个未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您能成为我们开源社区的持续参与者，但我们也欢迎您为自己特别感兴趣的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @elisameyer