Yandex Cloud
  • Сервисы
  • Решения
  • Почему Yandex Cloud
  • Сообщество
  • Тарифы
  • Документация
  • Связаться с нами
Подключиться
Language / Region
© 2022 ООО «Яндекс.Облако»
Yandex SmartCaptcha
  • Начало работы
  • Концепции
    • Методы подключения виджета
    • Невидимая капча
    • Ограниченный режим
    • Квоты и лимиты
  • Правила тарификации
  • Обратная связь
  1. Начало работы

Как начать работать с Yandex SmartCaptcha

Статья создана
Yandex Cloud
  • Перед началом работы
  • Создайте капчу
  • Получите ключи капчи
  • Добавьте виджет на страницу
  • Проверьте ответ пользователя
  • Что дальше

Чтобы начать работу с сервисом:

  1. Создайте капчу.
  2. Получите ключи.
  3. Добавьте виджет на страницу.
  4. Проверьте ответ пользователя.

Перед началом работы

  1. Перейдите в консоль управления. Войдите в Yandex Cloud или зарегистрируйтесь, если вы еще не зарегистрированы.
  2. На странице биллинга убедитесь, что у вас подключен платежный аккаунт, и он находится в статусе ACTIVE или TRIAL_ACTIVE. Если платежного аккаунта нет, создайте его.

Создайте капчу

Консоль управления
  1. В консоли управления выберите каталог.
  2. Выберите сервис Yandex SmartCaptcha.
  3. Нажмите кнопку Создать капчу.
  4. Введите имя капчи.
  5. Выберите сложность:
    • Easy — простая капча;
    • Medium — капча среднего уровня сложности;
    • Hard — сложная капча.
  6. Укажите список сайтов, на которых будет размещаться капча.
  7. Нажмите кнопку Создать.

Получите ключи капчи

Консоль управления
  1. В консоли управления выберите каталог.
  2. Выберите сервис Yandex SmartCaptcha.
  3. Нажмите на имя капчи или создайте новую капчу.
  4. На вкладке Обзор скопируйте ключ клиента и ключ сервера.

С помощью клиентского ключа вы можете добавить виджет SmartCaptcha на свою страницу. Серверный ключ потребуется для проверки ответа пользователя.

Добавьте виджет на страницу

Подключите виджет SmartCaptcha одним из методов:

  • Автоматическим методом: на странице пользователя подключается JS-скрипт, который автоматически находит все div с классом smart-captcha и устанавливает в них виджет.
  • Расширенным методом: вы управляете подключением виджета в процессе загрузки JS-скрипта через объект window.smartCaptcha.
Автоматический метод
Расширенный метод
  1. Подключите JS-скрипт к странице пользователя. Для этого разместите в любом месте страницы (например, внутри тега <head>) код:

    <script src="https://captcha-api.yandex.ru/captcha.js" defer></script>
    
  2. Добавьте на страницу пустой контейнер (элемент div), в который будет автоматически вставлен виджет SmartCaptcha:

    <div
      id="captcha-container"
      class="smart-captcha"
      data-sitekey="<Ключ для клиентской части>"
    ></div>
    

    Примечание

    При загрузке виджет меняет высоту контейнера, в котором он находится, на 100px. Это может привести к нежелательному «скачку» верстки на странице из-за изменения высоты контейнера. Чтобы избавиться от этого «скачка», вы можете задать высоту контейнера 100px до загрузки виджета.

    <div ... style="height: 100px"></div>
    

В этом примере управление загрузкой виджета выполняется вызовом callback-функции onloadFunction в процессе загрузки JS-скрипта.

  1. Подключите JS-скрипт к странице пользователя. Для этого разместите в любом месте страницы, например, внутри тега <head> код:

    <script
      src="https://captcha-api.yandex.ru/captcha.js?render=onload&onload=onloadFunction"
      defer
    ></script>
    
  2. Добавьте на страницу пустой контейнер, в который будет вставлен виджет:

    <div id="<id контейнера>"></div>
    
  3. Добавьте на страницу код 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-адрес пользователя, от которого пришел запрос на проверку токена.

Пример функции проверки токена:

Node.js
PHP
Python
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.

Была ли статья полезна?

Language / Region
© 2022 ООО «Яндекс.Облако»
В этой статье:
  • Перед началом работы
  • Создайте капчу
  • Получите ключи капчи
  • Добавьте виджет на страницу
  • Проверьте ответ пользователя
  • Что дальше