Формы. Как сделать подтверждение действия в СМС (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

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

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

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.
Сайт использует Cookie. Правила конфиденциальности OK