amp-recaptcha-input

Introduction

The amp-recaptcha-input component appends a reCAPTCHA v3 token to AMP form submissions. amp-recaptcha-input does this by creating an iframe to load the reCAPTCHA v3 api script using the provided site key, and calling grecaptcha.execute with the provided site key and action.

Setup

Import the amp-recaptcha-input component, on an AMP Page using AMP Form

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

Basic usage

POST Form request, that responds with the resolved recaptcha items. See the reference documentation for a walkthrough on the corresponding grecaptcha calls.

<form id="amp-recaptcha-input-form" method="POST" action-xhr="https://amp.dev/documentation/examples/components/amp-recaptcha-input/api/recaptcha" target="_top">
  <fieldset>
    <label>
      <span>Search for</span>
      <input type="search" name="term" required>
    </label>
    <input name="submit-button" type="submit" value="Search">
    <amp-recaptcha-input layout="nodisplay" name="recaptcha_token" data-sitekey="6LfcQ7IUAAAAAIv1KcgqyExGK0v8dLJtvV_Q6xD-" data-action="recaptcha_example">
    </amp-recaptcha-input>
  </fieldset>

  <div class="loading-message">Loading...</div>

  <div submit-success>
    <template type="amp-mustache">
      <h1>You searched for: {{term}}</h1>
      <div><b>Score:</b> {{score}}</div>
      <div><b>Recaptcha token:</b> {{recaptcha_token}}</div>
      <div><b>Action:</b> {{action}}</div>
    </template>
  </div>

  <div submit-error>
    <template type="amp-mustache">
      <h1>Error! Please check the JS Console in your dev tools.</h1>
      <p>{{message}}</p>
    </template>
  </div>
</form>

Perlu penjelasan lebih lanjut?

Jika penjelasan pada halaman ini tidak menjawab semua pertanyaan Anda, silakan hubungi pengguna AMP lainnya untuk mendiskusikan contoh penggunaan Anda yang spesifik.

Kunjungi Stack Overflow

Fitur yang tidak dijelaskan?

Proyek AMP sangat menganjurkan partisipasi dan kontribusi Anda! Kami berharap Anda akan terus ambil bagian dalam komunitas sumber terbuka kami, tetapi kami juga menerima kontribusi satu kali untuk topik tertentu yang Anda minati.

Edit sampel di GitHub