Installa chiavi di casella di controllo (verifica tramite casella di controllo) sui siti web
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Questa pagina spiega come installare una chiave della casella 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 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.
Nell'elemento con la classe g-recaptcha, includi anche l'attributo data-sitekey
e impostalo in modo che corrisponda 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 limitazioni.
reCAPTCHA utilizza la lingua del browser per impostazione predefinita. Se vuoi specificare un'altra 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 informazioni sulle lingue supportate, consulta
i codici lingua per reCAPTCHA.
Il seguente esempio è uno snippet di codice di esempio:
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 gara o se vuoi mostrare il widget in base alla logica JavaScript esistente.
Per assicurarti che non ci siano condizioni di gara durante il rendering esplicito del widget, esamina le seguenti considerazioni:
Ordina gli script prima con la funzione di callback e poi con l'API reCAPTCHA.
Utilizza i parametri async e defer nei
tag script.
Per eseguire il rendering del widget in modo esplicito:
Per posticipare il rendering del widget:
Specifica la funzione di callback onload prima del caricamento dell'API reCAPTCHA e di altre dipendenze.
<script type="text/javascript">
var onloadCallback = function() {
alert("grecaptcha is ready!");
};
</script>
Dopo l'esecuzione della funzione di callback, chiama il metodo grecaptcha.enterprise.render() con i seguenti parametri dell'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 i parametri sotto forma di coppie chiave-valore, ad esempio {"sitekey": "KEY_ID", "theme": "light"}.
action: specifica il nome dell'azione associata all'elemento protetto.
Per eseguire il rendering del widget, inserisci la
risorsa JavaScript.
Imposta onload sul nome della funzione di callback onload e includi render=explicit.
reCAPTCHA utilizza la lingua del browser per impostazione predefinita. Se vuoi specificare un'altra 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 informazioni sulle lingue supportate, consulta
i codici lingua per reCAPTCHA.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Difficile da capire","hardToUnderstand","thumb-down"],["Informazioni o codice di esempio errati","incorrectInformationOrSampleCode","thumb-down"],["Mancano le informazioni o gli esempi di cui ho bisogno","missingTheInformationSamplesINeed","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2025-09-04 UTC."],[],[],null,["# Install checkbox keys (checkbox challenge) on websites\n\nThis page explains how to install a checkbox key with the\n**I'm not a robot** checkbox challenge on your website.\nDepending on how you have configured the challenge security option when creating\nthe checkbox key, reCAPTCHA might require the end user to solve\na CAPTCHA challenge before generating a valid token.\n\nBefore you begin\n----------------\n\n1.\n\n [Prepare your environment for reCAPTCHA](/recaptcha/docs/prepare-environment).\n\n2. [Create a checkbox key](/recaptcha/docs/create-key-website).\n\n Alternatively, you can copy the ID of an existing checkbox key by\n performing one of the following steps:\n\n\n - To copy the ID of an existing key from the **Google Cloud console**,\n do the following:\n\n 1. Go to the **reCAPTCHA** page.\n\n [Go to reCAPTCHA](https://console.cloud.google.com/security/recaptcha)\n 2. In the reCAPTCHA keys list, hold the pointer over the key you want to copy, and then click content_copy .\n - To copy the ID of an existing key using the **REST API** , use the [projects.keys.list](/recaptcha/docs/reference/rest/v1/projects.keys/list) method.\n - To copy the ID of an existing key using the **gcloud CLI** , use the [gcloud recaptcha keys list](/sdk/gcloud/reference/recaptcha/keys/list) command.\n\n \u003cbr /\u003e\n\n\u003cbr /\u003e\n\nRender the reCAPTCHA widget on the frontend\n-------------------------------------------\n\nTo display the reCAPTCHA widget on your web page, use one of the following\nmethods: \n\n#### Automatically render the widget\n\nWith this method, you can render the widget on any object (such as a `div` or\na `span`) with the `g-recaptcha` class.\n\nOn your web page, include the necessary [JavaScript resource](/recaptcha/docs/api-ref-checkbox-keys#resource_js)\nand an HTML element with the [`g-recaptcha`](/recaptcha/docs/api-ref-checkbox-keys#attributes_parameters) class.\n\nIn the element with the `g-recaptcha` class, also include the `data-sitekey`\nattribute and set it equal to your checkbox key.\n\nTo specify an action, include the `data-action` attribute and set it to an\naction name. For more guidance, see [Actions](/recaptcha/docs/actions-website).\n| **Important:** The action that you specify is returned as part of the assessment. You must verify that the action in the JSON response of the assessment matches the expected action that you specify when creating an assessment. For example, a login action should be returned on your login page. If there is a mismatch, it indicates that an attacker is attempting to falsify actions.\n\nThe script must be loaded using the HTTPS protocol and can be included from any\npoint on the page without restriction.\n\nreCAPTCHA uses the browser's language by default. If you want to\nspecify a different language, use the `hl=`\u003cvar translate=\"no\"\u003eLANG\u003c/var\u003e attribute\nin your script.\nFor example, to use French, specify the following:\n`\u003cscript src=\"https://www.google.com/recaptcha/enterprise.js?hl=fr\"\u003e\u003c/script\u003e`.\nTo learn about the supported languages, see\n[language codes for reCAPTCHA](/recaptcha/docs/language).\n\nThe following example is a snippet of sample code: \n\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003ereCAPTCHA demo: Simple page\u003c/title\u003e\n \u003cscript src=\"https://www.google.com/recaptcha/enterprise.js\" async defer\u003e\u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cform action=\"?\" method=\"POST\"\u003e\n \u003cdiv class=\"g-recaptcha\" data-sitekey=\"\u003cvar translate=\"no\"\u003eKEY_ID\u003c/var\u003e\" data-action=\"LOGIN\"\u003e\u003c/div\u003e\n \u003cbr/\u003e\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\n \u003c/form\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\n\u003cbr /\u003e\n\n#### Explicitly render the widget\n\n\u003cbr /\u003e\n\n\nWith this method, you can render the widget through an existing JavaScript\nscript using the `grecaptcha.enterprise.render()` method.\nUse this method to avoid race conditions or if you want to show the widget based\non the existing JavaScript logic.\n\nTo ensure there are no race conditions when rendering the widget explicitly,\nreview the following considerations:\n\n- Order your scripts with the callback function first, and then the reCAPTCHA API.\n- Use the `async` and `defer` parameters in the `script` tags.\n\nTo render the widget explicitly, follow these steps:\n\n1. To defer rendering of the widget, do the following:\n\n 1. Specify your `onload` callback function before the\n reCAPTCHA API and other dependencies are loaded.\n\n \u003cscript type=\"text/javascript\"\u003e\n var onloadCallback = function() {\n alert(\"grecaptcha is ready!\");\n };\n \u003c/script\u003e\n\n 2. After your callback function is executed, call the\n `grecaptcha.enterprise.render()` method with the following parameters\n from the\n [JavaScript API](/recaptcha/docs/api-ref-checkbox-keys#javascript_api).\n\n - **container**: The HTML element to render the reCAPTCHA widget.\n Specify either the ID of the container (string) or the DOM element\n itself.\n\n - **parameters** : An object containing parameters as key-value pairs,\n for example, {\"sitekey\": \"\u003cvar translate=\"no\"\u003eKEY_ID\u003c/var\u003e\", \"theme\": \"light\"}.\n\n - **action**: Specify the action name associated with the protected\n element.\n\n | **Important:** The action that you specify is returned as part of the assessment. You must verify that the action in the JSON response of the assessment matches the expected action that you specify when creating an assessment. For example, a login action should be returned on your login page. If there is a mismatch, it indicates that an attacker is attempting to falsify actions.\n\n grecaptcha.enterprise.render('html_element', {\n 'sitekey' : '\u003cvar translate=\"no\"\u003eKEY_ID\u003c/var\u003e',\n 'action': 'LOGIN',\n });\n\n2. To render the widget, insert the\n [JavaScript resource](/recaptcha/docs/api-ref-checkbox-keys#resource_js).\n Set `onload` to the name of your onload callback function, and\n include `render=explicit`.\n\n reCAPTCHA uses the browser's language by default. If you want to\n specify a different language, use the `hl=`\u003cvar translate=\"no\"\u003eLANG\u003c/var\u003e attribute\n in your script.\n For example, to use French, specify the following:\n `\u003cscript src=\"https://www.google.com/recaptcha/enterprise.js?hl=fr\"\u003e\u003c/script\u003e`.\n To learn about the supported languages, see\n [language codes for reCAPTCHA](/recaptcha/docs/language). \n\n \u003cscript src=\"https://www.google.com/recaptcha/enterprise.js?onload=\u003cvar translate=\"no\"\u003eonload_Callback_function\u003c/var\u003e&render=explicit\"\n async defer\u003e\n \u003c/script\u003e\n\n**Example 1**\n\nThe following code sample shows explicit rendering after an `onload` callback: \n\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003ereCAPTCHA demo: Explicit render after an onload callback\u003c/title\u003e\n \u003cscript type=\"text/javascript\"\u003e\n var onloadCallback = function() {\n grecaptcha.enterprise.render('html_element', {\n 'sitekey' : '\u003cvar translate=\"no\"\u003eKEY_ID\u003c/var\u003e',\n });\n };\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003cform action=\"?\" method=\"POST\"\u003e\n \u003cdiv id=\"html_element\"\u003e\u003c/div\u003e\n \u003cbr\u003e\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\n \u003c/form\u003e\n \u003cscript src=\"https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit\"\n async defer\u003e\n \u003c/script\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\n**Example 2**\n\nThe following code sample shows explicit rendering of multiple widgets: \n\n \u003chtml\u003e\n \u003chead\u003e\n \u003ctitle\u003ereCAPTCHA demo: Explicit render for multiple widgets\u003c/title\u003e\n \u003cscript type=\"text/javascript\"\u003e\n var verifyCallback = function(response) {\n alert(response);\n };\n var widgetId1;\n var widgetId2;\n var onloadCallback = function() {\n // Renders the HTML element with id 'example1' as a reCAPTCHA widget.\n // The id of the reCAPTCHA widget is assigned to 'widgetId1'.\n widgetId1 = grecaptcha.enterprise.render('example1', {\n 'sitekey' : '\u003cvar translate=\"no\"\u003eKEY_ID\u003c/var\u003e',\n 'theme' : 'light'\n });\n widgetId2 = grecaptcha.enterprise.render(document.getElementById('example2'), {\n 'sitekey' : '\u003cvar translate=\"no\"\u003eKEY_ID\u003c/var\u003e',\n });\n grecaptcha.enterprise.render('example3', {\n 'sitekey' : '\u003cvar translate=\"no\"\u003eKEY_ID\u003c/var\u003e',\n 'callback' : verifyCallback,\n 'theme' : 'dark'\n });\n };\n \u003c/script\u003e\n \u003c/head\u003e\n \u003cbody\u003e\n \u003c!-- The g-recaptcha-response string displays in an alert message upon submit. --\u003e\n \u003cform action=\"javascript:alert(grecaptcha.enterprise.getResponse(widgetId1));\"\u003e\n \u003cdiv id=\"example1\"\u003e\u003c/div\u003e\n \u003cbr\u003e\n \u003cinput type=\"submit\" value=\"getResponse\"\u003e\n \u003c/form\u003e\n \u003cbr\u003e\n \u003c!-- Resets reCAPTCHA widgetId2 upon submit. --\u003e\n \u003cform action=\"javascript:grecaptcha.enterprise.reset(widgetId2);\"\u003e\n \u003cdiv id=\"example2\"\u003e\u003c/div\u003e\n \u003cbr\u003e\n \u003cinput type=\"submit\" value=\"reset\"\u003e\n \u003c/form\u003e\n \u003cbr\u003e\n \u003c!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. --\u003e\n \u003cform action=\"?\" method=\"POST\"\u003e\n \u003cdiv id=\"example3\"\u003e\u003c/div\u003e\n \u003cbr\u003e\n \u003cinput type=\"submit\" value=\"Submit\"\u003e\n \u003c/form\u003e\n \u003cscript src=\"https://www.google.com/recaptcha/enterprise.js?onload=onloadCallback&render=explicit\"\n async defer\u003e\n \u003c/script\u003e\n \u003c/body\u003e\n \u003c/html\u003e\n\n\u003cbr /\u003e\n\n\n\u003cbr /\u003e\n\nWhat's next\n-----------\n\n- To assess the reCAPTCHA response token, [create an assessment](/recaptcha/docs/create-assessment-website)."]]