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

Статья создана

Yandex Cloud

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

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

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

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

Перейдите в консоль управления. Войдите в 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-адрес пользователя, от которого пришел запрос на проверку токена.

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

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.