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>

¿Necesita explicaciones más detalladas?

Si las explicaciones que se encuentran en esta página no responden todas sus preguntas, no dude en comunicarse con otros usuarios de AMP para discutir el caso de uso exacto.

Ir a Stack Overflow

¿Faltó que explicáramos alguna función?

¡El proyecto AMP alienta profundamente su participación y contribuciones! Esperamos que se convierta en un miembro permanente de nuestra comunidad de código abierto, pero también agradecemos las contribuciones esporádicas sobre los temas que le apasionan especialmente.

Editar ejemplo en GitHub