Ajouter la vérification par SMS dans une application React Native à l'aide de Node.js et Express

La création d'une application mobile comporte de nombreux défis. React Native peut en atténuer un grand nombre lorsqu'il s'agit de la prise en charge de la compatibilité croisée, mais il est évident qu'une application nécessite toujours un effort d'ingénierie important. Vous voudrez peut-être mettre en œuvre une authentification à deux facteurs (2FA) par SMS pour bloquer plus de 100 % des prises de contrôle de comptes par des robots.ou même intégrer un outil de marketing "partagez cette application avec vos amis".

Heureusement, Vonage fait en sorte que l'intégration de ces fonctions dans votre application soit un jeu d'enfant !

Qu'allons-nous créer ?

Notre objectif aujourd'hui est de créer une application qui permette aux utilisateurs de "créer un Account" à l'aide de leur numéro de téléphone et du SMS 2FA. En outre, une fois que l'utilisateur est "connecté", nous lui permettons de sélectionner un contact dans sa liste de contacts et de recevoir une invitation à utiliser l'application par SMS.

Pour permettre cette fonctionnalité, nous allons utiliser React Native pour l'interface utilisateur et un serveur Node/Express pour le backend.

Pour que cet article reste ciblé, nous allons commencer par une interface utilisateur préconstruite. Cette application React Native n'est pas connectée à un serveur, mais son interface utilisateur est présentée avec des données fictives. L'application dans cet état est relativement petite (~300 LOC), et est entièrement open-source.

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

Création d'un Account Vonage

Maintenant que nous disposons d'une interface utilisateur, nous pouvons commencer à travailler sur le serveur. Pour activer les fonctionnalités que nous recherchons, nous utiliserons aujourd'hui deux des API de Vonage :

• Verify API

• SMS API

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

Une fois que vous avez un Account, vous pouvez trouver votre clé API et votre secret API en haut du tableau de bord de l'API de Vonage.

The Vonage dashboard showing the API secrets

Une fois que nous avons ces valeurs, stockons-les dans un .env fichier :

N'oubliez pas d'ajouter le fichier .env à vos .gitignore règles ! Vous ne voulez pas vous retrouver dans un scénario où vous git commit vos secrets d'API !

Nous aurons besoin d'une autre valeur du tableau de bord pour notre utilisation : Le numéro de téléphone associé à votre Account Vonage. Vous pouvez le trouver sous Numbers > Vos numéros.

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

Une fois de plus, nous stockerons cette valeur dans le même fichier .env pour une utilisation ultérieure :

NEXMO_NUMBER=5555555555

Veillez à exclure tout autre symbole en dehors des numéros eux-mêmes. Le SDK Vonage préfère qu'un numéro de téléphone sans format soit utilisé dans le code.

Configuration du serveur Express

Il est difficile de mettre en place les fonctionnalités d'une application qui nécessite un back-end sans un serveur fonctionnel ! Commençons donc par le code du modèle Express. Créez un fichier app.js et commencez par le modèle suivant :

// 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}`))

Ce code devrait nous permettre d'utiliser JSON comme corps de requête et d'y accéder plus tard par le biais de req.body. Si nous avons envoyé un POST à /test avec la charge utile {hello: "Hi there"}nous pourrions accéder à "Hi there" par l'intermédiaire de req.body.hello.

Une fois que nous avons exécuté notre code Express initial, nous devons nous installer avec le SDK Node de Vonage. Ce kit fournit toutes les fonctionnalités dont nous aurons besoin pour intégrer les Applications de Vonage dans notre application.

Nous allons commencer par ajouter le paquet à notre projet :

npm i nexmo

Une fois que cela est configuré, nous pouvons exécuter le constructeur en haut de notre fichier pour nous permettre d'utiliser les API plus tard :

const Nexmo = require('nexmo');

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

Demander un code de vérification

Commençons par créer le code permettant de demander et de vérifier un code SMS 2FA. Nous commencerons par la partie demande du code :

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});
    });
})

Comme l'indiquent les commentaires du code, lorsque nous envoyons une demande de code à un numéro, nous recevons en retour un . request_id. Nous devons renvoyer ce code au client et le stocker dans l'état. Cela nous permettra de soumettre la demande de "vérification" une fois que l'utilisateur aura reçu le code de demande lui-même.

Cela dit, une fois que l'utilisateur a fait la demande, il doit avoir un moyen de la vérifier, n'est-ce pas ? C'est ce que nous allons faire maintenant :

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);
    });
})

Dans une application prête à la production, nous l'associerions probablement à un système d'authentification, tel que Passeport. En raison de la simplicité des API en jeu, l'intégration devrait être relativement triviale.

Maintenant que nous avons la "confirmation" que le numéro de téléphone de l'utilisateur a été vérifié, nous pouvons passer à l'interface utilisateur.

Appeler un serveur depuis React Native

Comme nous avons déjà mis en place la plupart de la logique dans l'interface utilisateur, notre configuration du côté de React Native est triviale. Nous utiliserons l'API fetch pour faire des appels au serveur :

// 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,
    }),
  })
}

Il suffit d'appeler ces méthodes à l'intérieur du code React comme vous le feriez avec n'importe quelle autre API et voilà !

SMS Demo

Envoyer un SMS

Si vous regardez la démo jusqu'à la fin, vous remarquerez que nous avons pu choisir un contact dans notre liste de contacts et lui envoyer un SMS d'invitation à utiliser l'application !

Heureusement, la mise en œuvre est aussi triviale que le verify est aussi trivial à mettre en œuvre que le code En ce qui concerne Express, il est facile d'ajouter une autre route pour envoyer des textes :

// 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);
        }
    );
})

Ensuite, l'ajout du dernier morceau de code au fichier React Native services.js est tout aussi simple :

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

Conclusion

Si vous souhaitez voir l'exemple de code complet (du serveur Express et de l'application React Native), vous pouvez trouver ce code sur GitHub.

Même si l'application a un début solide, nous pourrions peut-être faire des SMS envoyés aux utilisateurs un système interactif de livraison de SMS. Si vous avez des idées sur la façon d'ajouter des fonctionnalités à l'application, n'hésitez pas à nous rejoindre dans la conversation sur notre Communauté des développeurs de Vonage sur Slack.

Enfin, assurez-vous de ne pas manquer de futurs contenus comme celui-ci en suivant le compte Twitter des développeurs de Vonage!