Installer des clés de case à cocher (test par case à cocher) sur des sites Web
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Cette page explique comment installer une clé de case à cocher avec le test de case à cocher Je ne suis pas un robot sur votre site Web.
Selon la façon dont vous avez configuré l'option de sécurité de test lors de la création de la clé de case à cocher, reCAPTCHA peut demander à l'utilisateur final d'effectuer un test CAPTCHA avant de générer un jeton valide.
Dans l'élément avec la classe g-recaptcha, incluez également l'attribut data-sitekey et définissez-le sur votre clé de case à cocher.
Pour spécifier une action, incluez l'attribut data-action et attribuez-lui un nom d'action. Pour obtenir plus de conseils, consultez la section Actions.
Le script doit être chargé via le protocole HTTPS et peut être intégré à partir de n'importe quel point de la page sans restriction.
reCAPTCHA utilise la langue du navigateur par défaut. Si vous souhaitez spécifier une autre langue, utilisez l'attribut hl=LANG dans votre script.
Par exemple, pour utiliser le français, spécifiez ce qui suit : <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>.
Pour en savoir plus sur les langues acceptées, consultez les codes de langue pour reCAPTCHA.
L'exemple suivant est un extrait d'exemple de code :
Cette méthode vous permet d'afficher le widget via un script JavaScript existant à l'aide de la méthode grecaptcha.enterprise.render().
Utilisez cette méthode pour éviter les conditions de concurrence ou si vous souhaitez afficher le widget basé sur la logique JavaScript existante.
Pour vous assurer qu'il n'y a pas de conditions de concurrence lors de l'affichage explicite du widget, consultez les points suivants :
Commandez d'abord vos scripts avec la fonction de rappel, puis avec l'API reCAPTCHA.
Utilisez les paramètres async et defer dans les tags script.
Pour afficher explicitement le widget, procédez comme suit :
Pour différer l'affichage du widget, procédez comme suit :
Spécifiez votre fonction de rappel onload avant le chargement de l'API reCAPTCHA et des autres dépendances.
<script type="text/javascript">
var onloadCallback = function() {
alert("grecaptcha is ready!");
};
</script>
Une fois la fonction de rappel exécutée, appelez la méthode grecaptcha.enterprise.render() avec les paramètres suivants depuis l'API JavaScript.
container : élément HTML permettant d'afficher le widget reCAPTCHA.
Indiquez l'ID du conteneur (chaîne) ou l'élément DOM proprement dit.
parameters : objet contenant des paramètres sous forme de paires clé/valeur, par exemple : {"sitekey": "KEY_ID", "theme": "light"}.
action: spécifiez le nom de l'action associée à l'élément protégé.
Pour afficher le widget, insérez la ressource JavaScript.
Définissez onload sur le nom de votre fonction de rappel onload, et incluez render=explicit.
reCAPTCHA utilise la langue du navigateur par défaut. Si vous souhaitez spécifier une autre langue, utilisez l'attribut hl=LANG dans votre script.
Par exemple, pour utiliser le français, spécifiez ce qui suit : <script src="https://www.google.com/recaptcha/enterprise.js?hl=fr"></script>.
Pour en savoir plus sur les langues acceptées, consultez les codes de langue pour reCAPTCHA.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/09/04 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Difficile à comprendre","hardToUnderstand","thumb-down"],["Informations ou exemple de code incorrects","incorrectInformationOrSampleCode","thumb-down"],["Il n'y a pas l'information/les exemples dont j'ai besoin","missingTheInformationSamplesINeed","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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)."]]