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>

Ti servono altre spiegazioni?

Se le spiegazioni riportate in questa pagina non rispondono a tutte le tue domande, non esitare a contattare altri utenti AMP per discutere il tuo caso d'uso specifico.

Vai a Stack Overflow

Ci sono funzioni non descritte?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Modifica esempio in GitHub