Как использовать API проверки Nexmo и API сообщений в нативном React

В этом руководстве мы собираемся реализовать процесс проверки в нашем приложении React Native. Для процесса проверки мы собираемся использовать Nexmo для проверки API и API сообщений с помощью React Native. Nexmo — это платформа, предоставляющая полный спектр услуг по проверке. Они помогают развернуть масштабируемое решение для проверки без ущерба для удобства пользователей. этот урок вдохновлен Шаблон приложения React Native Social Chat

В настоящее время пользователь может зарегистрироваться и использовать приложение мгновенно. Теперь мы собираемся добавить страницу подтверждения после успешной регистрации пользователя. Во-первых, мы собираемся создать приложение Nexmp для проверки и API сообщений. Затем мы собираемся создать сервер проверки с помощью codeandbox. Наконец, мы настроим эти API проверки и сервер на логику нашего приложения React Native и протестируем результат.

Подготовьте приложение Nexmo

Во-первых, мы собираемся создать приложение Nexmo и настроить его. Чтобы создать приложение Nexmo, нам нужно перейти в Панель разработчика Nexmo и войдите в систему. Если у нас нет учетной записи, нам нужно зарегистрироваться на платформе Nexmo, что довольно просто. Ниже мы видим интерфейс входа в систему Nexmo, через который мы можем зарегистрироваться, а также войти в систему.

После успешной регистрации и входа в платформу Nexmo мы будем перенаправлены на панель инструментов Nexmo, как показано на скриншоте ниже:

В меню ящика панели инструментов мы видим параметр «Сообщения и отправка», который можно свернуть в дополнительные параметры подменю.

Среди вариантов нам нужно нажать «Создать приложение», чтобы создать приложение Nexmo. Затем нам нужно указать имя приложения, например, «nexmo test app». После этого мы видим кнопку «Создать пару открытого/закрытого ключа» внизу на скриншоте ниже. Нам нужно щелкнуть по нему, чтобы сгенерировать ключ, который предоставляет нам закрытый ключ, чтобы использовать его для подключения к серверу Nexmo. Затем нам нужно сохранить этот закрытый ключ в нашем локальном каталоге, чтобы использовать его позже при создании нашего сервера. Ключевой файл здесь называется jwtRS256.key.

Конфигурации приложения Nexmo

Теперь нам нужно заполнить URL-адрес веб-перехватчика для получения статуса от сервера Nexmo, как показано на снимке экрана ниже:

Затем нам нужно нажать «Создать приложение» в правом нижнем углу, что предоставит нам приложение Nexmo с именем «nexmo test app», как показано во фрагменте кода ниже:

Как видно на скриншоте выше, мы успешно создали приложение Nexmo со всеми необходимыми настройками. Теперь мы создаем сервер в codeandbox, который обрабатывает API проверочных сообщений с помощью сгенерированного нами ключа.

Создание сервера

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

Во-первых, нам нужно перейти к кодыпесочницакоторый представляет собой онлайн-редактор или IDE для кодирования и создания демонстраций. Здесь нам нужно войти в учетную запись codeandbox, используя нашу учетную запись GitHub. Затем нам нужно перейти на нашу панель инструментов и создать песочницу, нажав «Создать песочницу», которая откроет диалоговое окно, как показано на снимке экрана ниже:

В диалоговом окне, показанном на снимке экрана выше, выберите «Узел» в качестве конфигурации. Затем он загрузит шаблон для сервера Node.js со всеми уже настроенными файлами, как показано на снимке экрана редактора ниже:

Настройка зависимостей

Теперь мы видим, что в меню слева есть раскрывающийся список «Зависимости». У него есть возможность добавить необходимые зависимости в наш проект Node. Итак, нам нужно нажать кнопку «Добавить зависимость» в раскрывающемся списке «Зависимости», которая откроет диалоговое окно со списком зависимостей, как показано на снимке экрана ниже:

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

Не забудьте установить все пакеты, показанные на скриншоте выше.

Затем нам нужно добавить закрытый ключ, который мы сгенерировали в нашем приложении Nexmo и загрузили в наш локальный каталог как jwtRS256.keyв наш проект Node, как показано на скриншоте ниже:

Чтобы добавить файл ключа, нам просто нужно щелкнуть значок «файл» в параметрах заголовка файла «src», перейти в каталог, в который мы загрузили ключ, а затем дважды щелкнуть файл ключа для добавления.

Теперь пришло время заняться кодированием.

Импорт и конфигурации

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

const express = require("express"); 
var bodyParser = require("body-parser"); 
const app = express(); 
const Nexmo = require("nexmo"); 
const cors = require("cors"); 
const path = require("path");