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

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

Prima di iniziare

  1. Prepara l'ambiente per reCAPTCHA.

  2. Crea una chiave della casella di controllo.

    In alternativa, puoi copiare l'ID di una chiave della casella di controllo esistente eseguendo uno dei seguenti passaggi:

    • Per copiare l'ID di una chiave esistente dalla Google Cloud console, procedere come segue:

      1. Vai alla pagina reCAPTCHA.

        Vai a reCAPTCHA

      2. Seleziona la scheda Chiavi.
      3. Nell'elenco delle chiavi reCAPTCHA, trova la chiave che vuoi copiare e fai clic su .
    • Per copiare l'ID di una chiave esistente utilizzando l'API REST, utilizza il metodo projects.keys.list.
    • Per copiare l'ID di una chiave esistente utilizzando gcloud CLI, utilizza il comando gcloud recaptcha keys list.

Esegui il rendering del widget reCAPTCHA nel frontend

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

Esegui automaticamente il rendering del widget

Con questo metodo, puoi eseguire il rendering del widget su qualsiasi oggetto (ad esempio un div o uno 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 uguale alla chiave della casella di controllo.

Per specificare un'azione, includi l'attributo data-action e impostalo sul nome di un'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 restrizioni.

Per impostazione predefinita, reCAPTCHA utilizza la lingua del browser. Se vuoi specificare una lingua diversa, 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 le lingue supportate, consulta Codici lingua per reCAPTCHA.

Il seguente esempio è 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>

Esegui esplicitamente il rendering 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 competizione o se vuoi mostrare il widget in base alla logica JavaScript esistente.

Per assicurarti che non ci siano condizioni di competizione durante il rendering esplicito del widget, esamina le seguenti considerazioni:

  • Ordina gli script con la funzione di callback, quindi l' API reCAPTCHA.
  • Utilizza i parametri async e defer nei script tag.

Per eseguire il rendering esplicito del widget:

  1. Per posticipare il rendering del widget:

    1. Specifica la funzione di callback onload prima che vengano caricate l'API reCAPTCHA e altre dipendenze.

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

    2. Dopo l'esecuzione della funzione di callback, chiama il grecaptcha.enterprise.render() metodo con i seguenti parametri dall' API JavaScript.

      • container: l'elemento HTML su cui 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": "KEY_ID", "theme": "light"}.

      • action: specifica il nome dell'azione associata all'elemento protetto.

      grecaptcha.enterprise.render('html_element', {
   'sitekey' : 'KEY_ID',
   'action': 'LOGIN',
 });

  2. Per eseguire il rendering del widget, inserisci la risorsa JavaScript. Imposta onload sul nome della funzione di callback onload e includi render=explicit.

    Per impostazione predefinita, reCAPTCHA utilizza la lingua del browser. Se vuoi specificare una lingua diversa, 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 le lingue supportate, consulta Codici lingua per reCAPTCHA.

     <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 una 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',
          'action': 'LOGIN',
        });
      };
    </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',
          'action': 'action1',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {
          'sitekey' : 'KEY_ID',
          'action': 'action2',
        });
        grecaptcha.enterprise.render('example3', {
          'sitekey' : 'KEY_ID',
          'action': 'action3',
          '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