Яндекс Капча в формах

Введение

Яндекс капча позволяет добавить защиту от ботов на формы и имеет большие бесплатные лимиты.

Здесь мы пошагово разберем как создать простую форму с внедренной Яндекс капчей. 

Демостенд работы Яндекс Капча на форме Falcon Space

Как внедрить проверку капчи в стандартных формах Falcon Space

Шаг 1: Создайте капчу в Яндекс Cloud

Это делается один раз в консоли управления Яндекс Cloud https://console.yandex.cloud/

Войдите в консоль: Перейдите в консоль управления Яндекс Cloud и авторизуйтесь.

Проверьте биллинг: Убедитесь, что у вас есть платежный аккаунт со статусом ACTIVE или TRIAL_ACTIVE. Для работы капчи он обязателен, даже если вы не выходите за рамки бесплатного тарифа.

Создайте ресурс: В консоли выберите нужный каталог (папку), найдите сервис SmartCaptcha и нажмите кнопку «Создать капчу».

Заполните настройки:

Имя: Введите любое название капчи (от 2 до 63 символов).

Сложность: Оставьте Средняя (рекомендуется).

Список сайтов: Важно! Укажите домены, на которых будет работать капча (например, example.com).

Сохраните: Нажмите кнопку «Создать».

Шаг 2: Получите ключи доступа

Сразу после создания вам понадобятся два ключа:

На странице созданной капчи перейдите на вкладку «Обзор».

Скопируйте значения Client key (ключ клиента) и Server key (секретный ключ сервера) - сохраните его в /settings c кодом yandexCaptchaSecret.

Client key публичный, его можно встраивать в HTML-код страницы. Server key секретный, он нужен только для проверки на вашем сервере, никогда не выводите его в коде страницы.

Шаг 3: Создаем форму и настраиваем ее

Создаем форму с неким кодом (в примере - watch_yacaptcha). 

Добавляем ей необходимые поля и hidden поле  с кодом smart-token.

В сниппете формы указываем параметр data-yandexCaptchaKey="... Client key (ключ клиента) ...." 

Это добавит над кнопкой сохранения поле капчи + добавит динамически скрипт Яндекс Капчи на страницу. 

В поле формы SaveItem API указываем метод checkYandexCaptcha  - это исходящий метод АПИ, который будет запрашивать проверку токена у Яндекса и возвращать в форму отклик, который мы далее обрабатываем в SaveItem:

CREATE PROCEDURE [dbo].[fm_watch_yacaptcha_saveItem]
   @username nvarchar(256),
   @itemID int,
   @parameters ExtendedDictionaryParameter readonly
AS
BEGIN
  
  
    declare @checkYandexCaptcha nvarchar(max) = isnull((select value2 from @parameters where [Key] = 'checkYandexCaptcha'), '')
    if(isjson(@checkYandexCaptcha)=0) begin 
        select 0 Result, 'Ошибка капчи '+ @checkYandexCaptcha Msg
        return
    end 
  
    if(JSON_VALUE(@checkYandexCaptcha, '$.status')<>'ok')begin 
        select 0 Result, 'Ошибка проверки капчи ' + isnull(JSON_VALUE(@checkYandexCaptcha, '$.message'), '') Msg
        execute as_print @checkYandexCaptcha
        return
    end 
  
    -- другие поля формы 
	declare @pt1 nvarchar(max)
	select @pt1 = Value2 from @parameters where [key]='t1'
	declare @pt2 nvarchar(max)
	select @pt2 = Value2 from @parameters where [key]='t2'


  
  -- SELECT 1
  select 1 Result, 'OK' Msg, '' SuccessUrl, 1 HideFormAfterSubmit, '' RefreshContainer, 1 EnableSaveAlert
END

Шаг 4: Создание API метода для проверки токена: 

В /asapi создаем исходящий метод POST c кодом checkYandexCaptcha. 

Процедура response: 

CREATE   PROCEDURE [dbo].[api_checkYandexCaptcha_request]
	@parameters ExtendedDictionaryParameter READONLY, 
	@username nvarchar(128) 
AS
BEGIN
    declare @userIP nvarchar(max) = isnull((select value2 from @parameters where [Key] = 'userIP'), '')
    declare @smartToken nvarchar(max) = isnull((select value2 from @parameters where [Key] = 'smart-token'), '')
    declare @secret nvarchar(max) = dbo.as_setting('yandexCaptchaSecret', '')

    declare @url nvarchar(max) = 'https://smartcaptcha.cloud.yandex.ru/validate?secret='+@secret+'&ip='+@userIP+'&token='+ @smartToken
	-- SELECT 1 
	select '' Msg, 1 Result, @url Url , 'application/x-www-form-urlencoded' ContentType
END

Примечания: 

Страница-источник на сайте falconspace.ru