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

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

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

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

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




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

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

пакет wix кода для двухфакторной аутентификации


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


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

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

Элементы страницы при двухфакторной аутентификации

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

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

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

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

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

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

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

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

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




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

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

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

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

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

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

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

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

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

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

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

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

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

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