reCAPTCHA invisibile

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

Per richiamare il reCAPTCHA invisibile puoi:

Consulta Configurazioni per scoprire come personalizzare il reCAPTCHA invisibile. Ad esempio, potresti voler specificare la lingua o la posizione del badge.

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

Associa automaticamente la sfida a un pulsante

Il metodo più semplice per utilizzare il widget reCAPTCHA invisibile nella pagina è includere la risorsa JavaScript necessaria e aggiungere alcuni attributi al pulsante HTML. Gli attributi necessari sono il nome della classe "g-recaptcha", la chiave del 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 in modo programmatico o richiamala.

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

Richiamare 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 richiamando 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 viene eseguito il callback, puoi chiamare il metodo grecaptcha.render dall'API JavaScript.

Configurazione

Parametri delle risorse JavaScript (api.js)

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

Attributi del tag g-recaptcha e parametri grecaptcha.render

Attributo tag g-recaptcha Parametro grecaptcha.render Valore Predefinito Descrizione
chiave-sito-dati chiave sito La tua chiave del sito.
badge-dati badge in basso a destra in basso a sinistra in linea in basso a destra Campo facoltativo. Riposiziona il badge reCAPTCHA. "inline" consente di posizionarlo con CSS.
data-size dimensioni invisibile Campo facoltativo. Utilizzato per creare un widget invisibile associato a un div ed eseguito in modo programmatico.
indice-tabulazione indice tabulazione 0 Campo facoltativo. Il tabindex della sfida. Se altri elementi della pagina utilizzano il valore Tabindex, questo deve essere impostato per facilitare la navigazione dell'utente.
richiamata-dati callback Campo facoltativo. Il nome della funzione di callback, eseguita quando l'utente invia una risposta corretta. Il token g-recaptcha-response viene trasmesso al tuo callback.
callback-scaduto-dati richiamata-scaduta Campo facoltativo. Il nome della funzione di callback, eseguita quando la risposta reCAPTCHA scade e l'utente deve verificare di nuovo.
dati-errore-chiamata-back callback di errore Campo facoltativo. Il nome della funzione di callback, eseguita quando reCAPTCHA rileva un errore (in genere la connettività di rete) e non può continuare finché la connettività non viene ripristinata. Se specifichi una funzione qui, è tua responsabilità informare l'utente che deve riprovare.
isolato false Campo facoltativo. Per consentire ai proprietari di plug-in di non interferire con le installazioni reCAPTCHA esistenti su una pagina. Se il valore è true, questa istanza reCAPTCHA farà parte di uno spazio ID separato.

API JavaScript

Metodo Descrizione
grecaptcha.render(
container,
parametri,
eredita
) 		Esegue il rendering del contenitore 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 contenitore (stringa) o l'elemento DOM stesso.
parameters
Un oggetto che contiene parametri come coppie chiave=valore, ad esempio {"sitekey": "your_site_key", "theme": "light"}. Consulta i parametri grecaptcha.render.
eredita
Utilizza gli attributi data-* esistenti nell'elemento se il parametro corrispondente non è specificato. I parametri hanno la precedenza sugli attributi.
grecaptcha.execute(
opt_widget_id
) 		Richiama in modo programmatico il controllo reCAPTCHA. Utilizzato se il reCAPTCHA invisibile si trova su un div anziché su un pulsante.
opt_widget_id
ID widget facoltativo; se non specificato, viene utilizzato 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 utilizzato 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 utilizzato 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>