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 (不含括號)，並讓 `[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 撰寫