• Bienvenido a XenForo Hispano. Somos una comunidad independiente sin vínculos comerciales ni legales con XenForo Ltd. Ofrecemos asistencia en español para su software y traducciones exclusivas de complementos oficiales y de terceros.

XF 2.3 Automatice los flujos de trabajo con webhooks

https://ginernet.com/cdn/imagenes/banners/720x90-es.gif
1697552381949.png
1697552517580.png
1697552531428.png
1697552538804.png


En lo que probablemente sea uno de los secretos peor guardados de la historia de "¿Has visto...?" de XenForo, es posible que los más avispados de entre vosotros hayan captado una o dos... o tres... pistas de que pronto hablaremos de esto, ¡y por fin ha llegado el día! Hoy estamos encantados de mostraros nuestra versión de la implementación de webhooks en XenForo.

Para aquellos de ustedes que no han oído hablar de webhooks antes, son una poderosa utilidad que permite a una aplicación o servicio enviar información a otro cuando ocurren ciertos eventos. Pueden ser acciones cotidianas, como cuando se realiza un pago para acceder a un producto o servicio, o implementaciones más específicas, como que un nuevo tema de tu foro se publique automáticamente en Discord.

Es probable que, incluso si no eres una persona del tipo desarrollador, hayas utilizado o encontrado webhooks de una forma u otra en algún momento sin darte cuenta.

Aquí en XenForo, automatizamos gran parte de nuestro flujo de trabajo utilizando webhooks, algunos de los cuales pueden ser obvios, otros no tanto. Por ejemplo, recibimos un webhook de GitHub cada vez que corregimos un informe de error - esto es lo que marca automáticamente los informes de error como corregidos. Otro ejemplo es que enviamos un webhook a Slack cada vez que alguien publica un informe de error o informa de un contenido.

Los webhooks, como concepto general, pueden ser una herramienta muy flexible con un sinfín de casos de uso, la capacidad de enviar webhooks cada vez que ocurren ciertos eventos en tu foro a otro sistema va a ser algo de lo que podrás aprovecharte a partir de XenForo 2.3.

Si bien los webhooks pueden parecer a primera vista algo dirigido a los desarrolladores, hay una serie de fantásticos servicios de automatización de terceros que son capaces de recibir webhooks y desencadenar acciones. Estos servicios, como IFTTT, Make y Zapier, ofrecen una forma cómoda y fácil de automatizar e integrar aplicaciones en tu sitio web con miles de integraciones ya disponibles.

Se está considerando una mayor integración con uno o más de estos servicios para una futura versión, pero los tres ejemplos anteriores aceptan webhooks como disparador.

Como siempre, hay mucho de que hablar en este así que siéntase libre de saltar a una sección específica a continuación:

Estamos ansiosos por saber qué opinas de la llegada de los webhooks a XenForo y qué tipo de casos de uso explorarás. Háganoslo saber a continuación.

¿Ya has tenido suficiente? Nosotros no. Habrá más la semana que viene.
 

Configuración de XenForo para enviar webhooks​

En el siguiente tutorial, vamos a mostrarte los pasos que puedes seguir para configurar un webhook que se enviará en un evento específico, y demostrar la recepción a través de un sitio web, Webhook.site - Test, process and transform emails and HTTP requests.

Puedes encontrar Webhooks en tu panel de control de administración en Configuración > Webhooks. Para hacer tu primer webhook harás click en "Añadir webhook". La página de añadir está dividida en tres partes. La primera te permite definir las partes importantes, como el título y la URL de destino:

1697555530138.png


La URL de destino es la URL del script/servicio que va a recibir tu webhook.

El Secreto es un valor que se envía en la cabecera de petición XF-Webhook-Secret cuando se envía el webhook. Esto es opcional, pero si decides utilizarlo en tu propio script receptor del webhook, puedes utilizarlo para asegurarte de que la solicitud contiene el secreto correcto y está autenticada.

Desplázate un poco hacia abajo y verás una lista de tipos de contenido:

1697555578145.png


Nota: La lista de eventos aún no se ha finalizado y se añadirán más eventos de aquí a la versión final.

Aquí es donde puedes especificar uno o más eventos a través de diferentes tipos de contenido para los que deseas activar webhooks. Cuando amplíes un tipo de contenido, te encontrarás con varias opciones, la primera y más importante es decidir qué eventos quieres que activen tu webhook.

Para cada tipo de contenido puedes no enviar ningún evento, enviar todos los eventos, o sólo enviar eventos específicos.

1697555656408.png


Para este ejemplo, sólo enviaremos en thread_insert.

Algunos tipos de contenido también permiten especificar criterios de filtrado adicionales. Por ejemplo, puede que sólo le interesen los hilos publicados en un foro específico.

La tercera sección son los últimos ajustes que puede cambiar antes de guardar:

1697555690156.png


Puede cambiar la codificación del webhook. Por defecto es application/json pero puede que quieras usar x-www-form-urlencoded en su lugar.

Puedes desactivar "Activar verificación SSL" aquí si es necesario, pero en la mayoría de los casos lo dejarás activado a menos que tengas una razón específica.

Por último, puede configurar el webhook como activo / inactivo.

Una vez guardado esto, todo lo que queda por hacer es publicar un nuevo hilo para activar un webhook, y luego usar webhook.site para ver qué datos hemos enviado... ¡aquí está!

JSON:
{
  "content_type": "thread",
  "event": "insert",
  "content_id": 216847,
  "data": {
    "custom_fields": {},
    "discussion_open": true,
    "discussion_state": "visible",
    "discussion_type": "article",
    "first_post_id": 1649025,
    "first_post_reaction_score": 0,
    "FirstPost": {
      "attach_count": 0,
      "is_first_post": true,
      "is_last_post": true,
      "is_reacted_to": false,
      "last_edit_date": 0,
      "message": "[COLOR=rgb(224, 224, 224)]Welcome to the first in our Have you seen...? series for XenForo 3.0\n\n[MEDIA=youtube]dQw4w9WgXcQ[/MEDIA][/COLOR]",
      "message_parsed": "<span style=\"color: rgb(224, 224, 224)\">Welcome to the first in our Have you seen...? series for XenForo 3.0<br />\n<br />\n<div data-template-name=\"_media_site_embed_youtube\" class=\"bbMediaWrapper\" data-media-site-id=\"youtube\" data-media-key=\"dQw4w9WgXcQ\">\n\t<div class=\"bbMediaWrapper-inner\">\n\t\t<iframe src=\"https://www.youtube.com/embed/dQw4w9WgXcQ?wmode=opaque\"\n\t\t\t\tloading=\"lazy\"\n\t\t\t\twidth=\"560\" height=\"315\"\n\t\t\t\tframeborder=\"0\" allowfullscreen=\"true\"></iframe>\n\t</div>\n</div></span>",
      "message_state": "visible",
      "position": 0,
      "post_date": 1697446950,
      "post_id": 1649025,
      "reaction_score": 0,
      "thread_id": 216847,
      "User": {
        "avatar_urls": {
          "o": "https://xenforo.com/community/data/avatars/o/11/11388.jpg?1696499135",
          "h": "https://xenforo.com/community/data/avatars/h/11/11388.jpg?1696499135",
          "l": "https://xenforo.com/community/data/avatars/l/11/11388.jpg?1696499135",
          "m": "https://xenforo.com/community/data/avatars/m/11/11388.jpg?1696499135",
          "s": "https://xenforo.com/community/data/avatars/s/11/11388.jpg?1696499135"
        },
        "is_staff": true,
        "location": "UK",
        "message_count": 33705,
        "profile_banner_urls": {
          "l": "https://xenforo.com/community/data/profile_banners/l/11/11388.jpg?1696466377",
          "m": "https://xenforo.com/community/data/profile_banners/m/11/11388.jpg?1696466377"
        },
        "question_solution_count": 98,
        "reaction_score": 40385,
        "register_date": 1318189653,
        "signature": "",
        "trophy_points": 823,
        "user_id": 11388,
        "user_title": true,
        "username": "Chris D",
        "view_url": "https://xenforo.com/community/index.php?members/chris-d.11388/",
        "vote_score": 332
      },
      "user_id": 11388,
      "username": "Chris D",
      "view_url": "https://xenforo.com/community/index.php?posts/1649025/",
      "warning_message": ""
    },
    "Forum": {
      "breadcrumbs": [
        {
          "node_id": 1,
          "title": "Official forums",
          "node_type_id": "Category"
        }
      ],
      "description": "This forum spotlights some of XenForo's interesting features. Spotlights on features in upcoming releases will be posted here.",
      "display_in_list": true,
      "display_order": 200,
      "image_url": "",
      "node_id": 3,
      "node_name": "have-you-seen",
      "node_type_id": "Forum",
      "parent_node_id": 1,
      "title": "Have you seen...?",
      "type_data": {
        "allow_posting": true,
        "article": {
          "display_style": "preview",
          "expanded_snippet": 250,
          "expanded_per_page": 13
        },
        "can_create_thread": true,
        "can_upload_attachment": true,
        "discussion_count": 135,
        "forum_type_id": "article",
        "is_unread": true,
        "last_post_date": 1697446950,
        "last_post_id": 1649025,
        "last_post_username": "Chris D",
        "last_thread_id": 216847,
        "last_thread_prefix_id": 0,
        "last_thread_title": "What's new in XenForo 3.0?",
        "message_count": 18398,
        "min_tags": 0,
        "require_prefix": false
      },
      "view_url": "https://xenforo.com/community/index.php?forums/have-you-seen/"
    },
    "highlighted_post_ids": [],
    "is_first_post_pinned": true,
    "is_search_engine_indexable": true,
    "last_post_date": 1697446950,
    "last_post_id": 1649025,
    "last_post_user_id": 11388,
    "last_post_username": "Chris D",
    "node_id": 3,
    "post_date": 1697446950,
    "prefix_id": 0,
    "reply_count": 0,
    "sticky": false,
    "tags": [],
    "thread_id": 216847,
    "title": "What's new in XenForo 3.0?",
    "User": {
      "avatar_urls": {
        "o": "https://xenforo.com/community/data/avatars/o/11/11388.jpg?1696499135",
        "h": "https://xenforo.com/community/data/avatars/h/11/11388.jpg?1696499135",
        "l": "https://xenforo.com/community/data/avatars/l/11/11388.jpg?1696499135",
        "m": "https://xenforo.com/community/data/avatars/m/11/11388.jpg?1696499135",
        "s": "https://xenforo.com/community/data/avatars/s/11/11388.jpg?1696499135"
      },
      "is_staff": true,
      "location": "UK",
      "message_count": 33705,
      "profile_banner_urls": {
        "l": "https://xenforo.com/community/data/profile_banners/l/11/11388.jpg?1696466377",
        "m": "https://xenforo.com/community/data/profile_banners/m/11/11388.jpg?1696466377"
      },
      "question_solution_count": 98,
      "reaction_score": 40385,
      "register_date": 1318189653,
      "signature": "",
      "trophy_points": 823,
      "user_id": 11388,
      "user_title": true,
      "username": "Chris D",
      "view_url": "https://xenforo.com/community/index.php?members/chris-d.11388/",
      "vote_score": 332
    },
    "user_id": 11388,
    "username": "Chris D",
    "view_count": 0,
    "view_url": "https://xenforo.com/community/index.php?threads/whats-new-in-xenforo-3-0.216847/"
  }
}

Cualquiera que haya jugado con la API REST puede encontrar el formato del webhook aquí algo familiar y eso es por una muy buena razón: detrás de las escenas, la construcción de los resultados webhook es el mismo código que utilizamos para construir las respuestas de la API. Puedes ajustar los resultados para incluir/excluir ciertas claves dependiendo del tipo de resultado que se esté generando, pero en su mayor parte las respuestas serán las mismas.

En el nivel superior de los resultados del webhook verás las claves content_type, event y content_id, y el resto de los datos relacionados con el contenido están bajo la clave data.

La petición webhook también incluye diversa información en las cabeceras:

1697556226075.png


Puedes ver aquí el valor secreto del webhook, junto con algunas cabeceras adicionales que puedes usar, si lo deseas, antes de analizar el contenido completo, como xf-webhook-event y xf-content-type.

Todo esto está muy bien, pero vamos a echar un vistazo a cómo usted podría ser capaz de utilizar esto en el mundo real.
 

Un ejemplo real de webhook​

Para los fines de este ejemplo, vamos a utilizar Make, pero puedes lograr resultados similares con IFTTT y Zapier.

Ahora vamos a enviar automáticamente un mensaje a un canal del servidor Discord cuando se cree un nuevo hilo en un foro de anuncios.

En el editor de escenarios de Make, haremos clic en el botón "Añadir", buscaremos la aplicación "Webhooks" y, a continuación, seleccionaremos el disparador "Webhook personalizado":

1697556462158.png
1697556496202.png


A continuación, hacemos clic en "Crear webhook" y rellenamos algunos datos básicos. Aquí puedes especificar restricciones de IP como medida de seguridad:

1697556600112.png


En lugar de especificar aquí una dirección IP, hagamos clic en "Mostrar configuración avanzada" y marquemos "Obtener cabeceras de solicitud". Esto nos permitirá verificar que el secreto del webhook que enviamos junto con la solicitud es correcto.

Esto nos dará la dirección de nuestro webhook. Modificaremos nuestro webhook existente para apuntar la URL de destino a la nueva URL del webhook de Make y actualizaremos los filtros para utilizar el evento thread_insert cuando se publique algo en el foro "Anuncios".

Para sacar el máximo provecho de Make, le gusta entender tu estructura de datos. La forma más fácil de hacerlo en este caso es crear un hilo de prueba, o esperar a que se cree un nuevo hilo.

Antes de configurar el filtro secreto del webhook, haremos clic en "Añadir" para añadir un nuevo módulo, buscaremos "Discord" y haremos clic en "Enviar un mensaje".

1697556640730.png


Aquí es donde puedes configurar y conectarte a tu servidor de Discord. Simplemente haga clic en "Crear una conexión", dele un nombre y complete el proceso de inicio de sesión para autorizar a su cuenta Make a conectarse a su cuenta Discord, seleccionando el servidor Discord de destino.

1697556666665.png


Una vez autorizado, el bot de Make (o Integromat) se añadirá a su servidor. A continuación, puede volver a Make para configurar exactamente lo que desea que suceda cuando se reciba el webhook.

Una vez seleccionada la opción "Enviar mensaje a un canal", puede especificar el nombre de su canal como destino del hilo entrante. También tienes que rellenar el campo "Mensaje" con lo que quieres que se envíe.

Esto puede ser un mensaje completamente estático, si lo deseas, pero ¿por qué hacer eso cuando puedes utilizar los datos del webhook entrante para tu mensaje?

1697556693017.png


Una vez que hagas clic en "Aceptar", eso es todo lo que tienes que hacer. Pero echemos un vistazo rápido a los filtros. Para ello sólo tienes que hacer clic en el icono entre los dos módulos, tu webhook y el módulo Discord. Esto te permite "Configurar un filtro".

1697556715785.png


Vamos a utilizar el mismo secreto webhook que hemos configurado antes, y decir que el xf-webhook-secret encabezado debe ser igual a eso. Aquí también puedes añadir otros filtros y condiciones. Mientras que dentro de XenForo puedes especificar ciertas condiciones, como el foro, podrías fácilmente configurar esos filtros dentro de Make.

Y todo lo que queda por hacer es esperar a que los hilos empiecen a publicarse directamente en tu Discord:

1697556759606.png
 
Volver
Arriba