Los webhooks son una poderosa herramienta para integrar diferentes sistemas y enviar notificaciones en tiempo real. Permiten que una aplicación notifique automáticamente a otra cuando ocurre un evento, sin necesidad de solicitudes constantes para verificar si hay algo nuevo, como sucede en una API tradicional. En este post entenderemos cómo funcionan, cómo configurarlos y exploraremos un ejemplo práctico utilizando la herramienta Webhook.site, que facilita el desarrollo y prueba de webhooks.

¿Qué son los webhooks?

En términos simples, un webhook es un mecanismo que permite a un servicio enviar una solicitud HTTP a una URL específica cada vez que ocurre un evento. En lugar de tener que consultar un servidor repetidamente para verificar cambios (como sucede cuando se usa una API), el webhook notifica a su aplicación tan pronto como ocurre el evento. Esto ahorra tiempo y recursos, haciendo que las interacciones entre sistemas sean más eficientes.

Un ejemplo clásico del uso de webhooks es en los servicios de pago: cuando se completa una transacción, el sistema envía un webhook a su aplicación informándole del estado del pago. Desde allí, tu aplicación puede procesar esta información, como actualizar el estado de un pedido, enviar un recibo vía correo electrónico, entre otras acciones.

¿Cómo funcionan los webhooks?

1. Configuración de Webhook: Registras una URL para recibir notificaciones. Se llamará a esta URL cada vez que ocurra un evento relevante en el servicio que envía el webhook.

2. Evento que ocurre: cuando ocurre el evento configurado (como una transacción, actualización de datos o creación de un registro), el servicio activa una solicitud HTTP a la URL registrada.

3. Procesamiento de webhook: Su aplicación recibe esta solicitud y procesa la información. Por ejemplo, puedes actualizar datos en la base de datos, enviar una respuesta al usuario o realizar cualquier otra tarea necesaria.

4. Solicitud de respuesta: después de procesar el webhook, su aplicación debe responder con un código de estado HTTP (como 200 OK) para informarle que la solicitud se recibió y procesó correctamente.

Ejemplo práctico con Webhook.site

Antes de configurar webhooks en una aplicación real, es una buena práctica probarlos localmente o en un entorno de desarrollo. Una excelente herramienta para esto es Webhook.site. Proporciona una URL temporal donde puedes enviar webhooks para obtener una vista previa y depurarlos, lo que te permite ver exactamente cómo se reciben los datos.

Usemos Webhook.site para probar la recepción de un webhook.

1. Accediendo al sitio webhook.:

   • Ir al sitio webhook.
   • El sitio genera automáticamente una URL única para usted (algo así como https://webhook.site/unique-url). Esta será la URL que usaremos para recibir notificaciones.

2. Configuración del envío de webhook:

   • Imagina que tienes un sistema que activa webhooks. Configure este sistema para enviar solicitudes a la URL proporcionada por Webhook.site.
   • Si desea realizar pruebas localmente, puede simular el envío de webhooks utilizando herramientas como cURL o Postman, enviando solicitudes a la URL generada.

Ahora, implementemos un código de Node.js que simule el envío de un webhook a esta URL.

Ejemplo de implementación de webhook en Node.js

Aquí hay un ejemplo de cómo configurar un punto final para recibir webhooks y cómo enviar un webhook usando axios (o cualquier otra biblioteca HTTP):

const express = require('express');
const axios = require('axios');
const app = express();

// Middleware para processar o body das requisições como JSON
app.use(express.json());

// Endpoint que recebe os webhooks
app.post('/webhook-receiver', (req, res) => {
  const event = req.body;

  // Processar o evento (aqui você adiciona a lógica que desejar)
  console.log('Webhook recebido:', event);

  // Retornar um status de sucesso para o serviço que enviou o webhook
  res.status(200).send('Evento processado com sucesso');
});

// Simulando o envio de um webhook para o Webhook.site
const webhookURL = 'https://webhook.site/unique-url';  // Substitua pela sua URL do Webhook.site

const sendWebhook = async () => {
  try {
    const payload = {
      event: 'payment_completed',
      data: {
        orderId: '12345',
        amount: 100.0,
        currency: 'USD'
      }
    };

    const response = await axios.post(webhookURL, payload);
    console.log('Webhook enviado com sucesso:', response.status);
  } catch (error) {
    console.error('Erro ao enviar webhook:', error);
  }
};

app.listen(3000, () => {
  console.log('Servidor rodando na porta 3000');

  // Enviar o webhook após o servidor iniciar
  sendWebhook();
});

En este ejemplo:

• Creamos un punto final /webhook-receiver que simula la recepción de un webhook.
• Usamos axios para simular el envío de un webhook a Webhook.site, pasando una carga útil con datos de un pago ficticio.
• Webhook.site recibe la notificación y muestra el contenido de la solicitud en el panel.

Buenas prácticas de seguridad en webhooks

Dado que los webhooks implican el envío de datos directamente a una URL, es esencial tomar algunas precauciones de seguridad:

1. Validación de origen: compruebe si la solicitud realmente proviene del servicio esperado. Muchos servicios ofrecen una firma criptográfica (por ejemplo, mediante HMAC) que puede utilizar para validar la autenticidad de la solicitud.

2. Utilice HTTPS: configure siempre los puntos finales de su webhook para utilizar HTTPS, asegurándose de que las comunicaciones entre el servicio y su aplicación estén cifradas.

3. Autenticación: además de HTTPS, algunas aplicaciones requieren que las solicitudes de webhook incluyan un token o clave de autenticación como capa adicional de seguridad.

4. Limitación de velocidad: implemente límites en la cantidad de solicitudes que su servidor puede procesar en un período determinado, evitando que su aplicación se sobrecargue con demasiadas solicitudes en un corto espacio de tiempo.

Webhooks vs. API

La gente suele confundir los webhooks con las API. Aquí está la principal diferencia:

• APIs: Están activas. Su aplicación realiza una solicitud a un servidor y recibe datos en respuesta. Debes "buscar" la información.
• Webhooks: Son pasivos. El servidor envía automáticamente información a su aplicación cuando ocurre un evento. "Recibes" la información sin tener que preguntar.

Los webhooks son especialmente útiles en escenarios donde necesitas notificaciones en tiempo real, como en sistemas de pago, notificaciones de eventos e integraciones entre diferentes servicios.

Conclusión

Los webhooks son una forma sencilla y eficiente de permitir que diferentes sistemas se comuniquen automáticamente en tiempo real. Con herramientas como Webhook.site, puede probar y depurar sus webhooks antes de integrarlos en producción. Además, seguir buenas prácticas de seguridad garantiza que sus terminales estén protegidos contra accesos no deseados.

Si estás desarrollando una aplicación moderna y necesitas integrar diferentes servicios, los webhooks son una excelente solución para automatizar la comunicación entre ellos.

Si tienes alguna pregunta o experiencia interesante con webhooks, ¡compártelas en los comentarios!