Как подключить google recaptcha к форме?
Здравствуйте, мне нужно подключить к произвольной форме регистрации google recaptcha, вот ссылка:
https://www.google.com/recaptcha/intro/index.html
Посмотрел api на сайте гугла, но оно для меня не понятное. Может кто нибудь привести пример или объяснить как можно привязать рекапчу к форме, что бы она работала как нужно. Мне не нужно особых ее настроек(типа языка и прочего). Просто основной функционал капчи.
3 Ответ(ы)
Сперва подключим скрипт капчи:
function onwp_enqueue_frontend() {
wp_enqueue_script('ha-recaptcha', 'https://www.google.com/recaptcha/api.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'onwp_enqueue_frontend');
В нужное место вставим html:
<div class="g-recaptcha" data-sitekey="ваш_код"></div>
Функция проверки:
$recaptcha = $_POST['data']['g_recaptcha_response'];
if (!empty($recaptcha)) {
$google_url = "https://www.google.com/recaptcha/api/siteverify";
$secret = 'ваш_код';
$ip = $_SERVER['REMOTE_ADDR'];
$url = $google_url . "?secret=" . $secret . "&response=" . $recaptcha . "&remoteip=" . $ip;
$res = onwp_getCurlData($url);
$res = json_decode($res, true);
//reCaptcha введена
if (empty($res['success'])) {
// Ошибка, пожалуйста введи капчу заново
} else {
// все успешно прошло
// выполняем ваши действия
}
} else {
// Ошибка, пожалуйста введи капчу заново
}
функция выполняющая запрос:
function onwp_getCurlData($url) {
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_TIMEOUT, 10);
curl_setopt($curl, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.16) Gecko/20110319 Firefox/3.6.16");
$curlData = curl_exec($curl);
curl_close($curl);
return $curlData;
}
И на всякий случай, js для перезагрузки капчи:
grecaptcha.reset();
Изменить внешний вид:
<div class="g-recaptcha" style="transform:scale(0.77);-webkit-transform:scale(0.77);transform-origin:0 0;-webkit-transform-origin:0 0;"></div>
Добавить несколько recaptcha на одну страницу:
<script src="https://www.google.com/recaptcha/api.js?onload=myCallBack&render=explicit" async defer></script>
<script>
var recaptcha1;
var recaptcha2;
var myCallBack = function() {
//Render the recaptcha1 on the element with ID "recaptcha1"
recaptcha1 = grecaptcha.render('recaptcha1', {
'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
'theme' : 'light'
});
//Render the recaptcha2 on the element with ID "recaptcha2"
recaptcha2 = grecaptcha.render('recaptcha2', {
'sitekey' : '6Lc_0f4SAAAAAF9ZA', //Replace this with your Site key
'theme' : 'dark'
});
};
</script>
