Базовая интеграция
Для работы smartCaptcha на Вашем сайте, необходимо добавить smartcaptcha.js в код страниц сайта (там, где планируется ее вызов). Добавьте следующий код:
<html> <head> <title>Страница с smartCaptcha</title> <script src="https://smartcaptcha.pages.dev/smartCaptcha.js" async defer></script> </head> <body> ... </body></html>Вы можете включить интеграцию smartCaptcha в любой части сайта, на примере это сделано в теге head, вы так же можете по своему усмострению добавить его и в конец страницы. Параметры async defer ускоряют загрузку и крайне не рекомендуется их удалять.
Теперь smartCaptcha будет загружаться вместе со страницей, и Вы сможете ее применять. Использование smartCaptchа мы старались сделать максимально простым (даже для новичков), вызвать smartCaptcha можно просто с помощью функции:
smartcaptcha('ПУБЛИЧНЫЙ_КЛЮЧ', 'ВАРИАНТ_ОФОРМЛЕНИЯ');//например: smartcaptcha('63nt467Nv9t6sSNaR0n9kq64', 'dark');⠀ПУБЛИЧНЫЙ_КЛЮЧ - этот ключ Вы можете получить в Центре smartCaptcha, в сведениях Вашего проекта. У нас есть документация, где этот процесс подробно описан: Документация smartCaptcha: Получение ключей.* Публичный ключ указывает системе, в рамках какого сайта (проекта) начинать сессию.
⠀ВАРИАНТ_ОФОРМЛЕНИЯ - указывает, как будет выглядеть smartCaptcha. Если не указано, по-умолчанию будет применена тема 'dark'. Обратитесь к таблице снизу для справки по доступным темам:
| Код оформления | Описание | Пример |
|---|---|---|
| dark | Стандартная тема: темное оформление | |
| light | Стандартная тема: светлое оформление |
После запуска функции, пользователь увидит smartCaptcha. После успешного прохождения произойдет событие smartcaptcha, которое будет содержать в ячейках event.detail.status и event.detail.code информацию о пройденной сесии.
| Ячейка объекта | Содержание | Описание |
|---|---|---|
| event.detail.status | Возвращает статус сессии | Существует пока-что единственный статус: OK (английская раскладка) |
| event.detail.code | Возвращает код сессии | Содержит в себе себе код сессии, по которому можно будет подтвердить в течении некоторого времени, была ли действительно пройдена капча (хакеры могут попытаться подсунуть фейковый код) |
Мы советуем реализовывать это с помощью представленного ниже кода, который без проблем решает поставленную задачу (жидает решения капчи, после чего выводит статус и код капчи в браузерную консоль):
smartCaptcha_EmbedStyle.addEventListener("smartcaptcha", function(event) { console.log(event.detail.status); //Отобразит OK console.log(event.detail.code); //Отобразит код сессии });Это все! Так просто
После получения этих данных, Вы можете без проблем отправить запрос на сервер, вместе с полученным в event.detail.code кодом. Далее, в нашей документации так же описывается, как проверять на сервере, действительно ли была решена капча.
Очень важно
Не забудьте проверить код на стороне сервера!