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

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

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

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

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

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

   <script
     src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onloadFunction"
     defer
   ></script>
   

2. Отрисовать виджет капчи в невидимом режиме.

   <form id="form">
     <div id="captcha-container"></div>
     <input type="submit" />
   </form>
   
   <script>
   const form = document.getElementById('form');
   
   function onloadFunction() {
     if (!window.smartCaptcha) {
       return;
     }
   
     window.smartCaptcha.render('captcha-container', {
       sitekey: '<ключ_клиентской_части>',
       invisible: true, // Сделать капчу невидимой
       callback: callback,
     });
   }
   
   function callback(token) {
     form.submit();
   }
   </script>
   

3. Вызвать window.smartCaptcha.execute(), когда SmartCaptcha должна начать валидацию пользователя. Например, при нажатии submit в форме.

   <form id="form">
     <div id="captcha-container"></div>
     <input type="submit" onsubmit="handleSubmit()" />
   </form>
   
   <script>
   const form = document.getElementById('form');
   
   function onloadFunction() {
     if (!window.smartCaptcha) {
       return;
     }
   
     window.smartCaptcha.render('captcha-container', {
       sitekey: '<ключ_клиентской_части>',
       invisible: true, // Сделать капчу невидимой
       callback: callback,
     });
   }
   
   function callback(token) {
     form.submit();
   }
   
   function handleSubmit(event) {
     event.preventDefault();
   
     if (!window.smartCaptcha) {
       return;
     }
   
     window.smartCaptcha.execute();
   }
   </script>
   

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

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

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

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

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

ОсобенностиОсобенности

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

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

• Если на странице более одного виджета, то нужно передавать идентификатор виджета в метод execute.

  Пример

  <script
    src="https://smartcaptcha.yandexcloud.net/captcha.js?render=onload&onload=onloadFunction"
    defer
  ></script>
  
  <script>
    let widgetId;
  
    function onloadFunction() {
      if (!window.smartCaptcha) {
        return;
      }
  
      widgetId = window.smartCaptcha.render('captcha-container', {
        sitekey: '<ключ_клиентской_части>',
        invisible: true, // Сделать капчу невидимой
        callback: callback,
      });
    }
  
    function callback(token) {
      if (typeof token === "string" && token.length > 0) {
          // Отправить форму на бекенд
          console.log(token);
          document.querySelector('form').submit()
      }
    }
  
    function handleSubmit(event) {
      if (!window.smartCaptcha) {
        return;
      }
  
      window.smartCaptcha.execute(widgetId);
    }
  </script>
  
  <form id="form">
    <div id="captcha-container"></div>
    <button type="button" onclick="handleSubmit()">Submit</button>
  </form>