До сих пор я работал с Google Recaptcha v2, но теперь я хочу обновить свой WebApp, используя последнюю версию (v3).
Можно ли кому-либо добавить полностью рабочий пример Google Recaptcha v3 для базовой формы, так как я не могу найти никаких рабочих демонстраций?
Я бы очень признателен.
Большое спасибо.
PS: Я использую Java Servlets на стороне сервера, но неважно, объясняете ли вы с помощью php или что-то еще.
Вот ссылка:
https://recaptcha-demo.appspot.com/
Просто запросите счет для v3, и он даст ответ в JSON
Простой код для реализации 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.
Я предполагаю, что у вас есть ключ и секрет сайта. Выполните этот шаг.
В своем 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/
Надеюсь, это поможет.
Мы используем 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/