reCAPTCHA invisibile

Questa pagina spiega come attivare e personalizzare il reCAPTCHA invisibile sulla tua pagina web.

Per richiamare reCAPTCHA invisibile, puoi:

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

Consulta la sezione Verificare la risposta dell'utente per verificare se l'utente ha risolto correttamente il CAPTCHA.

Associare 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.

Puoi posticipare il binding specificando la funzione di callback onload e aggiungendo parametri alla risorsa JavaScript. Funziona come la normale verifica reCAPTCHA.

Richiama la sfida in modo programmatico.

L'invocazione della verifica reCAPTCHA tramite programmazione può essere eseguita eseguendo il rendering della verifica in un elemento div con un attributo data-size="invisible" e chiamando programmatically execute.

  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
onload (Facoltativo) Il nome della funzione di callback da eseguire dopo il caricamento di tutte le dipendenze.
render explicit
onload		 (Facoltativo) Indica se eseguire il rendering del widget in modo esplicito. Il valore predefinito è onload, che visualizzerà 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 del tag g-recaptcha e parametri grecaptcha.render

Attributo tag g-recaptcha Parametro grecaptcha.render Valore Predefinito Descrizione
data-sitekey sitekey La chiave del sito.
data-badge badge bottomright bottomleft in linea bottomright (Facoltativo) Riposiziona il badge reCAPTCHA. "inline" consente di posizionarlo con CSS.
data-size dimensioni invisibile (Facoltativo) Utilizzato per creare un widget invisibile associato a un elemento div ed eseguito in modo programmatico.
data-tabindex tabindex 0 (Facoltativo) Il tabindex della sfida. Se altri elementi della pagina utilizzano tabindex, questo deve essere impostato per semplificare la navigazione dell'utente.
data-callback callback (Facoltativo) Il nome della funzione di callback, eseguita quando l'utente invia una risposta corretta. 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 error-callback (Facoltativo) Il nome della funzione di callback, eseguita quando reCAPTCHA rileva un errore (di solito di 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 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
) 		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 container (stringa) o l'elemento DOM stesso.
parameters
  Un oggetto contenente i parametri sotto forma di coppie chiave=valore, ad esempio {"sitekey": "your_site_key", "theme": "light"}. Vedi i parametri grecaptcha.render.
inherit
  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
) 		Richiamare in modo programmatico il controllo reCAPTCHA. Da utilizzare se reCAPTCHA invisibile si trova in un div anziché in un pulsante.
opt_widget_id
  ID widget facoltativo, se non specificato viene utilizzato il primo widget creato.
grecaptcha.reset(
opt_widget_id
) 		Reimposta il widget reCAPTCHA.
opt_widget_id
  ID widget facoltativo, se non specificato viene utilizzato 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 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>