Создание простой системы проверки телефона с помощью Twilio, PHP, MySQL и jQuery

Проверка номеров телефонов ваших пользователей — это быстрый и эффективный способ снизить количество мошеннических и спам-аккаунтов. В этой статье мы расскажем, как создать такую систему с использованием Twilio Voice, PHP 7, MySQL 5.x и jQuery.

Ниже мы подробно разберем код, но если у вас уже настроена среда MAMP или аналогичная, вы можете скачать готовый пример здесь и сразу приступить к работе. Чтобы запустить этот пример на своем сервере, обновите настройки базы данных в файле `database.php` и настройки аккаунта Twilio в файле `call.php`. В этом примере также используется библиотека Twilio PHP Helper, установленная через Composer.

— Пользователь заходит на страницу проверки и вводит номер телефона.

— Генерируется случайный код подтверждения, и пользователю поступает звонок с просьбой ввести код.

— Если код введен неверно, система предлагает ввести его повторно.

— Если код введен правильно, обновляется база данных.

— На веб-странице отображается статусное сообщение.

Если у вас уже настроена MySQL, пропустите этот шаг. Мы будем управлять базой данных MySQL через MAMP. После установки и настройки графического интерфейса вы сможете получить доступ к серверу по адресу `localhost:8888` или другому порту, указанному в MAMP.

Примерно так это выглядит:

Сохраните значения `Host`, `User` и `Password` для дальнейшего использования. Затем вы можете перейти в интерфейс phpMyAdmin, нажав на соответствующую ссылку, где мы выполним следующие шаги.

На этой странице нужно создать новую базу данных. Я назвал её `verify` и установил кодировку `utf8_general_ci`. Затем мы настроим схему базы данных с одной таблицей под названием `numbers`.

Мы будем хранить номер телефона и сгенерированный код подтверждения в базе данных MySQL, чтобы позже обновлять информацию о проверенных пользователях и извлекать её. Для этого примера есть простое определение таблицы, которое можно сохранить в файле `dbschema.sql` и добавить напрямую через интерфейс phpMyAdmin. Скопируйте и вставьте приведенный ниже код во вкладку SQL, как показано на скриншоте.

Убедитесь, что все файлы, созданные для этой статьи, сохранены в папке MAMP `htdocs`. Полный путь должен выглядеть как `Applications/MAMP/htdocs`.

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

Когда пользователь заходит на страницу, ему отображается форма для ввода номера телефона. Обратите внимание, что в этом примере мы не проверяем формат номера телефона, но в рабочей среде следует убедиться, что номер соответствует формату E.164. После ввода формы она скрывается, и пользователю показывается его код подтверждения. Вот jQuery-код, необходимый для этого перехода, который указан в `main.js` выше:

Наша функция `initiateCall()` запускает AJAX-запрос для генерации случайного кода и начала звонка, что мы рассмотрим позже. Как только код получен, мы обновляем интерфейс, чтобы показать его пользователю, и начинаем опрашивать базу данных для получения обновлений статуса. Код для опроса сервера выглядит так в файле `status.php`:

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

Второй шаг нашего руководства пересекается с первым, так как он начинается, когда пользователь отправляет форму с номером телефона. Мы продолжим с функции `initiateCall()`, которая отправляет AJAX POST-запрос на `call.php`. Внутри `call.php` генерируется случайный 6-значный код подтверждения, и начинается звонок через Twilio REST API с использованием библиотеки PHP Helper. Если вы еще этого не сделали, сейчас самое время выполнить следующую команду в директории вашего проекта:

Также замените переменные `$accountSid`, `$authToken`, `$outgoingNumber` и `$endPoint` на свои данные.

После получения кода подтверждения мы отправляем его обратно в формате JSON для разбора браузером.

При инициализации звонка мы указываем Twilio использовать файл `twiml.php`, который генерирует необходимый TwiML с тегом `` для запроса ввода кода у звонящего. При первом запросе этого файла мы просим звонящего ввести код. После ввода 6 цифр Twilio отправляет еще один POST-запрос на тот же URL с параметром `Digits`. С этой информацией мы ищем номер телефона звонящего в базе данных и проверяем совпадение. Если код введен неверно, мы просим ввести его снова. После правильного ввода кода обновляем базу данных и благодарим за звонок.

В первом шаге мы создали jQuery-код для начала опроса сервера на обновления статуса. Наша функция `checkStatus()` отправляет POST-запрос на `status.php`, который ищет номер телефона в базе данных и возвращает JSON с информацией о статусе проверки.

Документация: Authy для двухфакторной аутентификации

Статья: Проверка телефона через SMS в Rails 4 с использованием AJAX и Twilio

Статья: Как создать телефонную двухфакторную аутентификацию

Статья: Телефонная двухфакторная аутентификация — лучший способ оставаться в безопасности

Статья: Ключ к проверке телефона — хороший пользовательский опыт

Мы справились! Простая проверка телефона выполнена. Большое спасибо Джонатану Готтфриду за вдохновение этой статьей в её первоначальном виде. И отдельное спасибо моей коллеге Маргарет Стэплс за её экспертные знания в PHP.

Если у вас есть вопросы или идеи для следующего проекта, свяжитесь с нами в Twitter или напишите на mspeir@twilio.com.