Installazione di chiavi di siti con caselle di controllo (verifica tramite casella di controllo) sui siti web

In questa pagina viene spiegato come installare la chiave del sito di una casella di controllo con la verifica della casella di controllo I'm not a robot sul tuo sito web. A seconda di come hai configurato l'opzione di verifica di sicurezza quando crei la chiave del sito della casella di controllo, reCAPTCHA Enterprise potrebbe richiedere all'utente finale di risolvere una verifica CAPTCHA prima di generare un token valido.

Prima di iniziare

  1. Scegli il metodo migliore per la configurazione di reCAPTCHA Enterprise nel tuo ambiente e completa la configurazione.

  2. Crea una chiave del sito di caselle di controllo. In alternativa, puoi copiare l'ID di una chiave del sito esistente come casella di controllo eseguendo uno dei seguenti passaggi:

    • Per copiare l'ID di una chiave del sito della casella di controllo esistente da Google Cloud Console, 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 del sito esistente della casella di controllo utilizzando l'API REST, utilizza il metodo projects.keys.list.

    • Per copiare l'ID di una chiave del sito della casella di controllo esistente utilizzando l'interfaccia a riga di comando gcloud, utilizza il comando gcloud recaptcha keys list.

Rendering del widget reCAPTCHA sul frontend

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

Visualizza automaticamente il widget

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 chiave del sito della casella di controllo.

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

L'esempio seguente è uno snippet di codice di esempio:

    <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="site_key"></div>
          <br/>
          <input type="submit" value="Submit">
        </form>
      </body>
    </html>

Rendering esplicito del widget

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 condizioni di corsa o se vuoi mostrare il widget in base alla logica JavaScript esistente.

Per assicurarti che non esistano condizioni di corsa durante il rendering esplicito del widget, consulta 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 eseguire il rendering del widget in modo esplicito:

  1. Per rimandare il rendering del widget:

    1. Specifica la funzione di callback onload prima di caricare l'API reCAPTCHA Enterprise e altre dipendenze.

       <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 eseguire il rendering del widget reCAPTCHA. Specifica l'ID del contenitore (stringa) o l'elemento DOM stesso.

      • parameters: un oggetto contenente parametri come coppie chiave-valore, ad esempio {"sitekey": "your_site_key", "theme": "light"}.

      grecaptcha.enterprise.render('html_element', {
         'sitekey' : ' site_key',
       });
      
  2. Per visualizzare il widget, inserisci la risorsa JavaScript. Imposta onload sul nome della funzione di callback di caricamento e includi render=explicit.

     <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 un 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' : ' 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/enterprise.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Esempio 2

Il seguente esempio di codice mostra un 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' : 'site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'site_key',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : '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.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