Facebook Login Connect With Messenger Sample

To run the bot on your local machine and expose it to the internet for Facebook webhooks, follow these steps:

1. Clone the repository

git clone https://github.com/fbsamples/fblogin-sample.git
cd fblogin-sample

2. Start an ngrok tunnel

Install ngrok (npm install -g ngrok) and start a tunnel to port 3000:

ngrok http 3000

Note the https forwarding URL (e.g., https://1c3b838deacb.ngrok.io).

3. Install dependencies and configure environment

npm install
cp .sample.env .env

Edit .env and set APP_URL to your ngrok HTTPS URL.

4. Run the application

node app.js

5. Configure Webhook and Profile

Use the VERIFY_TOKEN defined in your .env file to call the /profile endpoint. This configures your webhook subscription:

# Replace <VERIFY_TOKEN> with your actual token
http://localhost:3000/profile?mode=all&verify_token=<VERIFY_TOKEN>

# Example ngrok command
ngrok http 3000

# Example profile configuration via browser/cURL
http://localhost:3000/profile?mode=all&verify_token=your-token-here

To receive events from Facebook Messenger, you must implement two endpoints in your Express server:

1. GET /webhook: Used for webhook verification during the subscription process. It must validate the hub.verify_token against your configured VERIFY_TOKEN environment variable and return the hub.challenge value.
2. POST /webhook: Used to receive actual messaging events. When a user opts in, the payload contains a login_id within entry[].messaging[0].optin.login_id. You can use this ID to send messages back via the Facebook Graph API.

Note: The server requires an HTTPS listener (e.g., on port 8443) using valid SSL credentials (key.pem and cert.pem) to work with Facebook webhooks.

// GET /webhook for verification
app.get("/webhook", (req, res) => {
  let VERIFY_TOKEN = process.env.VERIFY_TOKEN;
  let mode = req.query["hub.mode"];
  let token = req.query["hub.verify_token"];
  let challenge = req.query["hub.challenge"];

  if (mode === "subscribe" && token === VERIFY_TOKEN) {
    res.status(200).send(challenge);
  } else {
    res.sendStatus(403);
  }
});

// POST /webhook for receiving events
app.post("/webhook", async (req, res) => {
  let body = req.body;
  if (body.object === "page") {
    body.entry.forEach(function(entry) {
      let webhook_event = entry.messaging[0];
      let login_id = webhook_event.optin.login_id;
      // Use login_id to send messages...
    });
    res.status(200).send("EVENT_RECEIVED");
  }
});

To verify your webhook with Facebook, implement a GET endpoint at /webhook. The endpoint must handle the hub.mode, hub.verify_token, and hub.challenge query parameters. If the hub.mode is subscribe and the hub.verify_token matches your configured config.verifyToken, you must respond with the hub.challenge value and a 200 status code.

Endpoint Details:

• Method: GET
• Path: /webhook
• Query Params: hub.mode, hub.verify_token, hub.challenge
• Success Response: 200 OK with the challenge body.

// Example logic for the GET /webhook endpoint
app.get("/webhook", (req, res) => {
  let mode = req.query["hub.mode"];
  let token = req.query["hub.verify_token"];
  let challenge = req.query["hub.challenge"];

  if (mode === "subscribe" && token === config.verifyToken) {
    res.status(200).send(challenge);
  } else {
    res.sendStatus(403);
  }
});

The i18n module is configured to handle multi-language support for the Messenger bot. It uses a directory of locale files and maps specific function names to its translation API.

Key configuration options:

• locales: An array of supported locale strings (e.g., en_US, fr_FR, es_ES).
• defaultLocale: The fallback locale used when a translation is missing (set to en_US).
• directory: The filesystem path where locale files are stored (uses path.join(__dirname, 'locales')).
• objectNotation: Enables using dot notation to access nested translation keys.
• api: Maps internal translation methods to custom function names:
  • __: mapped to translate
  • __n: mapped to translateN (for pluralization)

const i18n = require("i18n"),
  path = require("path");

i18n.configure({
  locales: [
    "en_US",
    "fr_FR",
    "es_ES",
    "es_LA",
    "pt_BR",
    "id_ID",
    "ar_AR",
    "de_DE",
    "it_IT",
    "ja_JP",
    "ko_KR",
    "ru_RU",
    "th_TH",
    "vi_VN",
    "zh_CN",
    "zh_HK",
    "zh_TW"
  ],
  defaultLocale: "en_US",
  directory: path.join(__dirname, "locales"),
  objectNotation: true,
  api: {
    __: "translate",
    __n: "translateN"
  }
});

module.exports = i18n;