reCAPTCHA v2

Questa pagina spiega come visualizzare e personalizzare il widget reCAPTCHA v2 nella tua pagina web.

Per visualizzare il widget, puoi:

Consulta la sezione Configurazioni per scoprire come personalizzare il tuo widget. Ad esempio, potresti voler specificare la lingua o il tema del widget.

Consulta la sezione Verifica della risposta dell'utente per controllare se l'utente ha risolto il CAPTCHA.

Visualizza automaticamente il widget reCAPTCHA

Il metodo più semplice per eseguire il rendering del widget reCAPTCHA nella pagina è includere la risorsa JavaScript necessaria e un tag g-recaptcha. Il tag g-recaptcha è un elemento DIV con il nome della classe g-recaptcha e la chiave del sito nell'attributo data-sitekey:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

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

Eseguire il rendering esplicito del widget reCAPTCHA

Il differimento del rendering può essere ottenuto specificando la funzione di callback onload e aggiungendo parametri alla risorsa JavaScript.

  1. Specifica la funzione di callback onload. Questa funzione verrà chiamata dopo il caricamento di tutte le dipendenze.

    <script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

  2. Inserisci la risorsa JavaScript impostando il parametro onload sul nome della funzione di callback onload e il parametro render su explicit.

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

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

Configurazione

Parametri di risorse JavaScript (api.js)

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

Attributi del tag g-recaptcha e parametri grecaptcha.render

Attributo tag g-recaptcha Parametro grecaptcha.render Valore Predefinito Descrizione
data-site-key chiave del sito La tua chiave di sito.
tema-dati tema luce scura luce Campo facoltativo. Il tema a colori del widget.
dimensione-dati dimensioni normale compatto normale Campo facoltativo. Le dimensioni del widget.
scheda-indice-dati indice 0 Campo facoltativo. L'indice della scheda del widget e della sfida. Se altri elementi nella pagina utilizzano il valore indice indice, devono essere impostati per semplificare la navigazione dell'utente.
callback-dati callback Campo facoltativo. Il nome della funzione di callback, eseguito quando l'utente invia una risposta corretta. Il token g-recaptcha-response viene trasmesso al callback.
data-expiration-callback richiamata scaduta Campo facoltativo. Il nome della funzione di callback, eseguito quando scade la risposta reCAPTCHA e l'utente deve ripetere la verifica.
data-error-callback richiama-errore Campo facoltativo. Il nome della funzione di callback, eseguito quando reCAPTCHA rileva 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, è tua responsabilità informare l'utente che deve riprovare.

API JavaScript

Metodo Descrizione
grecaptcha.rendering(
contenitore,
Parametri
) 		Visualizza il container come widget reCAPTCHA e restituisce l'ID del widget appena creato.
container
L'elemento HTML per eseguire il rendering del widget reCAPTCHA. Specifica l'ID del contenitore (stringa) o l'elemento DOM stesso.
parametri
Un oggetto contenente parametri come coppie chiave=valore, ad esempio {"sitekey": "your_site_key", "theme": "light"}. Vedi i parametri grecaptcha.render.
grecaptcha.reset(
)
id_widget_opt
) 		Reimposta il widget reCAPTCHA.
opt_widget_id
ID widget facoltativo, il valore predefinito è il primo widget creato se non specificato.
grecaptcha.getResponse(
id_widget_opt
) 		Restituisce la risposta per il widget reCAPTCHA.
opt_widget_id
ID widget facoltativo, il valore predefinito è il primo widget creato se non specificato.

Esempi

Rendering esplicito dopo un callback onload

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

Rendering esplicito per più widget

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>