reCAPTCHA invisibile

In questa pagina viene spiegato come attivare e personalizzare il reCAPTCHA invisibile sulla tua pagina web.

Per richiamare il reCAPTCHA invisibile, puoi:

Per scoprire come personalizzare il reCAPTCHA invisibile, consulta Configurazioni. Ad esempio, potresti voler specificare la lingua o la località del badge.

Fai riferimento a Verifica della risposta dell'utente per verificare se l'utente ha risolto correttamente il CAPTCHA.

Associa automaticamente la sfida a un pulsante

Il metodo più semplice per utilizzare il widget reCAPTCHA invisibile sulla tua pagina è includere la risorsa JavaScript necessaria e aggiungere alcuni attributi al pulsante HTML. Gli attributi necessari sono il nome di una classe "g-recaptcha", la chiave di sito nell'attributo data-sitekey e il nome di un callback JavaScript per gestire il completamento del captcha nell'attributo data-callback.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

Lo script deve essere caricato utilizzando il protocollo HTTPS e può essere incluso da qualsiasi punto della pagina senza limitazioni.

Associa la verifica a un pulsante o richiamala in modo programmatico.

Il differimento dell'associazione può essere ottenuto specificando la funzione di callback onload e aggiungendo parametri alla risorsa JavaScript. Funziona come la normale verifica reCAPTCHA.

Richiamo la sfida in modo programmatico.

È possibile richiamare la verifica reCAPTCHA in modo programmatico eseguendo il rendering della verifica in un div con un attributo data-size="invisible" e chiamando in modo programmatico l'esecuzione.

  1. Crea un div con data-size="invisible".

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. Chiama grecaptcha.execute da un metodo JavaScript.

    grecaptcha.execute();

    Quando il callback viene eseguito, puoi chiamare il metodo grecaptcha.render dall'API JavaScript.

Configurazione

Parametri risorsa JavaScript (api.js)

Parametro Valore Descrizione
caricamento (Facoltativo) Il nome della funzione di callback da eseguire dopo il caricamento di tutte le dipendenze.
eseguire il rendering explicit
onload		 (Facoltativo) Indica se eseguire il rendering del widget in modo esplicito. Il valore predefinito è onload, che mostrerà il widget nel primo tag g-recaptcha trovato.
hl Visualizza i codici lingua (Facoltativo) Forza il rendering del widget in una lingua specifica. Rileva automaticamente la lingua dell'utente, se non specificata.

Attributi tag g-recaptcha e parametri grecaptcha.render

Attributo tag g-recaptcha Parametro grecaptcha.render Valore Predefinito Descrizione
data-sitekey chiave sito La chiave del sito.
badge dati badge in basso a destra in basso a sinistra in linea in basso a destra (Facoltativo) Riposiziona il badge reCAPTCHA. "inline" consente di posizionarlo con CSS.
dimensione-dati dimensioni invisibile (Facoltativo) Utilizzato per creare un widget invisibile associato a un div ed eseguito in modo programmatico.
data-tabindex indice tab 0 (Facoltativo) Il tabindex della sfida. Se altri elementi della pagina utilizzano tabindex, deve essere impostato per facilitare la navigazione dell'utente.
data-callback callback (Facoltativo) Il nome della tua funzione di callback, eseguita quando l'utente invia una risposta positiva. Il token g-recaptcha-response viene passato al callback.
data-expired-callback expired-callback (Facoltativo) Il nome della funzione di callback, eseguita quando la risposta reCAPTCHA scade e l'utente deve verificare di nuovo.
data-error-callback callback di errore (Facoltativo) Il nome della funzione di callback, eseguita quando reCAPTCHA riscontra un errore (di solito la connettività di rete) e non può continuare fino a quando la connettività non viene ripristinata. Se specifichi una funzione qui, devi informare l'utente che deve riprovare.
isolato falso (Facoltativo) Per consentire ai proprietari di plug-in di non interferire con le installazioni reCAPTCHA esistenti su una pagina. Se impostato su true, questa istanza reCAPTCHA farà parte di uno spazio ID separato.

API JavaScript

Metodo Descrizione
grecaptcha.render(
container,
parametri,
eredita
) 		Visualizza il container come widget reCAPTCHA e restituisce l'ID del widget appena creato.
container
L'elemento HTML per il rendering del widget reCAPTCHA. Specifica l'ID del container (stringa) o l'elemento DOM stesso.
parametri
Un oggetto che contiene parametri come coppie chiave=valore, ad esempio {"sitekey": "your_site_key", "theme": "light"}. Vedi i parametri grecaptcha.render.
eredita
Utilizza gli attributi data-* esistenti per l'elemento se il parametro corrispondente non è specificato. I parametri hanno la precedenza sugli attributi.
grecaptcha.execute(
opt_widget_id
) 		Richiamare in modo programmatico il controllo reCAPTCHA. Utilizzato se il reCAPTCHA invisibile si trova su un div anziché un pulsante.
opt_widget_id
ID widget facoltativo; se non specificato, viene usato per impostazione predefinita il primo widget creato.
grecaptcha.reset(
opt_widget_id
) 		Reimposta il widget reCAPTCHA.
opt_widget_id
ID widget facoltativo; se non specificato, viene usato per impostazione predefinita il primo widget creato.
grecaptcha.getResponse(
opt_widget_id
) 		Recupera la risposta per il widget reCAPTCHA.
opt_widget_id
ID widget facoltativo; se non specificato, viene usato per impostazione predefinita il primo widget creato.

Esempi

Rendering esplicito dopo un callback onload

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Richiamo della verifica reCAPTCHA invisibile dopo la convalida lato client.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>