){kind=small}
Comment envoyer un message WhatsApp avec Node.js (Tutoriel)
Temps de lecture : 5 minutes
Dans ce tutoriel, vous apprendrez à créer une application qui envoie et reçoit des messages à l'aide de l'API Vonage Messages APIde Vonage, le SDK Node de Vonagede Vonage et le WhatsApp Sandbox. Le code du dépôt GitHub pour ce projet se trouve ici.
Pour commencer à envoyer des messages WhatsApp avec Node.js, vous aurez besoin des prérequis suivants :
Vonage API Account To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
Facultatif - Compte WhatsApp Business pour des caractéristiques et des fonctionnalités supplémentaires
Les étapes ci-dessous vous montrent comment créer une nouvelle application Vonage à partir du tableau de bord. Vous pouvez également utiliser l'interface de commande pour créer une application.
Aller à Vos Applications dans le tableau de bord de Vonage et cliquez pour créer une nouvelle application.
Créez une paire de clés publique/privée pour l'authentification de l'API. Cliquez sur "Générer une clé publique et privée" pour obtenir la clé privée. Le fichier sera téléchargé à l'emplacement que vous avez défini dans votre navigateur pour les fichiers téléchargés. Veillez à ajouter ce fichier au dossier du projet.
Si vous n'avez jamais utilisé ngrok, vous pouvez commencer ici. J'ai ajouté les étapes pour lancer une instance en dessous de l'image.
Exécutez la commande suivante pour démarrer une instance de tunneling ngrok.
ngrok http 8000Sortie
ngrok (Ctrl+C to quit)
👋 Goodbye tunnels, hello Agent Endpoints: https://ngrok.com/r/aep
Session Status online
Account plan name
Version 3.19.1
Region Europe (eu)
Latency 31ms
Web Interface http://127.0.0.1:4040
Forwarding https://xyz.ngrok.app -> http://localhost:8000
Connections ttl opn rt1 rt5 p50 p90
14 0 0.03 0.03 6.10 7.79
De retour dans le tableau de bord de l'API de Vonage, sous vos applications, faites basculer l'option Messages sous capabilities et définissez l'URL publique de votre serveur à partir de ngrok comme point de terminaison pour les messages entrants et les événements. Cela devrait ressembler à : https://xyz.ngrok.com/inbound pour les messages entrants et https://xyz.ngrok.com/status pour l'état. Si vous souhaitez en savoir plus sur les webhooks, vous pouvez consulter la documentation de Vonage..
Messages capability
Nous utiliserons l'application WhatsApp Sandbox pour ce tutoriel, qui est un environnement de test. Vous pouvez utiliser un WhatsApp business Account une fois que vous serez prêt à mettre votre application en production. Outre WhatsApp, vous pouvez intégrer cette application à des canaux tels que Viber, Facebook Messenger et Instagram avec quelques lignes de code et ajustements de configuration.
Naviguez jusqu'à la page Vonage Messages API Sandbox page et configurer votre Messages API WhatsApp Sandbox.
Ajoutez l'URL générée par ngrok à votre application et à l'espace de test de l'API Messages. Messages API Sandboxajoutez /webhooks/inbound-message et /webhooks/message-status, respectivement, et cliquez sur "Enregistrer les webhooks".
Webhooks
Nous devons créer un fichier .env fileet ajouter les variables d'environnement nécessaires. Nous avons déjà généré certaines d'entre elles, mais je vais vous expliquer où trouver chacune d'entre elles.
# Vonage API keys
VONAGE_APPLICATION_ID=
VONAGE_PRIVATE_KEY=
VONAGE_WHATSAPP_NUMBER=
VONAGE_API_SIGNATURE_SECRET=
# Server port (optional; default is 8000)
PORT=8000Le VONAGE_WHATSAPP_NUMBER se trouve sur la page Messages Sandbox Page. Il s'agit du numéro auquel vous enverrez un message WhatsApp. Pour les tests du bac à sable, le numéro est 14157386102.
Les VONAGE_APPLICATION_ID se trouve dans l'application que vous avez créée.
Application id
Le VONAGE_PRIVATE_KEY est le chemin d'accès au fichier private.key qui a été généré lors de la création de votre application.
VONAGE_API_SIGNATURE_SECRET est le secret utilisé pour signer la demande qui correspond au secret de signature associé à la clé d'api incluse dans les demandes JWT. Vous pouvez identifier votre secret de signature dans les Paramètres du tableau de bord.
> NOTE : Lorsque vous entrez un numéro de téléphone, n'utilisez pas de + ou de 00 ; commencez par l'indicatif du pays, par exemple 16600700000
Le port est celui que notre serveur express utilisera. Je l'ai mis à 8000, mais n'hésitez pas à le changer.
Nous utiliserons le Vonage Server SDK, SDK Vonage Messages pour Node.js, Vonage JWT SDK pour Node.js, Expresset Dotenv. Installez-les avec cette commande :
npm install @vonage/server-sdk @vonage/messages @vonage/jwt express dotenv
Créer un server.js fichier.
Requérir et initialiser les paquets que nous utiliserons pour ce projet.
// src/server.js
require("dotenv").config();
const express = require("express");
const { Vonage } = require("@vonage/server-sdk");
const { WhatsAppText } = require("@vonage/messages");
const { verifySignature } = require("@vonage/jwt");
const app = express();
app.use(express.json());Initialiser un nouveau client Vonage ; les valeurs lues dans process.env sont les variables d'environnement que vous avez précédemment ajoutées à votre fichier .env file.
L'adresse apiHost est l'URL de l'environnement sandbox pour le service de messagerie de Vonage.
const vonage = new Vonage(
{
applicationId: process.env.VONAGE_APPLICATION_ID,
privateKey: process.env.VONAGE_PRIVATE_KEY,
},
{
apiHost: "https://messages-sandbox.nexmo.com",
}
);Nous disposons d'une fonction de vérification JWT pour vérifier si le message entrant provient de Vonage. Vous pouvez en savoir plus sur la la vérification de la demande.
const verifyJWT = (req) => {
// Verify if the incoming message came from Vonage
const jwtToken = req.headers.authorization.split(" ")[1];
if(!verifySignature(jwtToken, process.env.VONAGE_API_SIGNATURE_SECRET)) {
console.error("Unauthorized request");
throw new Error('Not a messages API request');
}
console.log('JWT verified');
}
La conversation sera initiée par l'envoi d'un message WhatsApp par l'utilisateur. Créons une fonction pour renvoyer un message WhatsApp à l'utilisateur avec le texte "Message reçu".
// Function to send a message via Vonage
const sendMessage = async (to_number) => {
const text = "Message received."; // The reply message
try {
const { messageUUID } = await vonage.messages.send(
new WhatsAppText({
from: process.env.VONAGE_WHATSAPP_NUMBER,
to: to_number,
text: text,
})
);
console.log(`Message sent with messageUUID: ${messageUUID}`);
} catch (error) {
console.error(
"Error sending message:",
error.response ? error.response.body : error.message
);
}
};Créez un /inbound pour gérer le message entrant, celui qui a été ajouté en tant que webhook dans le tableau de bord de Vonage. Il enregistre la réception d'un message et le renvoie à l'utilisateur autorisé listé dans l'Environnement de travail en disant : "Message reçu".
app.post("/inbound", async (req, res) => {
const { from: requesterNumber } = req.body;
console.log(`Received message from ${requesterNumber}`);
try {
// Send the "Message received" reply
await sendMessage(requesterNumber);
res.status(200).send(); // Acknowledge the received message
} catch (error) {
console.error("Error handling incoming message:", error);
res.status(500).send("An error occurred while processing the message.");
}
});Créer un point de terminaison /status qui enregistre les données de la demande, vérifie si l'utilisateur est autorisé à l'aide d'un JWT, puis répond par un message de réussite.
app.post('/status', (req, res) => {
console.log(req.body);
verifyJWT(req);
console.log('Received status update');
res.status(200).send();
});Le serveur écoute sur le port spécifié.
// Start the server
const PORT = process.env.PORT || 8000;
app.listen(PORT, () => {
console.log(`Server is listening on port ${PORT}`);
});
Après cela, vous pouvez tester l'envoi d'un message depuis votre bac à sable WhatsApp vers votre numéro WhatsApp autorisé. Depuis le répertoire où le fichier est enregistré, exécutez :
> $ node src/server.js
Server is listening on port 8000
Received message from <Number>
JWT verified
Message sent with messageUUID: e295613c-a2fc-40f4-a9ae-fa16f5c685cfÀ ce stade, la réponse au message de test devrait apparaître dans WhatsApp sur votre appareil autorisé. Vous pouvez maintenant tester différents types de messages et en savoir plus sur les éléments suivants Concepts WhatsApp.
WhatsApp est très utilisé dans le monde entier ; j'ai vérifié le Play Store sur mon téléphone Android, et c'est l'une des applications les plus téléchargées au Royaume-Uni. De retour dans mon pays d'origine, le Brésil, pour les vacances, j'ai remarqué à quel point l'application se répandait entre les entreprises ; je pouvais acheter de l'açaí, contacter le service clientèle, vérifier si des lieux étaient ouverts et parler à des amis et à des membres de ma famille. Les possibilités d'apprendre à envoyer et à recevoir des messages via WhatsApp sont infinies.
Vous avez une question ou souhaitez partager ce que vous construisez ?
Rejoignez la conversation sur le Communauté Vonage Slack
S'abonner à la Bulletin d'information du développeur
Suivez-nous sur X (anciennement Twitter) pour les mises à jour
Regardez les tutoriels sur notre chaîne YouTube
Connectez-vous avec nous sur la page Vonage Developer sur LinkedIn
Restez connecté et tenez-vous au courant des dernières nouvelles, astuces et événements concernant les développeurs.