Как начать работать с Yandex SmartCaptcha
Чтобы начать работу с сервисом:
Перед началом работы
- Перейдите в консоль управления. Войдите в Yandex Cloud или зарегистрируйтесь, если вы еще не зарегистрированы.
- На странице биллинга убедитесь, что у вас подключен платежный аккаунт, и он находится в статусе
ACTIVE
илиTRIAL_ACTIVE
. Если платежного аккаунта нет, создайте его.
Создайте капчу
- В консоли управления выберите каталог.
- Выберите сервис Yandex SmartCaptcha.
- Нажмите кнопку Создать капчу.
- Введите имя капчи.
- Выберите сложность:
- Easy — простая капча;
- Medium — капча среднего уровня сложности;
- Hard — сложная капча.
- Укажите список сайтов, на которых будет размещаться капча.
- Нажмите кнопку Создать.
Получите ключи капчи
- В консоли управления выберите каталог.
- Выберите сервис Yandex SmartCaptcha.
- Нажмите на имя капчи или создайте новую капчу.
- На вкладке Обзор скопируйте
ключ клиента
иключ сервера
.
С помощью клиентского ключа вы можете добавить виджет SmartCaptcha на свою страницу. Серверный ключ потребуется для проверки ответа пользователя.
Добавьте виджет на страницу
Подключите виджет SmartCaptcha одним из методов:
- Автоматическим методом: на странице пользователя подключается JS-скрипт, который автоматически находит все
div
с классомsmart-captcha
и устанавливает в них виджет. - Расширенным методом: вы управляете подключением виджета в процессе загрузки JS-скрипта через объект
window.smartCaptcha
.
-
Подключите JS-скрипт к странице пользователя. Для этого разместите в любом месте страницы (например, внутри тега
<head>
) код:<script src="https://captcha-api.yandex.ru/captcha.js" defer></script>
-
Добавьте на страницу пустой контейнер (элемент
div
), в который будет автоматически вставлен виджет SmartCaptcha:<div id="captcha-container" class="smart-captcha" data-sitekey="<Ключ для клиентской части>" ></div>
Примечание
При загрузке виджет меняет высоту контейнера, в котором он находится, на
100px
. Это может привести к нежелательному «скачку» верстки на странице из-за изменения высоты контейнера. Чтобы избавиться от этого «скачка», вы можете задать высоту контейнера100px
до загрузки виджета.<div ... style="height: 100px"></div>
В этом примере управление загрузкой виджета выполняется вызовом callback-функции onloadFunction
в процессе загрузки JS-скрипта.
-
Подключите JS-скрипт к странице пользователя. Для этого разместите в любом месте страницы, например, внутри тега
<head>
код:<script src="https://captcha-api.yandex.ru/captcha.js?render=onload&onload=onloadFunction" defer ></script>
-
Добавьте на страницу пустой контейнер, в который будет вставлен виджет:
<div id="<id контейнера>"></div>
-
Добавьте на страницу код callback-функции:
<script> function onloadFunction() { if (window.smartCaptcha) { const container = document.getElementById('<id контейнера>'); const widgetId = window.smartCaptcha.render(container, { sitekey: '<Ключ для клиентской части>', hl: '<Язык>', }); } } </script>
В код callback-функции стоит добавить проверку существования объекта
window.smartCaptcha
, чтобы не вызвать ошибку в случае вызова функции до завершения загрузки JS-скрипта.Примечание
При загрузке виджет меняет высоту контейнера, в котором он находится, на
100px
. Это может привести к нежелательному «скачку» верстки на странице из-за изменения высоты. Чтобы избавиться от этого «скачка», вы можете задать до загрузки виджета высоту контейнера100px
.<div ... style="height: 100px"></div>
Проверьте ответ пользователя
После решения задания пользователю выдается уникальный токен, который сохраняется в скрытом поле формы. Для проверки токена нужно отправить GET-запрос на адрес https://captcha-api.yandex.ru/validate
со следующими параметрами:
secret
— ключ для серверной части;token
— токен, полученный после прохождения проверки;ip
— IP-адрес пользователя, от которого пришел запрос на проверку токена.
Пример функции проверки токена:
const https = require('https'),
querystring = require('querystring');
const SMARTCAPTCHA_SERVER_KEY = "<Ключ для серверной части>";
function check_captcha(token, callback) {
const options = {
hostname: 'captcha-api.yandex.ru',
port: 443,
path: '/validate?' + querystring.stringify({
secret: SMARTCAPTCHA_SERVER_KEY,
token: token,
ip: '<IP-адрес пользователя>', // Способ получения IP-адреса пользователя зависит от вашего фреймворка и прокси.
}),
method: 'GET',
};
const req = https.request(options, (res) => {
res.on('data', (content) => {
if (res.statusCode !== 200) {
console.error(`Allow access due to an error: code=${res.statusCode}; message=${content}`);
callback(true);
return;
}
callback(JSON.parse(content).status === 'ok');
});
});
req.on('error', (error) => {
console.error(error);
callback(true);
});
req.end();
}
let token = "<token>";
check_captcha(token, (passed) => {
if (passed) {
console.log("Passed");
} else {
console.log("Robot");
}
});
define('SMARTCAPTCHA_SERVER_KEY', '<Ключ для серверной части>');
function check_captcha($token) {
$ch = curl_init();
$args = http_build_query([
"secret" => SMARTCAPTCHA_SERVER_KEY,
"token" => $token,
"ip" => $_SERVER['REMOTE_ADDR'], // Нужно передать IP-адрес пользователя.
// Способ получения IP-адреса пользователя зависит от вашего прокси.
]);
curl_setopt($ch, CURLOPT_URL, "https://captcha-api.yandex.ru/validate?$args");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_TIMEOUT, 1);
$server_output = curl_exec($ch);
$httpcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
curl_close($ch);
if ($httpcode !== 200) {
echo "Allow access due to an error: code=$httpcode; message=$server_output\n";
return true;
}
$resp = json_decode($server_output);
return $resp->status === "ok";
}
$token = $_POST['smart-token'];
if (check_captcha($token)) {
echo "Passed\n";
} else {
echo "Robot\n";
}
import requests
import sys
import json
SMARTCAPTCHA_SERVER_KEY = "<Ключ для серверной части>"
def check_captcha(token):
resp = requests.get(
"https://captcha-api.yandex.ru/validate",
{
"secret": SMARTCAPTCHA_SERVER_KEY,
"token": token,
"ip": "<IP-адрес пользователя>" # Способ получения IP-адреса зависит от вашего фреймворка и прокси.
# Например, в Flask это может быть request.remote_addr
},
timeout=1
)
server_output = resp.content.decode()
if resp.status_code != 200:
print(f"Allow access due to an error: code={resp.status_code}; message={server_output}", file=sys.stderr)
return True
return json.loads(server_output)["status"] == "ok"
token = "<token>" # Например, request.form["smart-token"]
if check_captcha(token):
print("Passed")
else:
print("Robot")
Что дальше
- Узнайте больше о методах подключения виджета SmartCaptcha.