Recevoir des SMS avec Node.js, Express et l'API SMS de Vonage

Nous avons conçu ce tutoriel en utilisant l'API SMS de Vonage, Node.js et Express.

Dans l'article précédent, vous avez configuré votre compte Vonage et appris comment envoyer des SMS avec Node.js. Dans cet article de blog, vous apprendrez à recevoir un SMS entrant en mettant en œuvre un point de terminaison webhook dans Node.js en utilisant Express.

Voir le code source sur GitHub

Définition d'un point de terminaison Webhook

Pour recevoir un SMS de Vonage, vous devez associer un point de terminaison webhook (URL) à un numéro virtuel que vous avez loué auprès de Vonage. Les messages entrants à ce numéro sont alors envoyés à votre point de terminaison webhook.

Lors du développement du point de terminaison du webhook, il est fastidieux de continuer à déployer votre travail en cours. Pour vous faciliter la vie, utilisons ngrok pour exposer votre point d'accès au webhook sur votre machine locale en tant qu'URL publique !

Utilisation de ngrok

Tout d'abord, téléchargez ngrok à partir de https://ngrok.com. Une fois installé, lancez ngrok dans le terminal :

running ngrok

Votre serveur local (localhost:3000) a maintenant une URL ngrok comme https://71f03962.ngrok.io qui peut être utilisée comme point de terminaison de votre webhook pendant le développement. Notez également l'URL de l'interface Web - vous pouvez inspecter, modifier et rejouer vos requêtes ici - plus d'informations à ce sujet plus tard !

Configurer le point de terminaison Webhook avec Vonage

Connectez-vous à votre Account Vonage, allez à Paramètreset trouvez l'option Paramètres SMS section.

Vonage dispose de deux API différentes capables d'envoyer et de recevoir des SMS. Vous ne pouvez en utiliser qu'une seule à la fois, car elle modifie le format des webhooks que vous recevez. Cette fois-ci, nous allons utiliser l'API SMS APIAssurez-vous donc qu'elle est sélectionnée.

Ensuite, remplissez les webhooks Crochets web SMS entrants en utilisant l'URL de ngrok avec une route - appelons-la "inbound". Entrez https://YOUR_NGROK_URL/inboundet définissez la Méthode HTTP à POST puis cliquez sur Enregistrer les modifications.

setting your webhook endpoint

Maintenant, tous vos messages entrants iront à l'URL du webhook (callback), alors écrivons un peu de code avec Node.js et Express !

Remarque : ci-dessus, nous définissons le point de terminaison du webhook pour les SMS au niveau d'un Account. Vous pouvez également configurer des points de terminaison webhook uniques pour chaque numéro virtuel en cliquant sur Gérer à côté de l'un de vos vos numéros virtuels dans le tableau de bord de Vonage.

Écrire des points de terminaison Webhook avec Express

Ensuite, vous traiterez les POST avec Expressinstallez-le donc.

Ajouter "type": "module" à votre fichier package.json pour permettre l d'importation déclarations.

Créez un fichier .js instanciez Express et écoutez sur le port 3000. Parce que vous avez configuré votre ngrok pour exposer localhost:3000vous devez conserver le même port.

import express from 'express';

const { json, urlencoded } = express;

const app = express();

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

const PORT = 3000;
app.listen(PORT, () => {
    console.log(`Server listening at http://localhost:${PORT}`);
});

Ensuite, créez une route HTTP POST pour traiter les demandes :

app.post('/inbound', (req, res) => {
  handleParams(req.body, res);
});

Définissez ensuite la handleParams fonction :

function handleParams(params, res) {
  if (!params.to || !params.msisdn) {
    console.log('This is not a valid inbound SMS message!');
  } else {
    let incomingData = {
      messageId: params.messageId,
      from: params.msisdn,
      text: params.text,
      type: params.type,
      timestamp: params['message-timestamp']
    };
    console.log('Success', incomingData);
  }
  res.status(200).end();
}

Exécutez le code de nœud et essayez d'envoyer quelques messages de votre téléphone à votre numéro virtuel !

screenshot of a user sending an sms message from an Android phone

Lorsque vous tunnelisez votre application locale avec ngrok, vous pouvez également inspecter la requête à l'adresse suivante http://127.0.0.1:4040/ dans votre navigateur :

ngrok inspector

Voilà, vous pouvez maintenant voir que votre SMS a été envoyé. Vonage a reçu le message et l'a transmis à votre application Express via un Webhook !

J'espère que vous avez trouvé cela utile. Faites-nous part de vos commentaires @VonageDev sur Twitter.

Références

• API SMS de Vonage

• Ngrok