Meta
Développeur·ses

Implémenter des webhooks depuis la plateforme WhatsApp Business

Personne portant des lunettes et travaillant sur un ordinateur portable chez elle

Les webhooks permettent aux services d’envoyer facilement des données lorsqu’un évènement se produit. Vous configurez une application ou un serveur pour recevoir des messages et vous communiquez l’adresse au service. Lorsqu’un évènement est déclenché dans le service, il peut simplement appeler le webhook pour envoyer le message à votre application.

La plateforme WhatsApp Business offre différentes options pour différents évènements que vous pouvez intégrer à votre application ou service, à condition que ce dernier prenne en charge le protocole HTTPS et possède un certificat SSL valide. Vous avez ainsi la possibilité d’automatiser les réponses aux messages WhatsApp en temps réel.

Dans cet article, nous examinerons les différentes façons de configurer des webhooks pour se connecter à WhatsApp. Nous vous présenterons également un tutoriel qui montre comment configurer une application qui reçoit des messages et les stocke dans une base de données.

Implémenter des webhooks

Des entreprises de toutes les tailles utilisent WhatsApp pour échanger avec leur clientèle. Les cas d’utilisation se répartissent en trois catégories principales : service clientèle, marketing.

Les Webhooks peuvent envoyer des notifications concernant différents types d’évènements. Par exemple, les évènements de messages reçus passent par le webhook des messages. Ce webhook peut être utilisé pour alléger la charge de travail des agent·es du service clientèle en excluant les demandes fréquentes. Les messages simples sont transmis à un service de chatbot pour formuler une réponse, et tout ce qui ne peut pas recevoir immédiatement de réponse est transmis à des agent·es en direct.

Les évènements de messages reçus peuvent également contenir du contenu multimédia, si les utilisateur·ices envoient des images, ou des détails d’interaction, si les utilisateur·ices cliquent sur un bouton pour répondre à un message au lieu de saisir une réponse.

Maintenant que nous avons vu quelques cas d’utilisation des webhooks WhatsApp, passons au tutoriel. Nous allons examiner un cas d’utilisation simple dans lequel la clientèle donne son avis via des messages WhatsApp. Nous vous montrerons comment stocker ces avis dans une base de données, où ils pourront être analysés afin de comprendre les thèmes d’avis courants ou le sentiment général envers un produit particulier.

Node.js Webhook Listener avec AWS Lambda

Imaginez que votre entreprise souhaite utiliser la plateforme WhatsApp Business pour envoyer un message à sa clientèle l’invitant à donner son avis sur un produit récemment acheté. Votre entreprise souhaite permettre aux client·es de répondre à ce message avec leur avis, puis vous souhaitez stocker cet avis dans une base de données.

Pour ce faire, vous devez créer une fonction AWS Lambda à l’aide de Node.js et stocker les données dans DynamoDB. L’utilisation de ces technologies rend l’ensemble du système sans serveur, ce qui réduit la charge de l’infrastructure pendant le développement et vous permet de faire évoluer ou de rétrograder automatiquement vos systèmes en fonction de la demande. Cela permet également de rendre les tarifs plus flexibles, car vous payez uniquement pour ce que vous utilisez.

Configurer l’application

Commencez par initialiser un nouveau projet Node.js. Le framework sans serveur est un bon choix, car il simplifie la configuration et le déploiement des fonctions AWS Lambda.

Saisissez les commandes suivantes pour initialiser le projet :

npm init serverless create --template aws-nodejs npm install -s express serverless-http serverless-offline

Une fois votre projet initialisé, vous devez créer un point de terminaison qui vous permettra de vérifier votre application avec la plateforme WhatsApp Business. Il s’agit d’une étape obligatoire lorsque vous créez votre application sur Meta for Developers.

Remplacez le code standard dans handler.js par le code suivant :

const serverless = require('serverless-http') const express = require('express') const app = express() const token = process.env.TOKEN app.get('/webhooks', (req, res) => { if ( req.query['hub.mode'] == 'subscribe' && req.query['hub.verify_token'] == token ) { res.send(req.query['hub.challenge']); } else { res.sendStatus(400); } }) module.exports.handler = serverless(app);

Le point de terminaison est très simple : il renvoie le paramètre hub.challenge, que le système de vérification envoie comme paramètre de requête.

Vous devez ensuite configurer votre point de terminaison dans le fichier YAML sans serveur. Ce fichier YAML définit les fonctions, les points de terminaison et toutes les ressources à créer lors du déploiement du projet sur AWS.

Le processus de déploiement est ainsi simplifié et ne nécessite aucune configuration manuelle. Il rassemble le code et les configurations d’infrastructure supplémentaires, telles que la création de ressources ou les définitions d’autorisation.
Remplacez le code de texte standard dans serverless.yml par le code suivant :

service: whatsapp-webhooks frameworkVersion: '2' provider: name: aws runtime: nodejs14.x lambdaHashingVersion: 20201221 environment: TOKEN: ${env:APP_TOKEN} plugins: - serverless-offline functions: app: handler: handler.handler events: - http: ANY / - http: 'ANY {proxy+}'

La section des plugins inclut Serverless Offline, qui émule AWS Lambda et API Gateway et vous permet de tester votre point de terminaison localement avant de le déployer sur AWS.

La section des fonctions définit l’emplacement du gestionnaire de votre point de terminaison et les évènements HTTP qui peuvent le déclencher. Pour faire simple, configurez ce gestionnaire pour qu’il réponde à tous les évènements.

La section relative au fournisseur contient la variable d’environnement du token. Ce token secret est requis lors de l’envoi du message de vérification de Meta for Developers.

Pour définir le token, exportez une variable d’environnement avec le nom APP_TOKEN dans votre terminal. Par exemple, utilisez la commande suivante :

export APP_TOKEN=testtoken

Lorsque le service est déployé, la variable TOKEN prend la valeur de votre variable APP_TOKEN locale et la rend disponible pour la fonction Lambda dans AWS.

Tester l’application

Maintenant que votre projet est configuré, vous devez tester que la fonctionnalité fonctionne localement.

Lancez le projet en mode hors ligne à l’aide de la commande suivante :

solution hors ligne sans serveur

Une fois que votre application est en cours d’exécution, exécutez la commande suivante dans une autre fenêtre, car l’application contrôlera la fenêtre actuelle. Veillez à remplacer la valeur du token par la valeur du token que vous avez définie précédemment :

curl -v "http://localhost:3000/dev/webhooks?hub.mode=subscribe&hub.verify_token=testtoken"

La sortie et les réponses de statut 204 doivent ressembler à ceci :

* Trying 127.0.0.1... * TCP_NODELAY set * Connected to localhost (127.0.0.1) port 3000 (#0) > GET /dev/webhooks?hub.mode=subscribe&hub.verify_token=testtoken HTTP/1.1 > Host: localhost:3000 > User-Agent: curl/7.64.1 > Accept: */* > < HTTP/1.1 204 No Content < x-powered-by: Express < content-type: application/json; charset=utf-8 < cache-control: no-cache < Date: Thu, 21 Apr 2022 16:28:24 GMT < Connection: keep-alive < Keep-Alive: timeout=5 < * Connection #0 to host localhost left intact * Closing connection 0

Ensuite, déployez votre application sur AWS en exécutant la commande suivante :

déploiement sans serveur

AWS générera ensuite votre point de terminaison sur le terminal une fois que le déploiement de votre application sera terminé.

Configurer le webhook

Ensuite, lancez le processus de vérification en créant une application Facebook.

Sur le panneau de navigation à gauche de l’Espace App, sélectionnez PRODUITS. Sélectionnez ensuite Webhooks dans les options. Dans le menu déroulant, sélectionnez Compte WhatsApp Business.

Configuration des webhooks

Saisissez ensuite l’URL de rappel avec le point de terminaison fourni par AWS. Ce token doit être le même que celui que vous avez utilisé dans le fichier serverless.yml.

Modifier l’abonnement du compte WhatsApp Business

Une fois l’application vérifiée, vous pouvez voir tous les différents champs d’objets auxquels votre webhook peut s’abonner. Chacun d’entre eux propose une option de test et d’abonnement.

Modifier l’abonnement du compte WhatsApp Business

Le champ d’intérêt est le champ des messages, qui envoie les messages reçus à votre point de terminaison. Chacun des webhooks envoie une requête POST à la même URL de rappel que celle que vous avez fournie lors de la vérification de l’application.

Vous devez ensuite écrire le code pour récupérer les requêtes POST et stocker les données dans DynamoDB.

Ajoutez le code suivant au fichier handler.js :

const AWS = require('aws-sdk') const dynamoDb = new AWS.DynamoDB.DocumentClient(); app.post('/webhooks', (req, res) => { const body = JSON.parse(req.body) if(body.field !== 'messages'){ // not from the messages webhook so dont process return res.sendStatus(400) } const reviews = body.value.messages.map((message)=>{ const reviewInfo = { TableName: process.env.REVIEW_TABLE, Item: { phonenumber: message.from, review: message.text.body } } return dynamoDb.put(reviewInfo).promise() }) // return 200 code once all reviews have been written to dynamoDB return Promise.all(reviews).then((data) => res.sendStatus(200)); })

Ce code installe d’abord le package npm du SDK AWS pour que vous puissiez utiliser le client de document DynamoDB. La fonction vérifie ensuite que la demande a été envoyée via le webhook de messages. Si c’est le cas, la fonction crée un élément d’examen composé de l’examen et du numéro de téléphone de la personne (fourni par le webhook). Le webhook envoie chaque message sous forme de tableau dans le champ des messages, pour pouvoir en envoyer plusieurs à la fois. La fonction parcourt les messages et crée un tableau de promesses DynamoDB PUT qui peuvent être exécutées ultérieurement pour stocker les données.

Configurer DynamoDB

Cet exemple simple stocke les données telles quelles en tant qu’enregistrement DynamoDB. À ce stade, vous pouvez ajouter des fonctionnalités pour analyser le message de manière à implémenter une logique professionnelle supplémentaire.

Pour que cela fonctionne, vous devez fournir des détails de configuration pour DynamoDB dans votre configuration sans serveur. Le fichier serverless.yml complet devrait maintenant ressembler à ceci :

service: whatsapp-webhooks frameworkVersion: '2' provider: name: aws runtime: nodejs14.x lambdaHashingVersion: 20201221 region: eu-west-1 iamRoleStatements: - Effect: "Allow" Action: - dynamodb:Query - dynamodb:Scan - dynamodb:GetItem - dynamodb:PutItem - dynamodb:UpdateItem - dynamodb:DeleteItem Resource: arn:aws:dynamodb:us-east-1:111111111111:table/${self:provider.environment.REVIEW_TABLE} environment: TOKEN: ${env:APP_TOKEN} REVIEW_TABLE: reviews plugins: - serverless-offline functions: app: handler: handler.handler events: - http: ANY / - http: 'ANY {proxy+}' resources: Resources: ReviewsTable: Type: 'AWS::DynamoDB::Table' Properties: TableName: ${self:provider.environment.REVIEW_TABLE} AttributeDefinitions: - AttributeName: phonenumber AttributeType: S KeySchema: - AttributeName: phonenumber KeyType: HASH ProvisionedThroughput: ReadCapacityUnits: 1 WriteCapacityUnits: 1

Le fichier comporte désormais des déclarations de gestion des autorisations supplémentaires dans la section fournisseur, ce qui permet à votre fonction Lambda de récupérer et d’écrire des données dans votre table DynamoDB. Il contient également une section Ressources qui configure la table DynamoDB, la clé de la table et le débit provisionné. Pendant les tests, la marge de unités de capacité est définie sur une faible valeur. Cependant, il est possible de le configurer en production pour le redimensionner en fonction de la demande.

Tester votre application

Désormais, lorsque vous déployez votre application serverless, la table DynamoDB est automatiquement créée et configurée, et votre fonction Lambda dispose de toutes les autorisations nécessaires pour écrire des données dans la table. Cela souligne une fois de plus l’importance de l’utilisation du cadre Serverless, car toutes nos exigences en matière d’infrastructure sont traitées dans une configuration unique.

Une fois votre déploiement terminé, retournez sur Meta for Developers et sélectionnez le bouton Test dans la ligne de champ de messages. Cette action ouvre une nouvelle fenêtre d’échantillon de champ qui ressemble à ceci :

Exemple de champ de message

Vous verrez ainsi le format de la charge utile envoyée à chaque fois qu’un message est envoyé au compte. Sélectionnez Envoyer à mon serveur, puis accédez à DynamoDB dans la console AWS pour voir le nouvel enregistrement avec un examen contenant le texte du test :

Articles renvoyés

Conclusion

Il s’agissait là d’une simple application de test pour montrer la facilité et la simplicité de la mise en place d’un auditeur webhook à l’aide du framework sans serveur. Grâce à des technologies sans serveur telles qu’AWS Lambda et DynamoDB, cette application peut être développée à partir d’un simple prototype en un service prêt pour la production capable de traiter un important volume de données.

Vous pouvez utiliser les webhooks sur la plateforme WhatsApp Business pour automatiser la gestion des comptes clientèle et les interactions. La documentation officielle sur les webhooks WhatsApp fournit des informations plus complètes sur l’abonnement aux webhooks pour un système de production. Notez que la documentation sur les webhooks omet le champ [messages]. Utilisez la référence Webhooks pour obtenir une liste complète des champs disponibles pour l’abonnement.

Lorsque vous créez des auditeurs pour ces webhooks, il est important de tenir compte du coût et de l’évolutivité. La solution doit pouvoir gérer les pics de demande causés par un grand nombre de client·es qui vous contactent sur WhatsApp en même temps. Cependant, la demande peut aussi chuter lorsque les client·es ne vous contactent pas, par exemple du jour au lendemain. Dans ce cas, vous cherchez à réduire les coûts en faisant évoluer votre solution. La solution doit également pouvoir être adaptée à l’ensemble de votre clientèle, à mesure qu’elle s’étoffe.

Il est essentiel de choisir les outils appropriés. Le Serverless Framework, AWS Lambda et DynamoDB étaient adaptés à cet auditeur webhook, mais vous devez tenir compte des besoins spécifiques de votre entreprise. La solution présentée dans cet article répond aux demandes de mise à l’échelle variable, s’ajuste pour maintenir des coûts bas pendant les périodes d’utilisation faible et élimine la nécessité de gérer l’infrastructure. Il est donc plus facile à déployer et à gérer pour les équipes de développement.

Consultez le guide officiel de configuration des webhooks WhatsApp pour obtenir des informations plus détaillées sur l’utilisation des webhooks dans votre application.

Publications associées

Nous utilisons des cookies pour personnaliser le contenu, adapter et mesurer les publicités et offrir une expérience plus sûre. En cliquant sur le site ou en le parcourant, vous acceptez notre collecte d’informations sur et en dehors de Meta à l’aide des cookies. Pour en savoir plus, notamment sur les contrôles disponibles, consultez : [confidentialité]