Ejercicio: Webhooks y JSON de WhatsApp

Objetivo

Construir con tus propias manos las cuatro piezas de la puerta de entrada de un bot: leer un payload sin romperse, clasificar eventos, responder la verificación del webhook y validar el formato y la igualdad de una firma.

Cómo se trabaja

La parte A se hace en tu computadora con el código de referencia del curso: ejecutas el parser y la firma sobre los ejemplos reales. La parte B son cinco funciones de JavaScript puro (sin import, sin Node) que se comprueban en esta página. No calculas el HMAC aquí (necesita crypto); lo que sí practicas es el formato de la cabecera y la comparación en tiempo constante, que son el resto de la lógica de la firma.

Los payloads de prueba tienen la forma payload.entry[].changes[].value.messages[] (mensajes) o .statuses[] (estados), como en la lección. Los teléfonos son falsos (51999000111).

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

• Parte A. En codigo/, crea probar.mjs con import { readFileSync } from "node:fs"; import { parsearWebhook } from "./src/whatsapp.js"; y muestra con console.log(JSON.stringify(parsearWebhook(JSON.parse(readFileSync("test/payloads/boton.json", "utf8"))), null, 1)). Ejecútalo con node probar.mjs y localiza en la salida el id del botón.
• Parte A. Repite con no-soportado.json y estado-fallido.json. Anota en notas.md cuál es el subtipo y qué código de error trae el estado fallido.
• Parte A. Calcula la firma con firmar (importa también esa función) para el texto {} y el secreto secreto; comprueba que obtienes sha256=9b09d74c...17e9. Cambia el secreto por otro y mira cómo cambia por completo.
• Parte B. Escribe tipoDeEvento(payload): devuelve "mensaje" si algún cambio de messages trae mensajes, "estado" si trae statuses (y ningún mensaje), y "ignorar" en cualquier otro caso (incluido null).
• Parte B. Escribe extraerTexto(payload): devuelve el texto (text.body) del primer mensaje de tipo "text", o null si no hay ninguno. Debe tolerar payloads incompletos sin lanzar errores.
• Parte B. Escribe responderVerificacion(params, tokenEsperado): params es un objeto con claves "hub.mode", "hub.verify_token" y "hub.challenge". Devuelve { estado: 200, cuerpo: reto } si el modo es "subscribe", el token coincide y hay reto; en cualquier otro caso { estado: 403, cuerpo: "Prohibido" }. Si tokenEsperado está vacío o es undefined, siempre 403.
• Parte B. Escribe formatoFirmaValido(cabecera): true solo si es un texto sha256= seguido de exactamente 64 caracteres hexadecimales (mayúsculas o minúsculas).
• Parte B. Escribe iguales(a, b): compara dos textos en tiempo constante (recorre siempre toda la longitud acumulando diferencias, sin salir temprano). Devuelve false si no son texto o si tienen distinta longitud.

function cambiosDe(payload) {
  var cambios = [];
  var entradas = payload && Array.isArray(payload.entry) ? payload.entry : [];
  for (var i = 0; i < entradas.length; i++) {
    var lista = entradas[i] && Array.isArray(entradas[i].changes) ? entradas[i].changes : [];
    for (var j = 0; j < lista.length; j++) cambios.push(lista[j]);
  }
  return cambios;
}

function tipoDeEvento(payload) {
  var hayMensajes = false, hayEstados = false;
  cambiosDe(payload).forEach(function (c) {
    var v = (c && c.value) || {};
    if (Array.isArray(v.messages) && v.messages.length > 0) hayMensajes = true;
    if (Array.isArray(v.statuses) && v.statuses.length > 0) hayEstados = true;
  });
  if (hayMensajes) return "mensaje";
  if (hayEstados) return "estado";
  return "ignorar";
}

function extraerTexto(payload) {
  var cambios = cambiosDe(payload);
  for (var i = 0; i < cambios.length; i++) {
    var v = (cambios[i] && cambios[i].value) || {};
    var mensajes = Array.isArray(v.messages) ? v.messages : [];
    for (var j = 0; j < mensajes.length; j++) {
      var m = mensajes[j];
      if (m && m.type === "text" && m.text && typeof m.text.body === "string") return m.text.body;
    }
  }
  return null;
}

function responderVerificacion(params, tokenEsperado) {
  var p = params || {};
  var reto = p["hub.challenge"];
  if (tokenEsperado && p["hub.mode"] === "subscribe" && p["hub.verify_token"] === tokenEsperado && reto) {
    return { estado: 200, cuerpo: reto };
  }
  return { estado: 403, cuerpo: "Prohibido" };
}

function formatoFirmaValido(cabecera) {
  return typeof cabecera === "string" && /^sha256=[0-9a-f]{64}$/i.test(cabecera);
}

function iguales(a, b) {
  if (typeof a !== "string" || typeof b !== "string") return false;
  if (a.length !== b.length) return false;
  var diferencia = 0;
  for (var i = 0; i < a.length; i++) diferencia |= a.charCodeAt(i) ^ b.charCodeAt(i);
  return diferencia === 0;
}