Формы. Как сделать подтверждение действия в СМС (SMS) в форме
Демостенд примера - https://demo.web-automation.ru/list/watch/podtverzhdenie-deystviya-polzovatelya-po-kodu-cherez-email--sms---1138
Для внедрения в форму возможности подтверждения по СМС или Email необходимо сделать следующее:
0. В базе должна быть таблица as_confirms:
IF NOT EXISTS (SELECT * FROM sysobjects WHERE name= 'as_confirms' and xtype='U') BEGIN
CREATE TABLE [dbo].[as_confirms]
(
[id] [int] IDENTITY(1,1) NOT NULL
CONSTRAINT [PK_as_confirms] PRIMARY KEY CLUSTERED ( [id] ASC )
) ON [PRIMARY]
print 'Создана таблица as_confirms '
END
GO
IF COL_LENGTH( 'as_confirms', 'guid') IS NULL BEGIN
ALTER TABLE as_confirms
ADD [guid] uniqueidentifier NULL
END
IF COL_LENGTH( 'as_confirms', 'code') IS NULL BEGIN
ALTER TABLE as_confirms
ADD [code] nvarchar (32) NULL
END
IF COL_LENGTH( 'as_confirms', 'date') IS NULL BEGIN
ALTER TABLE as_confirms
ADD [date] datetime NULL
END
1. Добавить на форму кнопку
<a href="#" class="as-form-confirm">Confirm</a>
2. Скрыть основную кнопку сохранения (при этом кнопка обязательно должна быть на форме!)
.as-form[data-code=client] .as-form-submit{ display: none; }
3. Создать процедуру для метода request, где модуль - это код формы (в данном случае client).
create or alter PROCEDURE [dbo].[request_watch_confirmEmail_confirm]
@parameters DictionaryParameter READONLY,
@username nvarchar(32)
AS
BEGIN
declare @formItemID nvarchar(128) = (select Value from @parameters where [Key]='itemID')
declare @formCode nvarchar(128) = (select Value from @parameters where [Key]='code')
declare @contact nvarchar(128) = (select Value from @parameters where [Key]='contact')
if(isnull(@contact, '')='') begin
select 0 Result, 'Не указан контакт' Msg, 'warning' [Type]
return
end
if(CHARINDEX('@', @contact)<1) begin
select 0 Result, 'Неверно указан email' Msg, 'warning' [Type]
return
end
declare @guid uniqueidentifier = newid()
-- генерируем код
DECLARE @code nvarchar(128);
declare @count int = 4
SET @code = (SELECT c1 AS [text()]
FROM( SELECT TOP (@count) c1 FROM ( VALUES ('0'), ('1'), ('2'), ('3'), ('4'), ('5'), ('6'), ('7'), ('8'), ('9')) AS T1(c1)
ORDER BY ABS(CHECKSUM(NEWID()))
) AS T2 FOR XML PATH(''));
-- SELECT 1
select '' Msg, 1 Result
-- SELECT 2 - отдаем guid для будущей проверки при сохранении.
select @guid [guid], 'Укажи код в поле' title, 'Отправили email с кодом вам на почту' text, 'Отправить заявку' btnText
-- сохраняем код и Guid для будущей проверки в SaveItem
insert into as_confirms ([guid], code, date) values (@guid, @code, getdate())
-- отправляем на почту (или SMS) сгенерированный код
select 'email' type, -- email, sms, notification, clearcache
@contact [to], 'Код подтверждения' subject, 'Код проверки - '+@code body
END
Примечание: все поля формы передаются в @parameters по коду своего поля. В parameters также передаются код формы code и itemID. Также телефон можно извлекать по username для авторизованных пользователей.
В SELECT 2 мы можем задать параметры модального окна ввода кода - заголовок, описание и метку кнопки.
4. в SaveItem делаем проверку кода (не забываем, что @itemID nvarchar(256))
CREATE PROCEDURE [dbo].[fm_watch_confirmEmail_saveItem]
@username nvarchar(256),
@itemID nvarchar(256),
@parameters ExtendedDictionaryParameter readonly
AS
BEGIN
-- на входе в @itemID = @itemID_guid_usercode
declare @guid nvarchar(256), @code nvarchar(128), @instanceID int
set @instanceID = try_cast( dbo.str_splitPart(@itemID, '_', 1) as int)
set @code = dbo.str_splitPart(@itemID, '_', 2)
set @guid = dbo.str_splitPart(@code, '_', 1)
set @code = dbo.str_splitPart(@code, '_', 2)
if( not exists (select id from as_confirms where guid = @guid and code = @code and date > dateadd(minute, -10, getdate()))) begin
select 0 Result, 'Неверный код' Msg
return
end
-- 1 SELECT
select 1 Result, 'Операция выполнена успешно...' Msg
END
Настройки окна подтверждения
Вы можете указать настройки в атрибутах кнопки as-form-confirm
- data-title - заголовок модального окна.
- data-text - текст-описание в модальном окне
- data-placeholder - текст подсказки для текстового поля ввода
- data-btnText - текст кнопки в модальном окне.
- data-resendDelay - если указано, то на данное количество миллисекунд задерживается показ кнопки Отправить заново (реинициализация окна + отправка заново sms или почты). Если не указан атрибут, то не будет выводиться данная кнопка.
- data-resendBtnText - текст кнопки Отправить заново.
Коллбек проверки перед отправкой кода в JS
as.formcallbacks[formCode + "_beforeConfirm"] = function(cont){
return true;
}
Если вернет false - то операция прервется.
Примечание
- На форме не используем {form-result}, чтобы сообщения показывались во всплывающем окне.
- Везде в процедурах, где используется параметр @itemID делаем его nvarchar(256) - проверьте GetItem, CheckItem, SaveItem и dict процедуры (оно подменяется на связку параметров при вставке кода и guid)
- Форму не следует использовать в модальном окне (т.к. модальное окно используется для SMS подтверждения).
- Проверку на заполнения полей лучше делать через сервер (не использовать галочку Обязательное поле).
Если пользователю нужно просто подтвердить действие через дополнительное согласование - https://falconspace.ru/docs/kak-sdelat-okno-podtverzhdeniya-deystviya-formy
Google поиск по нашей документации
- Руководства
- Основа Falcon Space
- Основные компоненты
- Возможности
- Коммуникация с пользователем
- Дизайн, стилизация, юзабилити
- Лендинги
- Универсальный API
- Примеры интеграций
- Каталоги
- Навигация
- Документы
- Дополнительные компоненты
- Продвижение, SEO
- Системные моменты
- Системное администрирование
- HOWTO
- Таблицы
- Формы Формы. Как принимать в форму не 1 параметр (itemID), а несколько входящих параметров? data-param-p1 Формы. Как создать форму для редактирования сущности Формы. Как сделать кастомную HTML разметку для формы (jsRender) Формы. Как сделать поиск для поля, т.е. список с поиском через обращение к БД (autocomplete. search-select) Формы. Как установить некоторые поля в форме по умолчанию при загрузке Формы. Как выводить разные данные на одной форме для разных ролей Формы. Как в форме вывести список галочек (множественный выбор поля) Формы. Как выводить и сохранять множественный список через chosen поле. Формы. Как перезагрузить страницу после сохранения Формы. Как добавить коллбек после загрузки формы и после сохранения формы. Формы. Как динамически изменять тип колонки при рендеринге формы. Формы. Как сделать модальную форму (открывается в диалоговом окне) Формы. Как обновить таблицу (или форму) после сохранения формы в открытом модальном окне Формы. Как вывести форму во всплывающем окне рядом с кнопкой (popover) Формы. Как сделать зависимые поля в форме (Страна, Город) Формы. Как сделать выбор адреса и сохранение координат места (lat,lng). Формы. Как правильно обрабатывать цены (дробные числа) на форме Формы. Как вывести списковые данные или таблицу внутри формы Формы. Установка фоновой панели для формы Формы. Как передать в форму скрытый параметр Формы. Как сделать списки select и chosen с категориями (optgroup) Формы. Как сделать форму в виде мастера шагов Формы. Как показывать на форме прогресс заполнения (прогрессбар заполнения формы) Формы. Как использовать Флажки и выбор радио с картинкой Формы. Как сделать поля с анимацией значений (крутящиеся числа, цифры). Формы. Как редактировать текст элементов HTML в Rich-редакторе Формы. Как использовать в форме поле Выбор файлов. Типы полей формы files, remoteFile, fileContent Формы. Как скрывать/показывать, обновлять область на странице при изменении поля формы Формы. Как работать с полем Таймер Формы. Как в форму в SaveItem передать некий скрытый параметр (например Куки или параметр URL) Формы. Как показывать изменяющуюся информацию при изменении полей Формы. Как сделать форму с сохранением состояния Формы. Как работать с полем типа Слайдер (ползунок) Формы. Добавление кнопки очистки формы (Reset form) Формы. Как сделать подтверждение действия в СМС (SMS) в форме Установка графика работы (поле формы weekTime) Формы. Как сделать в форме более 1 кнопки действий (несколько кнопок действий на форме) Как в форме добавить примеры заполнения полей (example) Как выбрать значение списка через справочник в модальном окне Как сделать окно подтверждения действия формы Формы. Динамическое изменение itemID у формы в зависимости от других элементов страницы Формы. Как добавить новый элемент, если в списке на форме его нет Как создать кастом форму с подтверждением действия по Email или SMS Как сделать задержку при сохранении формы (saveDelay) Подсказки-ограничители длины для полей в форме Как сохранить значение поля в браузере, чтобы каждый раз его не вбивать при загрузке (оставлять последнее сохраненное). Запоминание поля формы в браузере Вставка ссылок по шаблону (ютуб ссылка, patternString) Формы. Загрузка формы по ссылке Формы. Управление настройками поля через options_ поля Формы. Использование Google Recaptcha в формах Как указать произвольную маску для поля ввода в форме Форма. Как вывести дерево с выбором галочек Формы. Как сделать выбор цвета в форме Кастом проверка полей формы через JS Как в выборе даты (datepicker) задать доступные даты Загрузка формы в выпадающем окне (dropdown) Добавление смайликов (emoji) в поля форм Форма. Обработка даты из поля datetime-local Как у формы сделать progress bar при загрузке формы Редактор текста - код поля формы html2 Работа с датами в формах Форма. Как работать с полем Дробное число Как настроить выбор вариантов для поля Интервал дат Выбор из элементов с табуляцией - поле формы tabs Показ количества символов рядом с полем в форме Кнопка очистки формы Reset Контроль заполнения ключевых форм на сайте Как сделать форму с простым подтверждением действия (confirm) Тип поля imageCheckbox (флажок-картинка)
- Загрузка файлов, картинок
- Работа с SQL
- HOWTO JS
- HOWTO Верстка
- Решение проблем
Выгода от использования Falcon Space
В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
- Шаг 1. Создать концепт проекта
- Шаг 2. Получить оценку бюджета (КП)
- Шаг 3. Заключить договор
- Шаг 4. Создать совместно техническое задание
- Шаг 5. Поэтапная реализация проекта