- Julia Sememova
Двухфакторная аутентификация на wix
Добавьте двухфакторную аутентификацию на свой сайт с помощью кода 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() с псевдонимами компонентов.
Скопируйте код
import { initPage } from '@velo/wix-members-2fa-twilio';
// ID: A0A42897CC4547C1ECF9369807C94225
$w.onReady(function () {
const components = {
stateBox: $w('#stateBox'),
countriesDropdown: $w('#countriesDropdown'),
phoneInput: $w('#phoneInput'),
registerPassInput: $w('#registerPassInput'),
registerEmailInput: $w('#registerEmailInput'),
registerConfirmCodeInput: $w('#registerConfirmCodeInput'),
registerErrMsgText: $w('#registerErrMsgText'),
submitRegistrationButton: $w('#submitRegistrationButton'),
registerCallMeText: $w('#registerCallMeText'),
registerButton: $w('#registerButton'),
registerLoadingIndicator: $w('#registerLoadingIndicator'),
notRegisteredText: $w('#notRegisteredText'),
submitLoginButton: $w('#submitLoginButton'),
loginCallMeText: $w('#loginCallMeText'),
loginButton: $w('#loginButton'),
loginErrMsgText: $w('#loginErrMsgText'),
loginEmailInput: $w('#loginEmailInput'),
loginPassInput: $w('#loginPassInput'),
loginConfirmCodeInput: $w('#loginConfirmCodeInput'),
loginLoadingIndicator: $w('#loginLoadingIndicator'),
alreadyRegisteredText: $w('#alreadyRegisteredText'),
resetPass: $w('#resetPassText'),
}
initPage(components);
})