Comment envoyer un message Facebook Messenger avec Node.js

Avec Facebook Messenger, les personnes connectées à votre organisation sur Facebook peuvent accéder à des services automatisés utiles. Vous pouvez prendre des commandes, fournir des mises à jour ou répondre à des questions. Si vous n'avez pas l'habitude de communiquer de cette façon ou si vous avez compté exclusivement sur Facebook pour votre présence sur le Web jusqu'à maintenant, vous voudrez peut-être l'essayer d'abord en utilisant l'API Sandbox de Vonage. Messages API Sandbox de Vonage.

Conditions préalables

Dans cet exemple, vous allez mettre en place un service rapide pour répondre aux messages Messenger en recommandant ce qu'il y a à manger pour le déjeuner. Messenger est un peu particulier en ce sens que votre client doit engager la conversation avec vous avant que vous puissiez lui envoyer un message. Nous ne pouvons donc pas le tester en envoyant simplement un message, nous devons d'abord écouter un message reçu. Pour ce faire, nous aurons besoin d'un serveur Node en plus des prérequis généraux pour utiliser le bac à sable :

• Node et npm

• A Développeur Vonage Account

• Une liste blanche de Messenger à tester avec

• Express.js et le body-parser middleware

• axios pour envoyer des messages

Pour recevoir des messages, votre serveur doit être accessible au public. Vous pouvez le faire sur votre machine de développement avec ngrokou utiliser Glitch comme je l'ai fait avec le code d'exemple code d'exemple.

Créer un serveur

Créez un nouveau server.js dans votre répertoire de travail. Votre serveur ressemblera beaucoup à la plupart des serveurs Express minimaux. Vous aurez besoin du paquetage et obtiendrez une instance, et vous aurez également besoin de body-parser et axios. Ensuite, vous configurerez l'intergiciel et écouterez sur le port 3000 à la fin.

L'objectif du serveur ici est de fournir des points d'extrémité pour vos webhooks. Vous pouvez également en ajouter : un pour les messages entrants et un pour les statuts. Pour l'instant, ils peuvent se contenter de répondre en confirmant que la demande est arrivée à destination :

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const axios = require('axios');

app.use(bodyParser.json());

// when someone messages the number linked to this app, this endpoint "answers"
app.post('/answer', function(req, res) {
  res.status(204).end();
});

// this endpoint receives information about events in the app
app.post('/event', function(req, res) {
  res.status(204).end();
});

app.listen(3000);

Remarque : N'oubliez pas de définir les points de terminaison de votre webhook dans votre tableau de bord. Vous pouvez définir les deux dans l'espace de test de l'API Messages API Sandbox. Pour cet exemple, il s'agit de requêtes POST qui ressemblent à https://YOUR-SERVER/answer et https://YOUR-SERVER/event.

Ajouter des données

Pour envoyer des messages, vous aurez besoin de vos identifiants API et de l'ID Messenger du bac à sable à partir duquel envoyer le message. Vous pouvez obtenir toutes ces valeurs à partir de la commande cURL sur la page page du bac à sable. Comme vous allez envoyer des suggestions de déjeuner, vous pouvez également créer un tableau de dix déjeuners pour les données de test.

Vous ne verrez pas l'identifiant Messenger de votre utilisateur final tant qu'il ne vous aura pas envoyé un message. Une fois que votre /answer reçoit une requête, vous pouvez obtenir l'identifiant from_id dans le corps de la requête. Vous pouvez l'enregistrer pour l'utiliser comme identifiant "to" dans votre message :

var user = '12ab3456';
var password = '123AbcdefghIJklM';
var my_id = '123456789012345';

var lunches = ['bbq','teriyaki','salad','a bagel','curry','dumplings','tacos','a sub','bibimbap','pizza'];

// when someone messages the number linked to this app, this endpoint "answers"
app.post('/answer', function(req, res) {
  var from_id = req.body.from.id;
  
  res.status(204).end();
});

Répondre aux messages entrants

Vous avez maintenant toutes les pièces en place pour construire une réponse à votre utilisateur. Pour cet exemple unique, vous pouvez simplement utiliser axios pour faire la requête. Vous lui fournirez l'URL du bac à sable, un objet de données, ainsi que votre clé API et votre mot de passe. L'objet de données contient l'ID du bac à sable à partir duquel le message doit être envoyé, l'ID de l'utilisateur stocké à qui il doit être envoyé et un texte contenant une suggestion de déjeuner aléatoire.

Après avoir envoyé la demande, vous pouvez attendre une réponse ou d'éventuelles erreurs. Dans des circonstances idéales, vous ne verrez rien d'autre que la confirmation de ce que vous avez envoyé :

// when someone messages the number linked to this app, this endpoint "answers"
app.post('/answer', function(req, res) {
  var from_id = req.body.from.id;
  
  axios.post('https://messages-sandbox.nexmo.com/v0.1/messages',{
    "from": { "type": 'messenger', "id": my_id },
    "to": { "type": 'messenger', "id": from_id },
    "message": {
      "content": {
        "type": 'text',
        "text": 'You should have ' + 
          lunches[Math.floor(Math.random() * 10)] + ' for lunch.'
      }
    }
  },{
    auth: {
      username: user,
      password: password
    }
  })
  .then(function (response) {
    console.log('Status: ' + response.status);
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });
  
  res.status(204).end();
});

Essayez-le

Démarrez votre serveur avec node server.js s'il n'est pas déjà en cours d'exécution. Depuis votre client Messenger sur liste blanche, envoyez un message au compte sandbox de Vonage (peu importe ce qu'il dit). (Vous devriez recevoir un message en retour et les confirmations dans votre console.

Messenger Sandbox

Maintenant que vous avez vu comment communications avec Messenger vous pouvez commencer à l'intégrer dans vos applications réelles. Vous pouvez utiliser l'API Sandbox de Vonage Messages pour le développement avec le SDK Node.js de Vonage. Lorsque vous êtes prêt, vous pouvez connecter votre propre page Facebook et passer à l'action !

Regardez et remixez l'exemple sur Glitch pour voir l'ensemble du code.