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

В 2-3 раза экономнее и быстрее, чем заказная разработка
Более гибкая, чем коробочные решения и облачные сервисы
Используйте готовые решения и изменяйте под свои потребности
Нужна бесплатная консультация?
Планируете делать веб-проект?
Сайт использует Cookie. Правила конфиденциальности OK