Installa chiavi di controllo (verifica con casella di controllo) sui siti web

In questa pagina viene spiegato come installare una chiave di controllo con la verifica tramite casella di controllo Non sono un robot sul tuo sito web. A seconda di come hai configurato l'opzione di sicurezza del test durante la creazione della chiave della casella di controllo, reCAPTCHA Enterprise potrebbe richiedere all'utente finale di risolvere un test CAPTCHA prima di generare un token valido.

Prima di iniziare

Scegli il metodo migliore per configurare reCAPTCHA Enterprise nel tuo ambiente e completa la configurazione.
Crea una chiave di controllo. In alternativa, puoi copiare l'ID di una chiave di casella di controllo esistente eseguendo uno dei seguenti passaggi:
- Per copiare l'ID di una chiave di casella di controllo esistente dalla console Google Cloud, procedi nel seguente modo:
  1. Vai alla pagina reCAPTCHA Enterprise.
    
    Vai a reCAPTCHA Enterprise
  2. Nell'elenco delle chiavi reCAPTCHA, tieni il puntatore del mouse sull'ID chiave che vuoi copiare, quindi fai clic su .
- Per copiare l'ID di una chiave di casella di controllo esistente utilizzando l'API REST, usa il metodo projects.keys.list.
- Per copiare l'ID di una chiave di casella di controllo esistente utilizzando gcloud CLI, utilizza il comando gcloud recaptcha keys list.

Rendering del widget reCAPTCHA sul frontend

Per visualizzare il widget reCAPTCHA sulla tua pagina web, utilizza uno dei seguenti metodi:

Con questo metodo, puoi eseguire il rendering del widget su qualsiasi oggetto (ad esempio div o span) con la classe g-recaptcha.

Nella pagina web, includi la risorsa JavaScript necessaria e un elemento HTML con la classe g-recaptcha.

Nell'elemento con la classe g-recaptcha, includi anche l'attributo data-sitekey e impostalo in modo che corrisponda alla tua chiave di casella di controllo.

Per specificare un'azione, includi l'attributo data-action e impostalo con un nome di azione. Per ulteriori indicazioni, consulta Azioni.

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

Se vuoi specificare una lingua, utilizza l'attributo hl=LANG nello script. Ad esempio, per utilizzare il francese, specifica quanto segue: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Per scoprire di più sulle lingue supportate, consulta la pagina relativa ai codici lingua per reCAPTCHA Enterprise.

L'esempio seguente è uno snippet di codice campione:

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

Con questo metodo, puoi eseguire il rendering del widget tramite uno script JavaScript esistente utilizzando il metodo grecaptcha.enterprise.render(). Utilizza questo metodo per evitare race condition o se vuoi mostrare il widget in base alla logica JavaScript esistente.

Per assicurarti che non esistano condizioni di gara per il rendering esplicito del widget, esamina le seguenti considerazioni:

Ordina prima gli script con la funzione di callback e poi con l'API reCAPTCHA Enterprise.
Utilizza i parametri async e defer nei tag script.

Per visualizzare il widget in modo esplicito, procedi nel seguente modo:

Per posticipare il rendering del widget:
1. Specifica la tua funzione di callback onload prima che l'API reCAPTCHA Enterprise e altre dipendenze vengano caricate.
```
 <script type="text/javascript">
 var onloadCallback = function() {
    alert("grecaptcha is ready!");
 };
 </script>
```
2. Una volta eseguita la funzione di callback, chiama il metodo grecaptcha.enterprise.render() con i seguenti parametri dall'API JavaScript.
  - container: l'elemento HTML per il rendering del widget reCAPTCHA. Specifica l'ID del contenitore (stringa) o l'elemento DOM stesso.
  - parameters: un oggetto contenente parametri sotto forma di coppie chiave-valore, ad esempio {"sitekey": " KEY_ID", "theme": "light"}.
  - action: specifica il nome dell'azione associato all'elemento protetto.
    
    Importante: l'azione specificata viene restituita come parte della valutazione. Devi verificare che l'azione nella risposta JSON della valutazione corrisponda all'azione prevista specificata durante la creazione di una valutazione. Ad esempio, un'azione di accesso dovrebbe essere restituita nella pagina di accesso. Un'eventuale mancata corrispondenza indica che un malintenzionato sta cercando di falsificare le azioni.
```
grecaptcha.enterprise.render('html_element', {
   'sitekey' : ' KEY_ID',
   'action': 'LOGIN',
 });
```
Per eseguire il rendering del widget, inserisci la risorsa JavaScript. Imposta onload sul nome della funzione di callback onload e includi render=explicit.

Se vuoi specificare una lingua, utilizza l'attributo hl=LANG nello script. Ad esempio, per utilizzare il francese, specifica quanto segue: <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>. Per scoprire di più sulle lingue supportate, consulta la pagina relativa ai codici lingua per reCAPTCHA Enterprise.
```
 <script src="https://www.google.com/recaptcha/enterprise.js?onload=onload_Callback_function&render=explicit"
    async defer>
 </script>
```

Esempio 1

Il seguente esempio di codice mostra il 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.enterprise.render('html_element', {
          'sitekey' : ' KEY_ID',
        });
      };
    </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/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Esempio 2

Il seguente esempio di codice mostra il rendering esplicito di 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.enterprise.render('example1', {
          'sitekey' : 'KEY_ID',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.enterprise.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.enterprise.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/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Passaggi successivi

Per valutare il token di risposta a reCAPTCHA, crea una valutazione.