Демо-версия Google Recaptcha v3

До сих пор я работал с Google Recaptcha v2, но теперь я хочу обновить свой WebApp, используя последнюю версию (v3).

Можно ли кому-либо добавить полностью рабочий пример Google Recaptcha v3 для базовой формы, так как я не могу найти никаких рабочих демонстраций?

Я бы очень признателен.

Большое спасибо.

PS: Я использую Java Servlets на стороне сервера, но неважно, объясняете ли вы с помощью php или что-то еще.

Ответы

Ответ 2

Простой код для реализации ReCaptcha v3

Базовый код JS

<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>

Основной код HTML

<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>

Базовый код 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
    $response = json_decode($response);

    if ($response->success === false) {
        //Do something with error
    }
}

//... The Captcha is valid you can continue with the rest of your code
//... Add code to filter access using $response . score
if ($response.success==true && $response->score <= 0.5) {
    //Do something to denied access
}

Вы должны отфильтровать доступ, используя значение $ response.score. Он может принимать значения от 0,0 до 1,0, где 1,0 означает лучшее взаимодействие пользователя с вашим сайтом, а 0,0 - худшее взаимодействие (например, бот). Вы можете увидеть некоторые примеры использования в документации ReCaptcha.

Ответ 3

Я предполагаю, что у вас есть ключ и секрет сайта. Выполните этот шаг.

В своем HTML файле добавьте скрипт.

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

Кроме того, используйте jQuery для удобной обработки событий.

Вот простая форма.

 <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>

Вам нужно инициализировать Google recaptcha и прослушать готовое событие. вот как это сделать.

     <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>

Вот пример PHP файла. Вместо этого вы можете использовать Servlet или Node или любой другой язык бэкэнда.

<?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'));
        }
?>

Вот ссылка на учебник: https://codeforgeek.com/2019/02/google-recaptcha-v3-tutorial/

Надеюсь, это поможет.

Ответ 4

Мы используем recaptcha-V3 только для просмотра качества трафика сайта и используем его как неблокирующее. Поскольку recaptcha-V3 не требуется показывать на сайте, его можно использовать как скрытое, но вы должны показывать ссылки на конфиденциальность и т.д. (Как рекомендуется)

Тег скрипта в голове

<script src="https://www.google.com/recaptcha/api.js?onload=ReCaptchaCallbackV3&render='SITE KEY' async defer></script>

Примечание. "async defer" обеспечивает отсутствие блокировки, что является нашим конкретным требованием

Код JS:

<script>
    ReCaptchaCallbackV3 = function() {
        grecaptcha.ready(function() {
            grecaptcha.execute("SITE KEY").then(function(token) {
                $.ajax({
                    type: "POST",
                    url: 'https://api.${window.appInfo.siteDomain}/v1/recaptcha/score',
                    data: {
                        "token" : token,
                    },
                    success: function(data) {
                        if(data.response.success) {
                            window.recaptchaScore = data.response.score;
                            console.log('user score ' + data.response.score)
                        }
                    },
                    error: function() {
                        console.log('error while getting google recaptcha score!')
                    }
                });

            });
        });
    };
</script>

HTML/Css код:

there is no html code since our requirement is just to get score and don't want to show recaptcha badge.

Бэкэнд - код Laravel:

Route:

Route::post('/recaptcha/score', 'Api\\ReCaptcha\\[email protected]');


Class:

class RecaptchaScore extends Controller
{
    public function index(Request $request)
    {
        $score = null;

        $response = (new Client())->request('post', 'https://www.google.com/recaptcha/api/siteverify', [
            'form_params' => [
                'response' => $request->get('token'),
                'secret' => 'SECRET HERE',
            ],
        ]);

        $score = json_decode($response->getBody()->getContents(), true);

        if (!$score['success']) {
            Log::warning('Google ReCaptcha Score', [
                'class' => __CLASS__,
                'message' => json_encode($score['error-codes']),
            ]);
        }

        return [
            'response' => $score,
        ];
    }
}

мы возвращаем счет и сохраняем в переменную, которую мы позже используем при отправке формы.

Ссылка:https://developers.google.com/recaptcha/docs/v3 https://developers.google.com/recaptcha/