• Главная
    • /
  • Блог
    • /
  • Создайте простую систему проверки телефона с помощью Twilio, PHP, MySQL и jQuery

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

  1. Основные шаги
  2. Шаг ноль: настройка базы данных MySQL
  3. Шаг первый: веб-страница подтверждения
  4. Шаг второй: Генерация и отображение случайного кода
  5. Шаги 3 и 4: соберите и подтвердите код по телефону
  6. Шаг пятый: обновите веб-страницу после подтверждения номера
  7. Узнайте больше о проверке телефона
  8. Это все, ребята!

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

Ниже мы пройдемся по коду, но если у вас есть существующий MAMP среда или эквивалент вы можете скачать полный пример здесь и начать. Чтобы запустить этот пример на своем собственном сервере, обновите настройки базы данных в database.php и настройки своей учетной записи Twilio в call.php. Этот пример также использует наш Twilio PHP Helper библиотека установлен через Композитор ,

Основные шаги

  1. Пользователь посещает веб-страницу подтверждения и вводит номер телефона.
  2. Случайный код проверки генерируется, и пользователю вызывается и предлагается ввести код.
  3. Если код введен неправильно, повторите запрос на ввод кода.
  4. Если код введен правильно, обновите базу данных.
  5. Обновите веб-страницу сообщением о состоянии.

Шаг ноль: настройка базы данных MySQL

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

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

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


На этой странице вы захотите создать новую базу данных, я назвал ее проверкой и установил для Collation значение utf8_general_ci. Затем мы настроим схему базы данных с одной таблицей, называемой числами.

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

- - Структура таблицы для таблицы `numbers` - СОЗДАЙТЕ ТАБЛИЦУ, ЕСЛИ НЕ СУЩЕСТВУЕТ` numbers` (`id` int (11) NOT NULL AUTO_INCREMENT,` phone_number` varchar (50) DEFAULT NULL, `verify_code` int (11) DEFAULT NULL, `Verified` tinyint (1) NOT NULL ПО УМОЛЧАНИЮ 0, ПЕРВИЧНЫЙ КЛЮЧ (` id`)) ENGINE = MyISAM CHARSET ПО УМОЛЧАНИЮ = latin1 AUTO_INCREMENT = 1;

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

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

<? php function setupDatabase () {// поместите информацию о вашей базе данных, упомянутую выше здесь $ username = 'root'; $ password = 'root'; $ host = 'localhost'; $ dbname = 'verify'; try {$ pdo = new PDO ("mysql: host = $ host; dbname = $ dbname", $ username, $ password); $ pdo -> setAttribute (PDO :: ATTR_ERRMODE, PDO :: ERRMODE_EXCEPTION); } catch (PDOException $ e) {return 'ERROR:'. $ e -> getMessage (); } return $ pdo; } // пытается удалить существующие записи и // сохранить проверочный код в БД с помощью функции номера телефона updateDatabase ($ phoneNumber, $ code) {$ pdo = setupDatabase (); if (! is_a ($ pdo, 'PDO')) {echo 'PDO is false'; вернуть $ pdo; } // Предположим, код страны США, например, $ params = ['phoneNumber' => '1'. $ phoneNumber]; try {$ stmt = $ pdo -> prepare ("УДАЛИТЬ ИЗ номеров, ГДЕ phone_number =: phoneNumber"); $ stmt -> execute ($ params); $ params ['code'] = $ code; $ stmt = $ pdo -> prepare ("ВСТАВИТЬ INTO номера (номер_телефона, код подтверждения) ЗНАЧЕНИЯ (: номер_телефона,: код)"); $ stmt -> execute ($ params); } catch (PDOException $ e) {return 'ERROR:'. $ e -> getMessage (); } вернуть $ код; } function matchVerificationCode ($ phoneNumber, $ code) {$ pdo = setupDatabase (); if (! is_a ($ pdo, PDO :: class)) {echo 'ОШИБКА: PDO является ложным'; вернуть 'ОШИБКА: PDO является ложным'. $ pdo; } $ params = ['phoneNumber' => $ phoneNumber]; try {$ stmt = $ pdo -> prepare ("SELECT * FROM numbers WHERE phone_number =: phoneNumber"); $ stmt -> execute ($ params); $ result = $ stmt -> fetch (); $ response = 'непроверенный'; if ($ result ['valid_code'] == $ code) {$ stmt = $ pdo -> prepare ("УСТАНОВЛЕНО ОБНОВЛЕНИЯ номеров = 1 ГДЕ phone_number =: phoneNumber"); $ stmt -> execute ($ params); $ response = 'проверено'; } return $ response; } catch (PDOException $ e) {return 'ERROR:'. $ e -> getMessage (); }} функция statusIs ($ phoneNumber) {$ pdo = setupDatabase (); if (! is_a ($ pdo, 'PDO')) {echo 'PDO is false'; вернуть $ pdo; } $ params = ['phoneNumber' => $ phoneNumber]; try {$ stmt = $ pdo -> prepare ("SELECT * FROM numbers WHERE phone_number =: phoneNumber"); $ stmt -> execute ($ params); $ result = $ stmt -> fetch (PDO :: FETCH_ASSOC); if ($ result ['Verified'] == 1) {return 'Verified'; } вернуть 'непроверенный'; } catch (PDOException $ e) {return 'ERROR:'. $ e -> getMessage (); }}

Шаг первый: веб-страница подтверждения

Начнем с HTML, который увидит пользователь. Создайте файл с именем index.php и добавьте следующий код в:

<! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http- equ = "Content-Type" content = "text / html; charset = utf-8"> <title> Проверка телефона по Twilio </ title> <script type = "text / javascript" src = "https: // ajax. googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js "> </ script> <script type =" text / javascript "src =" main.js "> </ script> </ head> <body> <div id = "errors"> </ div> <form id = "enter_number"> <p> Введите свой номер телефона: </ p> <p> <input type = "text" name = "phone_number" id = "номер_телефона" /> </ p> <p> <input type = "submit" name = "submit" value = "Verify" /> </ p> </ form> <div id = "verify_code" style = "display: none;"> <p> Звоню вам сейчас. </ p> <p> При появлении запроса введите проверочный код: </ p> <h1 id = "valid_code"> </ h1> <p> <strong id = "status"> Ожидание ... </ strong> </ p> </ div> </ body> </ html>

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

$ (document) .ready (function () {$ ("# enter_number"). submit (function (e) {e.preventDefault (); initiateCall ();});}); function initiateCall () {$ .post ("call.php", {phone_number: $ ("# phone_number"). val ()}, null, "json") .fail (function (data) {showErrors (data.errors) );}) .done (function (data) {showCodeForm (data.verification_code);}); проверить состояние(); } function showErrors (errors) {$ ("# errors"). text (code); } function showCodeForm (code) {$ ("# valid_code"). text (code); $ ( "# Verify_code") FadeIn (). $ ( "# Enter_number") Затухание (). } function checkStatus () {$ .post ("status.php", {phone_number: $ ("# phone_number"). val ()}, function (data) {updateStatus (data.status);}, "json") ; } function updateStatus (current) {if (current === "unverified") {$ ("# status"). append ("."); setTimeout (checkStatus, 3000); } else {success (); }} function success () {$ ("# status"). text ("Verified!"); }

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

&lt;? php require ("database.php"); // требуется запрос POST if ($ _SERVER ['REQUEST_METHOD']! = "POST") die; // предполагая код страны США, например, $ json ["status"] = statusIs ('1'. $ _POST ["phone_number"]); заголовок ('Content-type: application / json'); echo (json_encode ($ json)); ?>

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

Шаг второй: Генерация и отображение случайного кода

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

композитор требует twilio / sdk

Вы также захотите заменить переменные $ accountSid, $ authToken, $ outgoingNumber и $ endPoint своей собственной информацией.

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

&lt;? php требуют __DIR__. '/vendor/autoload.php'; require ("database.php"); использовать TwilioRestClient; function returnError ($ error) {$ json = array (); $ json ["error"] = $ error; заголовок ('Content-type: application / json'); http_response_code (500); echo (json_encode ($ json)); } function makeCall ($ submitNumber, $ code) {// поместите сюда информацию о вашем проекте $ accountSid = "YOUR_ACCOUNT_SID"; $ authToken = "YOUR_AUTH_TOKEN"; $ outgoingNumber = 'YOUR_TWILIO_NUMBER'; $ endPoint = "YOUR_URL / twiml.php"; // Создание нового клиента Twilio Rest $ client = new Client ($ accountSid, $ authToken); try {// инициирование телефонного звонка через Twilio REST API $ client -> account -> звонки -> create ($ submitNumber, // номер телефона, на который вы хотите набрать $ outgoingNumber, // проверенный идентификатор исходящего звонящего или номер Twilio ["url "=> $ endPoint] // URL-адрес twiml.php на вашем сервере); } catch (Exception $ e) {returnError ($ e -> getMessage ()); } // возвращаем код подтверждения в виде JSON $ json = array (); $ json ["valid_code"] = $ code; заголовок ('Content-type: application / json'); echo (json_encode ($ json)); } // требуется запрос POST if ($ _SERVER ['REQUEST_METHOD']! = "POST") die; // сохраняем код подтверждения в БД с номером телефона // сначала пытаемся удалить существующие записи $ submitNumber = $ _POST ["phone_number"]; $ code = rand (100000, 999999); $ updateError = updateDatabase ($ submitNumber, $ code); if (strpos ($ updateError, 'ERROR:')! == false) {returnError ($ updateError); } else {makeCall ($ submitNumber, $ code); }

Шаги 3 и 4: соберите и подтвердите код по телефону

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

&lt;? php требуют __DIR__. '/vendor/autoload.php'; require ("database.php"); использовать TwilioTwiml; $ response = новый Twiml; if (empty ($ _POST ["Digits"])) {$ собираются = $ response -> собираются (['input' => 'dtmf', 'timeout' => 10, 'numDigits' => 6]); $ collect -> say ("Пожалуйста, введите код подтверждения."); } else {// захватить номер телефона вызывающего абонента и ввести код вызывающего абонента $ submitNumber = ltrim ($ _POST ["Called"], ''); $ submitCode = $ _POST ["Digits"]; // сверяем код и номер телефона с записью базы данных $ match = matchVerificationCode ($ submitNumber, $ submitCode); if ($ match == 'Verified') {$ response -> say ("Спасибо! Ваш номер телефона был подтвержден."); } else {$ collect -> say ("Неверный код подтверждения, повторите попытку."); }} header ('Content-Type: text / xml'); echo $ response?>

Шаг пятый: обновите веб-страницу после подтверждения номера

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

Узнайте больше о проверке телефона

Документация: Аутентификация для двухфакторной аутентификации
Сообщение блога: Проверка телефона с помощью SMS в Rails 4 с AJAX и Twilio
Сообщение блога: Как построить двухфакторную аутентификацию на основе телефона
Сообщение блога: Двухфакторная аутентификация по телефону - лучший способ сохранить безопасность
Сообщение блога: Ключ к проверке телефона - хороший пользовательский опыт

Это все, ребята!

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

Если у вас есть какие-либо вопросы или идеи для вашего следующего проекта, пожалуйста найди нас в твиттере или по электронной почте [email protected] ,

Lt;?
Lt;?
Lt;?