web-dev-qa-db-fra.com

Exemple de démonstration de Google Recaptcha v3

Jusqu'à présent, je travaillais avec Google Recaptcha v2, mais je souhaite maintenant mettre à jour mon application Web à l'aide de la dernière version (v3).

Est-il possible à quiconque d’ajouter un exemple Google Recaptcha v3 pleinement fonctionnel à un formulaire de base, car je ne trouve aucune démonstration qui en fonctionne?

Je l'apprécierais vraiment.

Merci beaucoup.

PS: J'utilise Java Servlets côté serveur, mais peu importe que vous expliquiez en utilisant php ou autre.

servletsrecaptcharecaptcha-v3
23
Ommadawn

Voici le lien:

https://recaptcha-demo.appspot.com/

Il suffit de demander le score pour la v3 et il donnera une réponse en JSON

11
Suleman

Code simple pour implémenter ReCaptcha v3

Le code JS de base

<script src="https://www.google.com/recaptcha/api.js?render=your reCAPTCHA site key here"></script>
<script>
    grecaptcha.ready(function() {
    // do request for recaptcha token
    // response is promise with passed token
        grecaptcha.execute('your reCAPTCHA site key here', {action:'validate_captcha'})
                  .then(function(token) {
            // add token value to form
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>

Le code HTML de base

<form id="form_id" method="post" action="your_action.php">
    <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
    <input type="hidden" name="action" value="validate_captcha">
    .... your fields
</form>

Le code de base PHP

    if(isset($_POST['g-recaptcha-response'])){
            $captcha=$_POST['g-recaptcha-response'];
        }
        else
            $captcha = false;

        if(!$captcha){
            //Do something with error
        }
        else{
            $secret = 'Your secret key here';
            $response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secret."&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']);
// use json_decode to extract json response
            if($response.success==false)
            {
                //Do something with error
            }
        }
... The Captcha is valid you can continue with the rest of your code
27
kikerrobles

Je suppose que vous avez la clé de site et le secret en place. Suivez cette étape.

Dans votre fichier HTML, ajoutez le script.

 <script src="https://www.google.com/recaptcha/api.js?render=put your site key here"></script>

En outre, utilisez jQuery pour faciliter la gestion des événements.

Voici le formulaire simple.

 <form id="comment_form" action="form.php" method="post" >
      <input type="email" name="email" placeholder="Type your email" size="40"><br><br>
      <textarea name="comment" rows="8" cols="39"></textarea><br><br>
      <input type="submit" name="submit" value="Post comment"><br><br>
    </form>

Vous devez initialiser Google recaptcha et écouter l'événement ready. Voici comment faire cela.

     <script>
       // when form is submit
    $('#comment_form').submit(function() {
        // we stoped it
        event.preventDefault();
        var email = $('#email').val();
        var comment = $("#comment").val();
        // needs for recaptacha ready
        grecaptcha.ready(function() {
            // do request for recaptcha token
            // response is promise with passed token
            grecaptcha.execute('put your site key here', {action: 'create_comment'}).then(function(token) {
                // add token to form
                $('#comment_form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
                    $.post("form.php",{email: email, comment: comment, token: token}, function(result) {
                            console.log(result);
                            if(result.success) {
                                    alert('Thanks for posting comment.')
                            } else {
                                    alert('You are spammer ! Get the @$%K out.')
                            }
                    });
            });;
        });
  });
  </script>

Voici l'exemple de fichier PHP. Vous pouvez utiliser Servlet ou Node ou tout autre langage de gestion à la place.

<?php

        $email;$comment;$captcha;
        if(isset($_POST['email'])){
          $email=$_POST['email'];
        }if(isset($_POST['comment'])){
          $comment=$_POST['comment'];
        }if(isset($_POST['token'])){
          $captcha=$_POST['token'];
          }
        if(!$captcha){
          echo '<h2>Please check the the captcha form.</h2>';
          exit;
        }
        $secretKey = "put your secret key here";
        $ip = $_SERVER['REMOTE_ADDR'];

        // post request to server

        $url =  'https://www.google.com/recaptcha/api/siteverify?secret=' . urlencode($secretKey) .  '&response=' . urlencode($captcha);
        $response = file_get_contents($url);
        $responseKeys = json_decode($response,true);
        header('Content-type: application/json');
        if($responseKeys["success"]) {
                echo json_encode(array('success' => 'true'));
        } else {
                echo json_encode(array('success' => 'false'));
        }
?>

Voici le lien vers le didacticiel: https://codeforgeek.com/2019/02/google-recaptcha-v3-tutorial/

J'espère que ça aide.

4
Shaikh Shahid