Библиотека для создания капчи RVerify.js

Капча существует для защиты сайта от ботов. Боты - это скрипт, который выполняет определенные действия на сайте. Они могут парсить сайт в поисках скрытой информации, могут выкладывать фальшивые отзывы, оставлять комментарии, нагружать сайт и множеством других способов наносить вред сайтам и их владельцам. Написание капчи с нуля может вызвать серьёзные затруднения у новичков, поэтому существуют уже готовые решения. Одно из них - библиотека RVerify.js для быстрого и простого создания капчи.

Из этого урока вы узнаете:

• Создание каркаса капчи
• Добавление иконок, текста, фотографий в капчу
• Другие полезные опции для создания капчи

1) Создание каркаса капчи

Для начала добавим в проект библиотеку. Как обычно, это можно сделать следующими способами:

• Через пакетный менеджер

Для этого нужно запустить консоль в папке с нашим проектом и набрать следующие команды:

npm init
npm install --save rverify

• Через CDN:

В данном случае, шаблон будет таким:

Ссылки на CDN: 👉 RVerify.js 👉 RVerify.css

Также можно добавить библиотеки напрямую, скачав их по ссылкам выше и добавив в атрибуты href в тэге link и src в тэге script локальный путь до этих библиотек на вашем компьютере.

Теперь, добавив любым из предложенных выше способов библиотеку RVerify, можно создавать каркас капчи.

Это довольно просто. Нам нужно создать JavaScript файл, подключить его в проект и добавить туда следующий код.

Библиотека RVerify.js предоставляет объект RVerify. У данного объекта мы сперва вызывает свойство configure. В этом свойстве мы будем прописывать параметры для настройки капчи. Далее мы вызываем метод action объекта RVerify. Этот метод запускает капчу.

Теперь на странице мы уже увидим её каркас:

2) Добавление иконок, текста, фотографий в капчу

Добавить свои данные, чтобы сделать капчу уникальной довольно просто, ведь уже есть встроенные параметры. Допишем параметры в свойство configure объекта RVerify.

Возможно, выглядит пугающе, но все очень просто. Пройдёмся по порядку.

Первое свойство, которое мы видим - это closeIcon. Оно отвечает за иконку закрытия. В кавычках приведен SVG-код выбранной нами икноки. То есть для того, чтобы добавить иконку к себе в капчу, нам достаточно её скачать, открыть её SVG-код (в редакторе кода VS Code и большинстве других он открывается автоматически при попытке открыть иконку), скопировать его и вставить между одинарными кавычками.

Примечание: Рекомендуемый размер иконки закрытия 20x20. Выбранная вами SVG иконка скорее всего будет иметь другой размер. Чтобы она по умолчанию имела размер 20x20, необходимо в SVG-коде найти параметры width и height и в их значения записать 20.

Идём дальше. Следующее свойство - sliderIcon. Оно отвечает за иконку ползунка, двигающегося вправо. Рекомендуемый размер этой иконки также 20x20. Поэтому необходимо произвести аналогичные операции с SVG-кодом данной иконки.

Иконки были взяты с сайта flaticon.com.

• 👉 Иконка закрытия
• 👉 Иконка ползунка

Их отредактированный SVG-код:

• Иконки закрытия:

• Иконки ползунка

Дальше всё гораздо проще. Есть свойство title, означающее текст заголовка капчи и свойство text, означающее текст капчи. Осталось только одно свойство - album. Это коллекция фотографий, которые будут показываться при появлении капчи. Можно оставить на них ссылки, как в примере выше. Можно использовать свои фотографии.

Результат будет выглядеть так (gif):

Вот у нас и получилась довольно красивая капча, которую можно создать буквально за 5 минут.

3) Другие полезные опции для создания капчи

Есть ещё несколько опций, которые мы ещё не рассмотрели. Кратко пройдёмся по каждой из них:

• mask - принимает значение от 0 до 1. Определяет прозрачность заднего фона. 1 - непрозрачный, 0 - полностью прозрачный.
• maskClosable - принимает true/false. Определяет, возможно ли закрытие капчи без её успешного прохождения.
• duration - задержка после прохождения капчи, принимает время в миллисекундах.
• zIndex - принимает значение CSS-свойства z-index для окна с капчей. Его задают, чтобы какое-либо модальное окно не перекрыло окно с капчей и наоборот.
• tolerance - принимает значение от 5 до 45 градусов. Это допустимое отклонение угла поворота от нужного. По умолчанию принято значение 10.

Ещё есть возможность оставить ссылку в самом низу капчи. Свойство extra отвечает за отображаемый текст ссылки. Свойство extraColor принимает hex-код цвета отвечает за цвет этого текста. extraLink отвечает за ссылку, на которую осуществляется переход. extraIcon отвечает за иконку, которая отображается рядом (в extraIcon вставляется также svg-код выбранной иконки, но для данной иконки рекомендованный размер 15x15).

Надеемся, что информация была актуальна и полезна. Изучайте и применяйте изученное в своих проектах.

До скорой встречи!

Ссылка на канал: https://t.me/sitodel