Добавьте двухфакторную аутентификацию на свой сайт с помощью кода Wix Velo.
Описание функционала
В этом примере мы использовали пакет 2-Factor Authentication Twilio Integration Velo, чтобы добавить дополнительный уровень безопасности в процессе входа пользователей. Этот функционал позволяет вам проверять личность участника, входящего на ваш сайт. В дополнение к электронной почте и паролю участники сайта должны ввести код, отправленный на их телефон при входе в систему. Номер телефона привязывается к участнику сайта во время регистрации на сайте.
Как реализовать функционал на Wix?
Мы установили пакет Velo (wix-members-2fa-twilio) на сайт и выполнили шаги, описанные в разделе «Установка» файла readme пакета.
Элементы страницы
Мы добавили лайтбокс для регистрации/входа на сайт. Лайтбокс содержит поле с несколькими состояниями для переключения между состояниями регистрации и входа в систему. Лайтбокс включает в себя следующие элементы:
01. Состояние регистрации: видимые элементы
для ввода текста: электронная почта, пароль, номер телефона
раскрывающийся список: для выбора кода страны
кнопка отправки
текстовый элемент: ссылка на страницу входа для уже зарегистрированных посетителей сайта
02. Состояние регистрации: свернутые элементы
ввод текста: для ввода кода подтверждения
кнопка регистрации
2 текстовых элемента: для сообщений об ошибках и для повторной отправки кода подтверждения по телефону
03. Состояние входа: видимые элементы
2 текстовых ввода: электронная почта и пароль
кнопка отправки
текстовый элемент: ссылки на страницу регистрации для новых посетителей сайта
04. Состояние входа: свернутые элементы
ввод текста: для ввода кода подтверждения
кнопка входа
2 текстовых элемента: для сообщений об ошибках и для повторной отправки кода подтверждения по телефону
Код для лайтбокса
Мы добавили следующий код в наш лайтбокс:
Импортируйте функцию initPage() из пакета.
Установите названия для всех компонентов страницы (элементов). Обязательно используйте точные имена, используемые в общедоступном файле пакета init-page.js.
Вызовите функцию initPage() с псевдонимами компонентов.
Скопируйте код