Добавьте двухфакторную аутентификацию на свой сайт с помощью кода 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() с псевдонимами компонентов.

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

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);
})
← Все руководства по WixНайти другой материал →