Двухфакторная аутентификация на wix

Добавьте двухфакторную аутентификацию на свой сайт с помощью кода Wix Velo.

Описание функционала

В этом примере мы использовали пакет 2-Factor Authentication Twilio Integration Velo, чтобы добавить дополнительный уровень безопасности в процессе входа пользователей. Этот функционал позволяет вам проверять личность участника, входящего на ваш сайт. В дополнение к электронной почте и паролю участники сайта должны ввести код, отправленный на их телефон при входе в систему. Номер телефона привязывается к участнику сайта во время регистрации на сайте.

Смотреть Пример

Как реализовать функционал на Wix?

Мы установили пакет Velo (wix-members-2fa-twilio) на сайт и выполнили шаги, описанные в разделе «Установка» файла readme пакета.

Открыть в Редакторе >

Элементы страницы

Мы добавили лайтбокс для регистрации/входа на сайт. Лайтбокс содержит поле с несколькими состояниями для переключения между состояниями регистрации и входа в систему. Лайтбокс включает в себя следующие элементы:

01. Состояние регистрации: видимые элементы

• для ввода текста: электронная почта, пароль, номер телефона

• раскрывающийся список: для выбора кода страны

• кнопка отправки

• текстовый элемент: ссылка на страницу входа для уже зарегистрированных посетителей сайта

02. Состояние регистрации: свернутые элементы

• ввод текста: для ввода кода подтверждения

• кнопка регистрации

• 2 текстовых элемента: для сообщений об ошибках и для повторной отправки кода подтверждения по телефону

03. Состояние входа: видимые элементы

• 2 текстовых ввода: электронная почта и пароль

• кнопка отправки

• текстовый элемент: ссылки на страницу регистрации для новых посетителей сайта

04. Состояние входа: свернутые элементы

• ввод текста: для ввода кода подтверждения

• кнопка входа

• 2 текстовых элемента: для сообщений об ошибках и для повторной отправки кода подтверждения по телефону

Код для лайтбокса

Мы добавили следующий код в наш лайтбокс:

1. Импортируйте функцию initPage() из пакета.

2. Установите названия для всех компонентов страницы (элементов). Обязательно используйте точные имена, используемые в общедоступном файле пакета init-page.js.

3. Вызовите функцию initPage() с псевдонимами компонентов.

Скопируйте код