Часть третья: Проверка номеров телефонов с помощью Node.js, Twilio SMS, Express и Socket.io

Каждая задача, которую вы решаете как разработчик веб-приложений, требует особого набора инструментов. Инструментов, которые были приобретены за долгую карьеру.

Node.js — одна из последних платформ, ставшая популярным дополнением к современному веб-стеку. Она позволяет легко создавать легковесные, событийно-ориентированные приложения, способные обрабатывать большое количество одновременных операций ввода-вывода.

Мы уже помогали вам создавать системы проверки телефонов для защиты ваших PHP и Ruby-приложений, но теперь вы можете использовать те же методы для защиты своих новых приложений на Node.js, чтобы быть уверенными, что пользователь, с которым вы взаимодействуете, всегда ожидаемый. Каждый раз, когда вы взаимодействуете с пользователем через его номер телефона, вам нужен способ подтвердить его личность. Подтверждение того, что пользователь действительно владеет номером телефона, который он указал в вашем сервисе, помогает снизить уровень мошенничества и спама. Проверка номера также гарантирует, что пользователь не допустил ошибку при вводе номера телефона во время регистрации.

В этой статье мы создадим систему проверки телефона через SMS с использованием Node.js, Express и Socket.io. В отличие от предыдущих уроков в этой серии, данный будет использовать веб-сокеты, чтобы позволить пользователю плавно взаимодействовать с приложением без перезагрузки страницы или жёстких обновлений и перенаправлений.

Мы разберём весь пример приложения по частям, но если вы хотите загрузить полный пример, вы можете найти его на Github здесь. Это приложение будет работать в вашей локальной среде, но вы также можете развернуть его на выбранной вами платформе для хостинга Node.js или использовать наши методы для интеграции в своё производственное приложение.

Первое, что мы сделаем, — настроим базовое приложение на Node.js. Нам нужно создать директорию для данных, директорию для представлений и файл package.json со следующим содержимым:

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

— Socket.io — самый простой способ работы с веб-сокетами в Node.js, который позволяет легко добавлять взаимодействие в реальном времени в наши приложения.

— Twilio позволяет легко взаимодействовать с REST API Twilio без необходимости вручную создавать HTTP-запросы.

— Express — легковесный фреймворк для веб-приложений на Node.js и самый популярный веб-фреймворк для этой платформы.

— Jade — простой шаблонизатор, хорошо интегрирующийся с Express.

— nstore — простая база данных для Node.js, подходящая для целей этого урока, но в производственном приложении мы рекомендуем использовать более зрелые базы данных, такие как MongoDB или PostgreSQL.

speakeasy (https://github.com/markbao/speakeasy) упрощает генерацию одноразовых паролей с использованием Node.js.

После настройки файла package.json выполните команду npm install в терминале, чтобы установить все необходимые модули. Затем мы можем начать писать код!

В созданной ранее папке views создайте новый файл index.jade — это будет одностраничное представление для нашего приложения. Оно написано на шаблонизаторе Jade, который является простым способом создания шаблонов в Node.js. Наш файл довольно простой: мы начинаем с блока заголовка, содержащего весь необходимый JavaScript для приложения:

Затем мы завершаем файл блоком body, содержащим все необходимые поля формы:

Наша форма устроена довольно просто. Сначала мы показываем пользователю регистрационную форму с скрытой формой проверки на заднем плане. Наш JavaScript-код устанавливает соединение с сервером веб-сокетов Socket.io и настраивает ряд обработчиков для различных событий Socket.io, а также событий, инициированных пользователем. Socket.io предоставляет очень простой API для работы с веб-сокетами, что позволяет легко организовать взаимодействие в реальном времени между клиентом и сервером. Мы привязываем действия к событиям от сервера с помощью socket.on и отправляем события, которые слушает сервер, с помощью socket.emit.

Когда пользователь нажимает кнопку «Зарегистрироваться», мы отправляем номер телефона, который он ввёл, на сервер. Сервер отвечает событием code_generated, которое скрывает регистрационную форму и отображает форму проверки. Когда пользователь вводит код проверки и нажимает «Подтвердить», мы отправляем код на сервер и ждём события verified в ответ.

У нас также есть два вспомогательных события: reset и update. reset возвращает форму в исходное состояние, а update изменяет сообщение предупреждения, отображаемое пользователю. Вот и всё для нашего представления — оно очень простое и умещается на одной странице!

Теперь перейдём к основной части приложения, где мы взаимодействуем с Twilio, нашим хранилищем данных и клиентским приложением через Socket.io. Первым делом создадим файл app.js и добавим в него следующий код:

Этот код подключает все необходимые модули, загружает базу данных и запускает новый веб-сервер на порту 3000 с одним маршрутом — /, который рендерит наш шаблон Jade.

Далее мы настраиваем несколько базовых функций для нашего приложения: createUser и checkVerified.

Функция createUser принимает номер телефона, код проверки и объект сокета. Затем мы пытаемся сохранить новую запись в базе данных и отправить SMS с кодом проверки на указанный номер телефона. Мы также отправляем пользователю ошибку, если не удалось отправить SMS на его номер.

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

Теперь перейдём к коду обработки сокетов:

После успешного установления соединения веб-сокета с клиентом мы регистрируем обработчики для двух событий: register и verify.

Событие register принимает номер телефона от клиента, генерирует одноразовый пароль с помощью модуля speakeasy и ищет номер телефона в нашем хранилище данных. Если номер не существует, мы пытаемся создать новую запись в базе данных. Если он существует, мы показываем предупреждение о том, что пользователь уже запросил код проверки или, альтернативно, что он уже успешно подтвердил свой номер.

Событие verify принимает номер телефона и код от клиента. Мы ищем номер телефона в базе данных и выбрасываем ошибку, если код ещё не был запрошен. Если код уже был запрошен, мы проверяем, подтвердил ли пользователь свой номер. Если нет, мы проверяем правильность кода, обновляем запись в базе данных и сообщаем пользователю об успешной проверке номера. Если код неверный, мы уведомляем об этом пользователя и позволяем ему ввести его повторно.

В целом, это довольно простой и надёжный пример того, как подтвердить номер телефона пользователя с помощью Twilio SMS и Node.js.

Чтобы запустить приложение, вам нужно определить необходимые переменные окружения: account_sid, auth_token и twilio_number — все они доступны в панели управления вашего аккаунта Twilio, и вы можете задать их в своей системе с помощью следующих команд:

Затем вы можете запустить приложение командой node app и открыть в браузере http://localhost:3000/, чтобы протестировать его!

Если вы хотите увидеть полный работающий пример, вы можете найти его на Github.

Если у вас есть вопросы или комментарии, напишите в Twitter @jonmarkgo или отправьте письмо на jonmarkgo@twilio.com!