Questa pagina è stata tradotta dall'API Cloud Translation.

reCAPTCHA v2

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

Per visualizzare il widget, puoi:

Eseguire automaticamente il rendering del widget oppure
Eseguire il rendering esplicito del widget

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

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

Eseguire automaticamente il rendering del widget reCAPTCHA

Il metodo più semplice per eseguire il rendering del widget reCAPTCHA sulla tua pagina è includere la risorsa JavaScript necessaria e un tag g-recaptcha. Il tag g-recaptcha è un elemento DIV con nome di classe g-recaptcha e la chiave di sito nella 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 tramite il protocollo HTTPS e può essere incluso da qualsiasi puntare alla pagina senza restrizioni.

Eseguire il rendering esplicito del widget reCAPTCHA

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

Specifica la funzione di callback onload. Questa funzione viene chiamata quando tutte le dipendenze sono state caricate.
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
Inserisci la risorsa JavaScript, impostando il parametro onload sul nome della funzione di callback onload e del 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.
La funzione di callback onload deve essere definito prima del caricamento dell'API reCAPTCHA. Per garantire che non ci siano gruppi etnici condizioni:
- Ordina gli script prima con il callback e poi con reCAPTCHA
- Utilizza i parametri async e defer nei tag "script"

Configurazione

Parametri risorsa JavaScript (api.js)

Parametro	Valore	Descrizione
`onload`		(Facoltativo) Il nome della funzione di callback da eseguire una volta caricate tutte le dipendenze.
`render`	explicit onload	(Facoltativo) Se eseguire il rendering del widget in modo esplicito. Il valore predefinito è onload, che visualizzerà il widget nel primo tag `g-recaptcha` trovato.
`hl`	Consulta 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-theme`	`theme`	`dark light`	`light`	(Facoltativo) Il tema a colori del widget.
`data-size`	`size`	`compact normal`	`normal`	(Facoltativo) Le dimensioni del widget.
`data-tabindex`	`tabindex`		0	(Facoltativo) Il tabindex del widget e 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 tuo callback.
`data-expired-callback`	`expired-callback`			(Facoltativo) Il nome della funzione di callback, eseguita quando la risposta reCAPTCHA scade e l'utente deve eseguire nuovamente la verifica.
`data-error-callback`	`error-callback`			(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.

API JavaScript

Metodo	Descrizione
`grecaptcha.render`( container, Parametri )	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.
`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 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>