Installer des clés basées sur des scores sur des sites Web

Cette page explique comment installer une clé basée sur des scores sans sur votre site Web. Avec une clé basée sur des scores, vous pouvez inclure reCAPTCHA sur votre site sans que les utilisateurs soient obligés de saisir une réponse CAPTCHA les défis à relever.

Lorsqu'une clé basée sur les scores est installée, reCAPTCHA envoie une réponse chiffrée, le jeton de réponse reCAPTCHA (également appelé jeton), lorsqu'un utilisateur final déclenche une interaction. Une fois le jeton généré, vous devez créer une évaluation dans un délai de deux minutes afin de recevoir une note pour chaque demande ; Sur la base du score, vous pouvez comprendre le niveau de risque lié aux interactions des utilisateurs et configurer une ou plusieurs réponses appropriées. De plus, le modèle basé sur les scores peut collecter des données télémétriques sur l'activité des bots pour être averti rapidement en cas de nouvelles attaques cibles.

Pour améliorer le modèle de risque de reCAPTCHA, nous vous recommandons d'inclure sur chaque page de votre site, car il aide à comprendre la manière dont les utilisateurs réels et les robots passent d'une page à l'autre et d'une action à l'autre ;

Avant de commencer

  1. Préparez votre environnement pour reCAPTCHA.

  2. Créez une clé basée sur un score.

    Vous pouvez également copier l'ID d'une clé basée sur des scores existante effectuez l'une des opérations suivantes:

    • Pour copier l'ID d'une clé existante à partir de la console Google Cloud, procédez comme suit : effectuer les opérations suivantes:

      1. Accédez à la page reCAPTCHA.

        Accéder à reCAPTCHA

      2. Dans la liste des clés reCAPTCHA, maintenez le pointeur sur la clé que vous souhaitez copier, puis cliquez sur .
    • Pour copier l'ID d'une clé existante à l'aide de l'API REST, utilisez la méthode projects.keys.list.
    • Pour copier l'ID d'une clé existante à l'aide de la gcloud CLI, procédez comme suit : utilisez la commande gcloud recaptcha keys list.

Placez la clé sur votre site Web

reCAPTCHA fonctionne mieux lorsqu'il dispose de contexte sur les interactions sur votre site. reCAPTCHA surveille à la fois les comportements légitimes et abusifs pour en savoir plus sur les interactions sur votre site.

Pour de meilleurs résultats, installez des clés basées sur des scores aux emplacements suivants sur votre site Web :

  • Forms
  • Actions (interactions des utilisateurs)
  • En arrière-plan de toutes les pages Web

Les clés basées sur les scores n'interrompent pas vos utilisateurs. Vous pouvez donc exécuter reCAPTCHA avec des clés basées sur les scores lorsque cela est nécessaire sans affecter la conversion.

Intégrer la clé à l'interface

Nous recommandons d'ajouter la validation reCAPTCHA à un utilisateur toute interaction qui doit être vérifiée. Par exemple, pour vérifier envoyer l'action d'un formulaire, vous devez ajouter reCAPTCHA lors de l'envoi.

En fonction de l'emplacement où vous souhaitez ajouter la validation reCAPTCHA, choisissez l'option appropriée :

Vous trouverez un exemple de chaque option dans le code source site Web de démonstration.

Ajouter une validation à une interaction utilisateur

  1. Pour charger reCAPTCHA sur votre page Web, ajoutez l'API JavaScript à l'aide de la clé basée sur des scores dans l'élément <head></head> de votre page Web.

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    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 langages acceptés, consultez codes de langue pour reCAPTCHA.

    Si vous souhaitez spécifier un emplacement pour le badge, utilisez badge=LOCATION. en tant que paramètre de requête dans le tag de script. Exemple :www.google.com/recaptcha/enterprise.js?sitekey=KEY_ID&badge=bottomleft Par défaut, l'emplacement est défini sur bottomright. Les autres valeurs possibles sont inline et bottomleft.

  2. Pour ajouter la validation reCAPTCHA à un utilisateur : une interaction, procédez comme suit:

    1. Pour vous assurer que grecaptcha.enterprise.execute() s'exécute après le chargement de la bibliothèque reCAPTCHA, utilisez grecaptcha.enterprise.ready().

    2. Appelez grecaptcha.enterprise.execute() à chaque interaction que vous à protéger avec une clé basée sur des scores. Spécifiez un nom nom d'une interaction utilisateur dans le paramètre action. Pour obtenir plus de conseils, consultez la section Actions.

      L'exemple suivant montre comment appeler grecaptcha.enterprise.execute() sur une action de connexion :

      <script>
function onClick(e) {
  e.preventDefault();
  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute('KEY_ID', {action: 'LOGIN'});
    // IMPORTANT: The 'token' that results from execute is an encrypted response sent by
    // reCAPTCHA to the end user's browser.
    // This token must be validated by creating an assessment.
    // See https://cloud.google.com/recaptcha/docs/create-assessment
  });
}
</script>

      grecaptcha.enterprise.execute() génère un jeton, comme illustré dans l'exemple suivant : 

      03AGdBq27tvcDrfiRuxQnyKs-SarXVzPODXLlpiwNsLqdm9BSQQRtxhkD-Wv6l2vBSnL_JQd80FZp3IeeF_TxNMrqhyQchk7hmg_ypDctt_F5RTr9zNO9TSDX3Fy0qHQTuaM9E3hrAkA1v1l7D-fCreg7uq8zoudfh1ZRmN49-2iAMAn4E8_ff-nmlLTNGVZmCSyeze-5xM24pM_JhhUVcCMIDKYtDUnr2imxg2ubIqMscCZGUtdXNUO_LRSzuwWDlLyAr3V2nVn29Z48PQa2QzbymEXzO9pCtoGQmY7kiZ8ILfD9DAJSSyUTMwJXVJptUeBmLM341fq_STYZBbPQJ0zYOEDvJoFsIwGMfuphkDet0nK56b0mkzaL8RCRy2oK31Mcx6n3PhGkCnQ6QIhiV5ZVmV1Hz9M3w99zYw6ekc3wPCNMZ6V6x1ApVpIk3reFfByRQ0C0_pRWwbKZHLXQ_oSTI1UI7kyH1VeXngsJAx2l7zcp0hQNipajC4YwL7Jb8X4cCD0NeiaY1YCrI5j87mK5axcMikq460I4niIFeDBlHGF-ndqu3CJstosAur-C_x827f-dPPjA9Vrw8MDb3x4KUb0vbA8xE9mJxPYGY0rPCR27vJ38Voa7DjEBGX9c-iufv5_wfj-yIfIAHy0iijnRLI0CVkWF2-iPdWv7LnkTwL3WKbF_MrEGZXmtyLX9dEZArfxmToeMuSdYkfikkgR2-k4Xzxlz15RbHJuWSAYqEyTTnpUXmOvDuTN92b0kYqbRelcLUI_Shm-8dq9e-L7K6YWQv32gV6NukZKY15dyrJaW10frBgTOGSTTpIyB7MNEL8S27WjWtOb-zWsgimIhoRNfS8BiJWkmK4gTj51m7Wur-qsDbHgV6gXlMvjJs_B7oXX-mKsKhY9ACtwukotBelGYQOvf1RDHjH3Yi1RDfELBY6AkwUK4tq8cACVGpCwa0gKUo-sbORTsGu_r7VTzYo1AaZD5HV4XUm8yoqszel6DmIfkJcI7PfzzvfUJuvMQ1itZSzpzuth3glbKBYsIjbKqG-q8cxtZ7u0l32j46ASo2zlCJWUjwP3W1P7MUenEoIZtjlyTB_tT6Fk8RxGgRv3oLP7NPFJGs9ZGOAl6tBHpZF8Y_FqEOCMKtBl2JYOE5h6_Es3buSdiMm7mtLr64pboGiEColF1vbVvYpyaaqGFPXBM6ekZSXEXLAI0_7rj_fCLgnB21KXfac95vZbM9vyJCASvDcWKwqajQwy5aGMNe9GtbMogYbZfz5UGWAIi24Vd8KSv3qKOOwvzbcw4H0HYdsBXA

  3. Une fois le jeton reCAPTCHA généré, envoyez-le à votre backend et créer une évaluation dans un délai de deux minutes.

    Pour les intégrations WAF, si vous intégrez une clé de jeton d'action, vous devez associer le jeton à un en-tête de requête prédéfini et il n'est pas nécessaire créer une évaluation. Pour en savoir plus, consultez la section Implémenter des jetons d'action reCAPTCHA.

Ajouter reCAPTCHA à un bouton HTML

  1. Pour charger reCAPTCHA sur votre page Web, ajoutez l'API JavaScript avec votre clé basée sur des scores dans le <head></head> de votre page Web.

        <head>
    <script src="https://www.google.com/recaptcha/enterprise.js?render=KEY_ID"></script>
    ....
    </head>

    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.

  2. Pour ajouter reCAPTCHA sur un bouton HTML simple, procédez comme suit :

    1. Définissez une fonction de rappel pour gérer le jeton.

      <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   } // Use `requestSubmit()` for extra features like browser input validation.
</script>

      Pour en savoir plus, consultez la section sur la méthode requestSubmit().

    2. Ajoutez des attributs à votre bouton HTML.

      <button class="g-recaptcha"
data-sitekey="KEY_ID"
data-callback='onSubmit'
data-action='submit'>Submit</button>

      Si vous souhaitez spécifier un emplacement pour le badge, utilisez l'attribut data-badge=LOCATION sur l'élément qui contient class=g-recaptcha. Par défaut, l'emplacement est défini sur bottomright. Les autres valeurs possibles sont inline et bottomleft.

    3. Lorsque ce bouton est utilisé pour envoyer un formulaire sur votre site, le paramètre POST g-recaptcha-response contient le jeton de réponse.

  3. Une fois le jeton généré, envoyez-le à votre backend et créez une évaluation dans les deux minutes.

    Pour les intégrations de WAF, si vous intégrez une clé de jeton d'action, vous devez associer le jeton à un en-tête de requête prédéfini et vous n'avez pas besoin de créer d'évaluation. Pour en savoir plus, consultez Implémentez des jetons d'action reCAPTCHA.

Étape suivante