Введение

В этой статье будут рассмотрены основы аутентификации на основе телефонных номеров с использованием React и Altogic, платформы бэкенд как услуга, использующей ее клиентскую библиотеку. Вы можете проверить репозиторий Github.

Итак, что такое аутентификация по номеру телефона?

Пользователи могут зарегистрироваться в приложении, указав только свой номер телефона и пароль. Этот метод аутентификации не требует от пользователей указания своих адресов электронной почты. Таким образом, пользователи могут войти в приложение, используя свой номер телефона и пароль, который они установили при регистрации.

При аутентификации по номеру телефона приложение отправит пользователю SMS-код через Twilio. После того, как пользователи получат SMS-сообщение от провайдера, они могут использовать этот код для подтверждения своего номера телефона.

Также можно настроить систему аутентификации через других поставщиков, таких как MessageBird и Vonage.

В оставшейся части статьи я объясню, как работает аутентификация по телефону, и настрою аутентификацию по номеру телефона в веб-приложении, используя клиентскую библиотеку Allogic и React в качестве внешнего интерфейса.

Как работает аутентификация по номеру телефона?

Аутентификация по номеру телефона состоит из нескольких шагов:

  1. Пользователи могут ввести свой номер телефона и пароль на странице регистрации.
  2. Затем система отправит SMS на указанный номер телефона с помощью Twilio.
  3. После того, как пользователь вводит проверочный код в SMS, система завершает проверку номера телефона.
  4. Пользователи смогут войти двумя способами:
     – Войти, используя учетные данные: пароль и номер телефона.
     – Войти с помощью одноразовых паролей (OTP), при этом OTP отправляется в виде SMS-сообщения.

OTP: автоматически сгенерированный пароль аутентифицирует пользователя для одного сеанса.

Разработчики могут настроить либо срок действия проверочного кода, либо продолжительность пользовательского сеанса.

Как настроить аутентификацию по номеру телефона с помощью Allogic?

Создание приложения в Altogic

Чтобы включить аутентификацию по номеру телефона, нам нужно создать приложение в Altogic.

Мы можем создать приложение с помощью Altogic Designer очень быстро. Чтобы создать приложение через Дизайнер:

  1. Войдите в Altogic, используя свои учетные данные.
  2. Выберите Новое приложение.
  3. В поле Имя приложения введите имя приложения.
  4. И нажмите создать.

Здесь вы можете настроить свой поддомен, но это не обязательно, Altogic автоматически создаст его для вас,который будет вашим envUrl. Вам не нужно беспокоиться, если вы потеряли свой envUrl; вы можете получить его в представлении Среды в Designer.

После создания нашего приложения нам нужны envUrl и clientKey для доступа к нашему приложению через клиентскую библиотеку Allogic для создания веб-приложения.

Чтобы получить clientKey, нам нужно войти в приложение, которое мы создали ранее, и;

  1. Нажмите Настройки приложения в левом нижнем углу конструктора.
  2. И нажмите на раздел Ключи клиентской библиотеки.

Мы можем создать новый clientKey с этой страницы, но благодаря Allogic за автоматическое создание одного clientKey для нас, поэтому давайте скопируем существующий clientKey из списка.

Очень круто! Теперь на серверной части все готово, пора продолжить интеграцию с Twilio.

Интеграция с Twilio

Вам необходимо зарегистрироваться в Twilio с бесплатной/платной пробной версией. Вам необходимо получить SID учетной записи и токен аутентификации для интеграции с клиентской библиотекой Allogic.

Если вы будете использовать бесплатную пробную версию, вам нужно будет взять номер телефона Twilio для отправки SMS-сообщений пользователям.

  1. Создайте учетную запись в Twilio
  2. Откройте Консоль.
  3. Нажмите «Получить пробный номер телефона» в левой верхней части консоли.
  4. Скопируйте значения SID учетной записи, Токен аутентификации и Мой номер телефона Twilio в буфер обмена.

Теперь мы скопировали учетные данные конфигурации в буфер обмена. В пробных аккаунтах необходимо указывать проверенные номера телефонов, которые мы определили как «to number» в Altogic.

  1. Нажмите Изучить продукты на левой боковой панели.

2. Убедитесь, что выбраны продукты Обмен сообщениями и Номера телефонов.

Теперь вы можете перейти на страницу Подтвержденные идентификаторы вызывающего абонента, выбрав Боковая панель → Телефонные номера → Управление → Подтвержденные идентификаторы вызывающего абонента.

Здесь вы должны добавить свой номер телефона в качестве проверенного вызывающего абонента.

И, наконец, вы должны дать гео-разрешение для вашего региона телефонных номеров. Вы можете перейти на эту страницу, выбрав Боковая панель → Обмен сообщениями → Настройки → Географические разрешения.

💡 После настройки учетной записи Twilio вам необходимо включить регистрацию на основе номера телефона и пароля в Designer → Настройки приложения → Аутентификация → Аутентификация мобильного телефона → Включить регистрацию на основе номера телефона и пароля в клиентской библиотеке Altogic. >

Вставьте SID учетной записи Twilio, токен аутентификации Twilio и номер телефона Twilio в соответствующие поля.

Фронтенд-разработка

Монтаж

Перед установкой приложения убедитесь, что NodeJS уже установлен в вашей среде разработки.

Установить

💡 Вы можете посетить: https://nodejs.org/en/download/ для загрузки.

Для начала откройте терминал и создайте новый проект React.

// creates a react app with the name of `altogic-react-phone-authentication-tutorial`
npx create-react-app altogic-react-phone-authentication-tutorial

Приведенная выше команда создает проект React в каталоге altogic-react-phone-authentication-tutorial.

cd altogic-react-phone-authentication-tutorial
touch .env

Создайте файл .env в корневом каталоге вашего приложения, откройте файл в редакторе и вставьте следующее.

Замените YOUR-APPLICATION-ENV-URL и YOUR-APPLICATION-CLIENT-KEY на envUrl и clientKey, которые вы скопировали ранее, затем вернитесь к своему терминалу.

Установите клиентскую библиотеку Altogic в наш проект с помощью NPM или Yarn, выполнив следующую команду:

// Installation of Altogic Client Library with NPM
npm i altogic

Затем создайте файл для обработки служб и клиента Allogic.

Вернитесь в свой корневой каталог и следуйте приведенным ниже командам:

cd src
mkdir helpers
cd helpers
touch altogic.js

altogic.js будет создан в каталоге src/helpers. Откройте файл в редакторе и вставьте следующее.

Третий параметр функции createClient signInRedirect автоматически обрабатывает перенаправление на страницу входа, если у вас недействительные токены сеанса или вы вышли из системы. Это полезная функция для управления сеансами в сценариях, когда вы выходите из своего мобильного телефона.

Создание основных компонентов React

Следующим шагом будет создание компонентов, которые нам понадобятся для нашего приложения.

  1. SignIn — Компонент формы, который позволяет пользователю войти в систему.
  2. SignUp — Компонент формы, который позволяет пользователю зарегистрироваться.
  3. Verification — Компонент формы, который проверяет номер телефона.
  4. Home — Компонент, который показывает, была ли аутентификация успешной.
  5. RequiresAuth Компонент-оболочка, который проверяет, аутентифицирован ли пользователь, перед рендерингом компонента; в противном случае он перенаправляет пользователя на страницу регистрации/входа.
  6. RequiresNotAuth — Компонент-оболочка, который проверяет, не аутентифицирован ли пользователь перед рендерингом компонента; в противном случае он перенаправляет пользователя обратно на страницу профиля (например, на страницу входа).
  7. App — Основной компонент приложения. Он отображает все виды с их свойствами.
  8. Sessions — Компонент таблицы, который позволяет пользователю управлять своими сеансами и просматривать их.
  9. Profile — компонент, который пользователи могут просматривать и управлять данными профиля.

переключитесь в корневой каталог вашего реагирующего приложения и выполните следующие команды:

cd src
mkdir pages
cd pages
touch SignIn.js SignUp.js Verification.js Home.js Sessions.js Profile.js

Снова вернемся в каталог src и создадим каталог «components». Мы создадим каталог «Маршруты» в каталоге «компоненты»:

cd ..
mkdir components
cd components
mkdir Routes
cd Routes
touch RequiresAuth.js RequiresNotAuth.js

Это создает каталог страниц с компонентами в каталоге src. Структура вашей папки должна выглядеть примерно так, как показано на скриншоте.

Мы будем использовать React Context API для управления данными пользователя и сеанса и передачи их компонентам, визуализируемым в зависимости от того, аутентифицирован пользователь или нет. Мы также будем использовать React Router для обработки маршрутизации.

Вернитесь в свой корневой каталог и откройте терминал:

cd src
mkdir context
cd context
touch AuthenticationContext.js ModalContext.js CounterContext.js

Чтобы установить React Router, выполните следующую команду.

npm install react-router-dom

Мы будем использовать библиотеку Tailwind CSS и Headless UI для оформления проекта. Выполните следующие команды в корневом каталоге, чтобы установить библиотеку.

npm install -D tailwindcss postcss autoprefixer
npm install @headlessui/react

Команда ниже создаст файл tailwind.config.js:

npx tailwindcss init -p

Откройте tailwind.config.js в редакторе и скопируйте/вставьте следующий скрипт для настройки путей к шаблонам:

Откройте файл index.css в каталоге src и добавьте следующие директивы:

И мы будем использовать Font Awesome Icons в нашем проекте. Вы должны установить библиотеку Font Awesome, чтобы иметь хорошо выглядящие компоненты.

1. Добавьте ядро ​​SVG:

npm i --save @fortawesome/fontawesome-svg-core

2. Добавьте пакеты значков:

npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/free-regular-svg-icons
npm i --save @fortawesome/free-brands-svg-icons

3. Добавьте компонент React

npm i --save @fortawesome/react-fontawesome@latest

Поскольку мы создали приложение для аутентификации на основе номера телефона, нам понадобится поле ввода номера телефона. Мы будем использовать библиотеку react-phone-number-input для улучшения UX.

npm i react-phone-number-input

Наконец все зависимости были установлены на нашей локальной машине. Мы можем запустить наше приложение, набрав npm run start в корневом каталоге. Приступаем к кодированию!

Выполнение

Прежде всего, нам понадобятся некоторые интерфейсные представления и компоненты, такие как;

  • Verification Страница подтверждения номера телефона
  • ResetPassword и ResetPasswordCode Отправляет пользователям SMS для сброса пароля
  • NotVerified Сообщает пользователям, что их номер телефона еще не подтвержден, и повторно отправляет код подтверждения.
  • CounterПростой таймер обратного отсчета для действительности кодов подтверждения
  • Footer, Header, ProfileDropdownПанель навигации и значок в нижнем колонтитуле
  • Notification Информирует пользователей об ответах
  • SessionTable и SessionItem для листинговых сессий
  • ChangeCredentials Структура вкладок для изменения представления для ChangePhone и ChangePassword
  • PrimaryButton и SecondaryButton Пользовательские кнопки

Откройте корневой каталог и скопируйте и вставьте строки одну за другой, чтобы создать файлы.

cd src/components
touch Counter.js Footer.js Header.js Notification.js ProfileDropdown.js SessionItem.js SessionTable.js
mkdir Buttons
mkdir Profile
cd Buttons
touch PrimaryButton.js SecondaryButton.js
cd ../Profile
touch ChangeCredentials.js ChangePhone.js ChangePassword.js

Нам понадобятся два родительских компонента, которые сообщают правила маршрутизации своему дочернему компоненту. Правила означают,

  • Аутентифицированные пользователи не могут просматривать страницы регистрации и входа.
  • Неавторизованные пользователи не могут просматривать страницы профиля и сеансов.

Поскольку у нас есть ограниченные правила, мы разработали специальные компоненты, которые ограничивают дочерние компоненты: RequiresNotAuth и RequiresAuth.

RequiresNotAuth.js

App.js Это будет основной компонент нашего приложения. Все маршруты и представления будут отображаться в компоненте приложения.

Как вы можете видеть в компоненте App.js, у нас есть три разные структуры Provider&Context:

  • AuthenticationProvider: хранит функции и состояния, связанные с аутентификацией, такие как вызов функций клиентской библиотеки Allogic.
  • ModalProvider: управляет потоком push-уведомлений в приложении.
  • CounterProvider: хранит и обрабатывает крайний срок действия кода подтверждения.

Пока я пропускаю реализацию AuthenticationContext, далее мы обсудим «Как построить структуру провайдера контекста и как она работает?».

Поскольку мы создали приложение для аутентификации на основе телефонного номера; нам нужны компоненты SignIn и SignUp для обработки действий формы. Я исключил все функции, которые работают асинхронно из-за алтогических подключений, к контексту аутентификации, чтобы легко управлять им и получать к нему доступ из других компонентов.

Давайте сначала начнем кодировать компонент SignUp. У нас есть структура формы для получения необходимых данных от пользователя. В нижней части структуры формы есть кнопка для управления процессом регистрации. При нажатии на эту кнопку срабатывает функция signup(), определенная в 23-й строке. Здесь мы вызываем функцию context.signup(), определенную в AuthenticationContext. Таким образом, функции Altogic остаются вместе и сохраняются в контексте.

Мы полностью закодировали форму регистрации. Теперь нам нужна форма входа для входа пользователей.

Мы разработали функцию signin() - в строке 24-, которая будет запускаться после того, как пользователь нажмет кнопку. Как и в случае с компонентом SignUp, context.signin() будет запускаться внутри собственной функции компонента.

Мы закончили реализацию страницы регистрации и входа. Поскольку пользователи должны подтвердить свой номер телефона, нам нужно создать компонент Verification, который будет принимать код подтверждения в качестве единственного параметра. Когда вы нажмете на кнопку, будет выполнено verify(), определенное внутри функции. В этой функции мы выполняем функцию context.verifyPhoneNumber() для проверки нашего номера телефона с помощью Altogic.

Общим моментом трех компонентов SignIn, SignUp и Verification является; три из них имеют кнопки, функции и формы внутри компонента. Кроме того, они также импортируют AuthenticationContext в качестве контекста. Я хочу объяснить упрощенный рабочий процесс связи между компонентами и контекстами:

  1. Пользователь нажимает кнопку Войти, Зарегистрироваться, Подтвердить
  2. Нажатие запускает функцию signin(), signup(), verify() внутри компонента
  3. Функция context.signIn() вызывается функцией handleClick()

Контекст аутентификации

Наконец, мы подошли к части Context API. Прежде чем перейти к разделу кодирования, я думаю, что будет очень полезно пройтись по функциям клиентской библиотеки Allogic.

  • altogic.auth.signUpWithPhone(номер телефона, пароль, имя) → принимает 3 параметра (поле имени не является обязательным)
  • altogic.auth.signInWithPhone(phoneNumber, password) → Возвращает ответ пользователя и сеанса, если учетные данные верны
  • altogic.auth.signOut(token) → Удалить данный токен и выйти из связанного сеанса
  • altogic.auth.signOutAll() → Выйти из всех сеансов, связанных с вашей учетной записью
  • altogic.auth.resendVerificationCode(phoneNumber) → повторно отправить код подтверждения, чтобы подтвердить свой номер телефона
  • altogic.auth.changePassword(newPassword, oldPassword) → Изменить пароль
  • altogic.auth.getAllSessions() → Получить список всех активных сеансов с вашей учетной записью
  • altogic.auth.sendResetPwdCode(phoneNumber) → Отправьте код подтверждения на свой номер телефона, если вы забыли свой пароль
  • altogic.auth.resetPwdWithCode(номер телефона,код,пароль) → Сбросить пароль
  • altogic.auth.changePhone(password, phoneNumber) → Функция изменения номера телефона принимает номер телефона и пароль в качестве аргумента
  • altogic.auth.verifyPhone(phoneNumber, code) → Подтвердите номер телефона с помощью кода подтверждения, который приходит на ваш номер телефона

Здесь мы подошли к одному из основных компонентов и структуре приложения, AuthenticationContext созданному с помощью хука useContext(). Контекст используется для создания общих данных, доступных через иерархию компонентов, без передачи свойств каждому компоненту. Например, состояние isAuth хранит логическое значение того, аутентифицирован пользователь или нет. Почти каждый компонент должен использовать состояние isAuth для выполнения своих внутренних функций. Я мог бы передавать реквизиты каждому компоненту, например, от родителя к дочернему элементу. Однако он не является гибким и простым в использовании. Я создал AuthenticationContext для обработки и управления всеми данными и функциями, связанными с аутентификацией.

Я определил все свои функции Altogic и связанные с ними состояния в AuthenticationContext, чтобы распределить их по дочерним компонентам.

БОНУС: ДОПОЛНИТЕЛЬНЫЕ ФУНКЦИИ

Вы можете найти дополнительные функции в общем репозитории. Также вы можете найти все больше и больше функций, запросов к базе данных и т. д. Фактически все, что вам нужно для создания серверного приложения.

  • Загрузить фото профиля
  • Удалить фото профиля
  • Обновите учетные данные (номер телефона и пароль)
  • Список всех сеансов
  • Выход из других сеансов
  • Выйти из всех сессий

Вы можете увидеть список связанных функций Altogic с указанными выше функциями:

Заключение

В этом руководстве мы рассмотрели, как защитить и проверить пользователей в приложении React с помощью Altogic,Twilio и Попутный ветер CSS. Аутентификация по номеру телефона является одним из стандартных методов аутентификации в отрасли. Кроме того, как разработчик с полным стеком, я должен сказать, что создание серверной части приложений для аутентификации на основе телефонных номеров становится настолько запутанным, что справляться с кодированием серверной части и одновременной интеграцией сторонних поставщиков SMS. Allogic предоставляет потрясающие услуги и функции для создания серверного приложения для аутентификации по номеру телефона. Как мы убедились в статье, для создания серверного приложения потребовалось всего несколько строк кода.

Это сверхмощное и простое в реализации приложение должно стать основой для ваших проектов, основанных на телефонных номерах, и вы будете разрабатывать его. Вы должны проверить репозиторий для приложения, которое мы создали на GitHub для получения дополнительной информации.