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>

Daha fazla açıklamaya mı ihtiyacınız var?

Bu sayfadaki açıklamalar tüm sorularınıza yanıt vermiyorsa, özgün kullanım durumunuzu tartışmak üzere diğer AMP kullanıcılarına ulaşmaktan çekinmeyin.

Stack Overflow'a git

Açıklanmayan bir özellik mi var?

AMP projesi, katılımınızı ve katkılarınızı güçlü bir şekilde teşvik ediyor! Açık kaynak topluluğumuzun devamlı bir katılımcısı olacağınızı umuyoruz ancak özel olarak ilgilendiğiniz konularla ilgili tek seferlik katkıları da memnuniyetle karşılıyoruz.

Örneği GitHub'ta düzenle