web-dev-qa-db-fra.com

Implémenter le nouvel Invisible reCaptcha de Google

Je construis un PHP site Web où je voudrais mettre un captcha sur le formulaire de connexion. Je suis allé avec le nouveau Invisible reCaptcha de Google mais je ne parviens pas à l'implémenter (partie HTML, le PHP fonctionne).

Le code que j'ai maintenant pour le reCaptcha "normal" est le suivant (selon les instructions de Google reCaptcha et cela fonctionne):

<form action=test.php method="POST">
   <input type="text" name="email" placeholder="Email">
   <input type="password" name="password" placeholder="Password">

   <!-- <Google reCaptcha> -->
   <div class="g-recaptcha" data-sitekey="<sitekey>"></div>
   <!-- </Google reCaptcha> -->

   <input type="submit" name="login" class="loginmodal-submit" value="Login">
</form>

Certaines instructions ont été envoyées dans le courrier électronique de confirmation lors de mon inscription (il a fallu environ 24 heures pour obtenir la confirmation). Cela dit ce qui suit:

Intégration invisible reCAPTCHA

  1. Si vous n’avez pas intégré votre site à reCAPTCHA v2, veuillez suivre notre guide du développeur pour les détails de mise en œuvre.

  2. Assurez-vous que la clé de votre site figurant sur la liste blanche pour Invisible reCAPTCHA.

  3. Pour activer le reCAPTCHA invisible, plutôt que de placer les paramètres dans un div, vous pouvez les ajouter directement à un bouton html.

    3a. data-callback = ””. Cela fonctionne comme la case à cocher captcha, mais est requis pour invisible.

    3b. data-badge: vous permet de repositionner le badge reCAPTCHA (c’est-à-dire le logo et le texte "protégé par le texte reCAPTCHA"). Des options valides telles que ‘bottomright’ (par défaut), ‘bottomleft’ ou ‘inline’ qui placera le badge directement au-dessus du bouton. Si vous insérez le badge en ligne, vous pouvez contrôler directement le code CSS du badge.

  4. La vérification de la réponse de l’utilisateur n’a aucun changement.

Le problème que j'ai est avec l'implémentation HTML (par conséquent, j'ai besoin d'aide pour l'étape 3. 1,2 et 4 fonctionnent pour moi). Le reste que j'ai à travailler avec reCaptcha normal et selon les instructions, ce devrait être la même chose. Je ne comprends pas ce que sont les données-callback et data-badge et comment cela fonctionne. Un exemple de code montrant comment implémenter invisible reCaptcha avec la configuration de mon formulaire serait formidable!

javascripthtmlrecaptcha
28
L.Johnson

ReCAPTCHA invisible

L'implémentation du nouveau reCAPTCHA invisible de Google est très similaire à la façon dont nous ajoutons la v2 à notre site. Vous pouvez l'ajouter comme son propre conteneur, comme d'habitude, ou comme nouvelle méthode pour l'ajouter au bouton d'envoi de formulaire. J'espère que ce guide vous aidera à suivre le bon chemin.

Conteneur autonome CAPTCHA

La mise en œuvre de recaptcha nécessite quelques opérations:

- Sitekey
- Class
- Callback
- Bind

Ce sera votre objectif final.

<div class="g-recaptcha" data-sitekey="<sitekey>" 
   data-bind="recaptcha-submit" data-callback="submitForm"> 
</div>

Lorsque vous utilisez la méthode autonome, la liaison de données doit être définie sur l'ID de votre bouton d'envoi. Si vous ne possédez pas cet ensemble, votre captcha ne sera pas invisible.

Un rappel doit également être utilisé pour soumettre le formulaire. Un captcha invisible annulera tous les événements à partir du bouton de soumission. Vous avez donc besoin du rappel pour transmettre la soumission.

<script>
function submitForm() {
    var form = document.getElementById("ContactForm");
    if (validate_form(form)) {
        form.submit();
    } else {
        grecaptcha.reset();
    }
}
</script>

Notez dans l'exemple de rappel qu'il existe également une validation de formulaire personnalisé. Il est très important que vous réinitialisiez reCAPTCHA en cas d'échec de la validation, sinon vous ne pourrez pas soumettre à nouveau le formulaire tant que le CAPTCHA n'expire pas.

Bouton CAPTCHA invisible

Cela ressemble beaucoup à la solution CAPTCHA autonome ci-dessus, mais au lieu d’avoir un conteneur, tout est placé sur le bouton Soumettre.

Ce sera votre objectif.

<button class="g-recaptcha" data-sitekey="<sitekey>" 
   data-callback="submitForm" data-badge="inline" type="submit">
  Submit</button>

Il y a quelque chose de nouveau ici, le badge de données. C'est un div qui est inséré dans le DOM qui contient les entrées nécessaires au fonctionnement de reCAPTCHA. Il a trois valeurs possibles: bottomleft, bottomright, inline. Inline le fera apparaître directement au-dessus du bouton de soumission et vous permettra de contrôler le style de votre choix.

À votre question

<form action="test.php" method="POST" id="theForm">
    <script>
    function submitForm() {
        document.getElementById("theForm").submit();
    }
    </script>
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">

    <div class="g-recaptcha" data-sitekey="<sitekey>" data-bind="recaptcha-submit" data-callback="submitForm"></div>

    <input type="submit" name="login" class="loginmodal-submit" id="recaptcha-submit" value="Login">
</form>

Ou

<form action="test.php" method="POST" id="theForm">
    <script>
    function submitForm() {
        document.getElementById("theForm").submit();
    }
    </script>
    <input type="text" name="email" placeholder="Email">
    <input type="password" name="password" placeholder="Password">

    <button class="loginmodal-submit g-recaptcha" data-sitekey="<sitekey>" data-callback="submitForm" data-badge="inline" type="submit" value="Login">Submit</button>
</form>

J'espère que cela vous aide, vous et les futurs codeurs. Je le garderai au courant de l'évolution de la technologie.

33
Allen

Si vous recherchez une solution générale entièrement personnalisable qui fonctionne même avec plusieurs formulaires sur la même page, je rendrai explicitement le widget reCaptcha à l'aide de render = explicit et onload = aFunctionCallback paramètres.

Voici un exemple simple:

<!DOCTYPE html>
<html>
<body>

<form action="" method="post">
    <input type="text" name="first-name-1"> <br />
    <input type="text" name="last-name-1"> <br />

    <div class="recaptcha-holder"></div>

    <input type="submit" value="Submit">
</form>

<br /><br />

<form action="" method="post">
    <input type="text" name="first-name-2"> <br />
    <input type="text" name="last-name-2"> <br />

    <div class="recaptcha-holder"></div>

    <input type="submit" value="Submit">
</form>

<script type="text/javascript">

  var renderGoogleInvisibleRecaptcha = function() {
    for (var i = 0; i < document.forms.length; ++i) {
      var form = document.forms[i];
      var holder = form.querySelector('.recaptcha-holder');
      if (null === holder){
        continue;
      }

      (function(frm){

        var holderId = grecaptcha.render(holder,{
          'sitekey': 'CHANGE_ME_WITH_YOUR_SITE_KEY',
          'size': 'invisible',
          'badge' : 'bottomright', // possible values: bottomright, bottomleft, inline
          'callback' : function (recaptchaToken) {
            HTMLFormElement.prototype.submit.call(frm);
          }
        });

        frm.onsubmit = function (evt){
          evt.preventDefault();
          grecaptcha.execute(holderId);
        };

      })(form);
    }
  };


</script>

<script src="https://www.google.com/recaptcha/api.js?onload=renderGoogleInvisibleRecaptcha&render=explicit" async defer></script>

</body>
</html>

Comme vous pouvez le constater, j'ajoute un élément div vide dans un formulaire. Afin d'identifier quels formulaires doivent être protégés avec reCaptcha, je vais ajouter un nom de classe à cet élément. Dans notre exemple, j'utilise le nom de classe 'recaptcha-holder'.

La fonction de rappel parcourt toutes les formes existantes et si elle trouve notre élément injecté avec le nom de classe 'recaptcha-holder', elle restituera le widget reCaptcha.

J'utilise cette solution sur mon plug-in invisible reCaptcha pour WordPress. Si quelqu'un veut voir comment cela fonctionne, il est disponible au téléchargement sur WordPress annuaire:

https://wordpress.org/plugins/invisible-recaptcha/

J'espère que cela t'aides!

20
Mch

Voici comment implémenter un côté client + serveur (php) Fonctionnalité invisible de reCaptcha:

  • Côté client
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>reCaptcha</title>

    <!--api link-->
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <!--call back function-->
    <script>
        function onSubmit(token) {
            document.getElementById('reCaptchaForm').submit();
        }
    </script>
</head>
<body>
<div class="container">
    <form id="reCaptchaForm" action="signup.php" method="POST">
        <input type="text" placeholder="type anything">
        <!--Invisible reCaptcha configuration-->
        <button class="g-recaptcha" data-sitekey="<your site key>" data-callback='onSubmit'>Submit</button>
        <br/>
    </form>
</div>
</body>
</html>
  • Validation côté serveur: créez un fichier signup.php
<?php
//only run when form is submitted
if(isset($_POST['g-recaptcha-response'])) {
    $secretKey = '<your secret key>';
    $response = $_POST['g-recaptcha-response'];     
    $remoteIp = $_SERVER['REMOTE_ADDR'];


    $reCaptchaValidationUrl = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");
    $result = json_decode($reCaptchaValidationUrl, TRUE);

    //get response along side with all results
    print_r($result);

    if($result['success'] == 1) {
        //True - What happens when user is verified
        $userMessage = '<div>Success: you\'ve made it :)</div>';
    } else {
        //False - What happens when user is not verified
        $userMessage = '<div>Fail: please try again :(</div>';
    }
}
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>reCAPTCHA Response</title>
    </head>
    <body>
        <?php
            if(!empty($userMessage)) {
                echo $userMessage;
            }
        ?>
    </body>
</html>
18
Jonca33

Voici un exemple de travail :

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ReCAPTCHA Example</title>
</head>
<body>
<div class="container">

  <form method="post" action="/contact/" id="contact-form">
    <h3 class="title-divider">
      <span>Contact Us</span>
    </h3>
    <input type="text" name="name">
    <div class="captcha"><!-- BEGIN: ReCAPTCHA implementation example. -->
      <div id="recaptcha-demo" class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY" data-callback="onSuccess" data-bind="form-submit"></div>
      <script>
          var onSuccess = function (response) {
              var errorDivs = document.getElementsByClassName("recaptcha-error");
              if (errorDivs.length) {
                  errorDivs[0].className = "";
              }
              var errorMsgs = document.getElementsByClassName("recaptcha-error-message");
              if (errorMsgs.length) {
                  errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
              }
              document.getElementById("contact-form").submit();
          };</script><!-- END: ReCAPTCHA implementation example. -->
    </div>
    <button id="form-submit" type="submit">Submit</button>
  </form>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</div>
</body>
</html>

N'oubliez pas de changer YOUR_RECAPTCHA_SITE_KEY en votre clé de site Google ReCAPTCHA.

La prochaine étape consiste à valider les données. Pour ce faire, faites une demande POST) au noeud final https://www.google.com/recaptcha/api/siteverify , contenant votre clé secrète et les données. à partir de reCAPTCHA, qui est identifié par g-recaptcha-response . Cela peut être fait de différentes façons en fonction de votre CMS/Framework.

Vous avez peut-être remarqué le badge reCaptcha dans le coin inférieur droit de l'écran. Cela permet aux utilisateurs de savoir qu'un formulaire est protégé par reCaptcha maintenant que la case à cocher de vérification a été supprimée. Il est toutefois possible de masquer ce badge en le configurant pour s’inscrire en ligne, puis en le modifiant avec CSS.

<style>
    .grecaptcha-badge {display: none;}
</style>

Notez que, dans la mesure où Google collecte des informations sur l'utilisateur afin d'activer la fonctionnalité reCaptcha, leurs conditions de service exigent que vous avertissiez les utilisateurs de son utilisation. Si vous masquez le badge, vous pouvez ajouter un paragraphe d'information quelque part sur la page. au lieu.

0
dtar