Añade verificación por SMS en una aplicación React Native usando Node.js y Express

Crear una aplicación móvil conlleva muchos retos. React Native puede aliviar muchos de estos desafíos cuando se trata de compatibilidad cruzada, pero obviamente, todavía hay una cantidad significativa de esfuerzo de ingeniería involucrado en cualquier aplicación. Es posible que desee implementar la autenticación de dos factores (2FA) basada en SMS para bloquear más del 100% de los robos de Account basados en botso incluso integrar una herramienta de marketing del tipo "comparte esta aplicación con tus amigos".

Por suerte, Vonage hace que integrar funciones como estas en tu aplicación sea muy fácil.

¿Qué vamos a crear?

Nuestro objetivo para hoy es crear una aplicación que permita a los usuarios "crear una Account" utilizando su número de teléfono y SMS 2FA. Además, una vez que el usuario haya "iniciado sesión", le permitiremos seleccionar un contacto de su lista de contactos y recibir una invitación para utilizar la aplicación en su teléfono a través de SMS.

Para habilitar esta funcionalidad, vamos a utilizar React Native para la interfaz de usuario y un servidor Node/Express en el backend.

Para mantener este artículo centrado, vamos a empezar con una interfaz de usuario que ha sido pre-construida. Esta aplicación React Native no está conectada a ningún servidor, pero tiene su interfaz de usuario diseñada con datos simulados. La aplicación en este estado es relativamente pequeña (~300 LOC), y es completamente de código abierto.

A demo of the React Native app with mocked data and no server connectivity

Configurar cuenta de Vonage

Ahora que tenemos una interfaz de usuario diseñada, podemos comenzar a trabajar en el servidor. Para habilitar las funcionalidades que estamos buscando, hoy usaremos dos de las API de Vonage:

• Verify API

• SMS API

{"type":"signUp","props":{"number":false}}

Una vez que tengas una Account, puedes encontrar tu API Key y API Secret en la parte superior del Panel de API de Vonage.

The Vonage dashboard showing the API secrets

Una vez que tengamos estos valores, almacenémoslos en un .env archivo:

No olvide añadir el archivo .env a sus reglas .gitignore ¡reglas! Usted no quiere terminar en un escenario donde usted git commit secretos de su API.

Necesitaremos un valor más del tablero para nuestro uso: El número de teléfono asociado con tu cuenta de Vonage. Puedes encontrarlo en Numbers > Tus números.

The numbers tab in the Vonage dashboard with the number area highlighted

Una vez más, almacenaremos ese valor en el mismo archivo .env para su uso posterior:

NEXMO_NUMBER=5555555555

Asegúrate de excluir cualquier otro símbolo fuera de los números en sí. El SDK de Vonage prefiere un número de teléfono sin formato para usar en el código.

Configurar Express Server

Es difícil configurar la funcionalidad de una aplicación que requiere un back-end sin un servidor que funcione. Como tal, comencemos con algo del código de la plantilla Express. Sigue adelante y crea un archivo app.js y comienza con la siguiente plantilla:

// app.js
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = process.env.PORT || 3000

app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json())

app.get('/', (req, res) => {
    res.send({message: "Hello, world!"});
});

app.listen(port, () => console.log(`Example app listening at http://localhost:${port}`))

Este código debería permitirnos utilizar JSON como cuerpos de nuestras peticiones y acceder a ellos posteriormente a través de req.body. Si enviamos un POST a /test con el payload {hello: "Hi there"}podríamos acceder a "Hi there" a través de req.body.hello.

Una vez que tengamos nuestro código Express inicial en ejecución, querremos configurarnos con el SDK de Vonage Node. Este paquete proporciona toda la funcionalidad que necesitaremos para integrar las API de Vonage en nuestra aplicación.

Empezaremos por añadir el paquete a nuestro proyecto:

npm i nexmo

Una vez configurado, podemos ejecutar el constructor en la parte superior de nuestro archivo para poder utilizar las API más tarde:

const Nexmo = require('nexmo');

const nexmo = new Nexmo({
    apiKey: process.env.NEXMO_API_KEY,
    apiSecret: process.env.NEXMO_API_SECRET,
});

Solicitar un código de verificación

Empecemos por construir el código para solicitar y verificar un código 2FA SMS. Comenzaremos con la parte de solicitud del código:

app.post('/request', (req, res) => {
    // We verify that the client has included the `number` property in their JSON body
    if (!req.body.number) {
        res.status(400).send({message: "You must supply a `number` prop to send the request to"})
        return;
    }
    // Send the request to Vonage's servers
    nexmo.verify.request({
        number: req.body.number,
        // You can customize this to show the name of your company
        brand: 'Vonage Demo App',
        // We could put `'6'` instead of `'4'` if we wanted a longer verification code
        code_length: '4'
    }, (err, result) => {
        if (err) {
            // If there was an error, return it to the client
            res.status(500).send(err.error_text);
            return;
        }
        // Otherwise, send back the request id. This data is integral to the next step
        const requestId = result.request_id;
        res.send({requestId});
    });
})

Como indican los comentarios del código, cuando enviamos una solicitud de código a un número, se nos devuelve un código request_id. Necesitamos devolver eso al cliente y almacenarlo en el estado. Esto nos permitirá enviar la solicitud de "verificación" una vez que el usuario reciba el propio código de solicitud.

Dicho esto, una vez que el usuario hace la solicitud, tiene que tener una forma de verificarlo, ¿no? Vamos a configurar esa ruta ahora:

app.post('/verify', (req, res) => {
    // We require clients to submit a request id (for identification) and a code (to check)
    if (!req.body.requestId || !req.body.code) {
        res.status(400).send({message: "You must supply a `code` and `request_id` prop to send the request to"})
        return;
    }
    // Run the check against Vonage's servers
    nexmo.verify.check({
        request_id: req.body.requestId,
        code: req.body.code
    }, (err, result) => {
        if (err) {
            res.status(500).send(err.error_text);
            return;
        }
        res.send(result);
    });
})

En una aplicación más preparada para la producción, probablemente vincularíamos esto a un sistema de autenticación, como por ejemplo Pasaporte. Debido a la simplicidad de las API en juego, la integración debería ser relativamente trivial.

Ahora que tenemos una "confirmación" de que el número de teléfono del usuario ha sido verificado, podemos seguir adelante con la interfaz de usuario.

Llamar al servidor desde React Native

Dado que ya hemos configurado la mayor parte de la lógica en la interfaz de usuario, nuestra configuración en el lado de React Native es trivial. Usaremos la fetch API para hacer llamadas al servidor:

// services.js
// Using the npm package `ngrok`, we can temporarily "deploy" our local server to test against 
const SERVER_BASE = 'http://test.ngrok.io'

export const request = ({ phoneNumber }) => {
  return fetch(`${SERVER_BASE}/request`, {
    method: 'post',
    // Tell our server we're sending JSON
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      number: phoneNumber,
    }),
  })
}

export const verify = ({ requestId, code }) => {
  return fetch(`${SERVER_BASE}/verify`, {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      requestId,
      code,
    }),
  })
}

Simplemente llama a estos métodos dentro del código de React como lo harías con cualquier otra API y ¡voilà!

SMS Demo

Enviar un SMS

Si ves la demostración hasta el final, verás que podemos elegir un contacto de nuestra lista y enviarle un SMS de invitación para que utilice la aplicación.

Por suerte, esto es tan trivial de implementar como el verify código. Volviendo a Express, añadir otra ruta para enviar textos es fácil:

// app.js
// We need the phone number now to send an SMS
const nexmoNumber = process.env.NEXMO_NUMBER;

app.post('/invite', (req, res) => {
    if (!req.body.number) {
        res.status(400).send({message: "You must supply a `number` prop to send the request to"})
        return;
    }
    // Customize this text to your liking!
    const text = 'You\'re invited to use the hot new app! Details here:';
    const from = nexmoNumber;
    // This regex removes any non-decimal characters. 
    // This allows users to pass numbers like "(555) 555-5555" instead of "5555555555"
    const to = req.body.number.replace(/[^\d]/g, '');

    nexmo.message.sendSms(
        from,
        to,
        text,
        {},
        (err, data) => {
            if (err) {
                const message = err.message || err;
                res.status(500).send({message});
                return;
            }
            res.send(data);
        }
    );
})

A continuación, añadir el último fragmento de código al archivo React Native services.js es igual de fácil:

export const invite = ({ phoneNumber }) => {
  return fetch(`${SERVER_BASE}/invite`, {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      number: phoneNumber,
    }),
  })
}

Conclusión

Si desea ver la muestra de código completa (tanto del servidor Express como de la aplicación React Native), puede ese código en GitHub.

Aunque la aplicación tiene un comienzo sólido, tal vez podamos hacer que los SMS enviados a los usuarios sean un sistema interactivo de envío de SMS. Si tienes alguna idea sobre cómo agregar funcionalidad a la aplicación, no dudes en unirte a nosotros en la conversación en nuestra Comunidad de desarrolladores de Vonage Slack.

Por último, asegúrate de no perderte futuros contenidos como este siguiendo la cuenta de Twitter de Vonage Developer¡!