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

Невидимая капча

Статья создана
Yandex Cloud
  • Алгоритм подключения
  • Уведомление об обработке данных
  • Особенности

Невидимая капча — это способ подключения виджета SmartCaptcha, при котором кнопка Я не робот отсутствует на странице. Окно с заданием увидят только те пользователи, запросы которых сервис SmartCaptcha посчитает подозрительными.

Разработчик сам выбирает, когда сервис проверит пользователя, например, по клику на submit формы.

Невидимая капча подключается только расширенным методом.

Алгоритм подключения

  1. Загрузить капчу расширенным методом.

    <script
      src="https://captcha-api.yandex.ru/captcha.js?render=onload&onload=onloadFunction"
      defer
    ></script>
    
    <div id="captcha-container"></div>
    
  2. Отрисовать виджет капчи в невидимом режиме.

    <script>
      function onloadFunction() {
        if (!window.smartCaptcha) {
          return;
        }
    
        window.smartCaptcha.render('captcha-container', {
          sitekey: '<Ключ_для_клиентской_части>',
          invisible: true, // Сделать капчу невидимой
          callback: callback,
        });
      }
    
      function callback(token) {
        console.log(token);
      }
    </script>
    
  3. Вызвать window.smartCaptcha.execute(), когда SmartCaptcha должна начать валидацию пользователя. Например, при нажатии submit в форме.

    <script>
    function handleSubmit() {
      if (!window.smartCaptcha) {
        return;
      }
    
      window.smartCaptcha.execute();
    }
    </script>
    
    <form id="form">
      <div id="captcha-container"></div>
     <input type="submit" onsubmit="handleSubmit()" />
    </form>
    

Уведомление об обработке данных

По умолчанию на странице с невидимой капчей появляется блок со ссылкой, которая ведет на документ Уведомление об условиях обработки данных сервисом.

Блок располагается в нижнем правом углу. Чтобы переместить блок, используйте параметр shieldPosition метода render. Например:

window.smartCaptcha.render('captcha-container', {
  sitekey: '<ключ_клиентской_части>',
  invisible: true,
  shieldPosition: 'top-left',
  callback: callback,
});

Вы можете скрыть блок, используя параметр hideShield метода render.

Важно

Вы обязаны уведомлять пользователей о том, что их данные обрабатывает SmartCaptcha. Если вы скрываете блок с уведомлением, сообщите пользователям иным способом о том, что SmartCaptcha обрабатывает их данные.

Особенности

Невидимая капча требует меньше памяти, чем обычная, так как не загружает код, который отрисовывает кнопку Я не робот.

Однако, у пользователей, которым будет показано задание, время загрузки виджета может варьироваться. Поэтому мы рекомендуем предупреждать пользователей о показе капчи, чтобы не приводить их в замешательство во время ожидания.

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

Language / Region
Проект Яндекса
© 2023 ООО «Яндекс.Облако»
В этой статье:
  • Алгоритм подключения
  • Уведомление об обработке данных
  • Особенности