Tag: Webhook

A Hassle-free Approach to Clearing Cloudflare Cache: Using Webhooks

To make the websites faster, static content from website is stored in Cloudflare cache on the servers of our globally distributed data centers. Cloudflare stores the copies of data close to your geographical location and loads the websites faster.

Sometimes you make the changes in the backend and websites keep showing content from cache i.e. previous version and updation does not reflect on frontend. Then, it is required to clear the cache of some specific pages as per requirement.

Usually, if we do it on Cloudflare manually, steps to clear/purge cache in Cloudflare are following:

  1. Log in to your Cloudflare dashboard, and select your account and domain.
  2. Select Caching > Configuration.
  3. Under Purge Cache, select Custom Purge. The Custom Purge window appears. Complete the form as per instructions and requirement.
    Or if we want to purge everything then,
    Under Purge Cache, select Purge Everything. A warning window appears.
  4. Select Purge.

Problem is that usually, everybody in the team do not have the access to Cloudflare and also, this consumes a lot of time to login into Cloudflare and performing certain steps.

To save the time and make this functionality available to many, we can create a chatbot in teams using webhooks and Connectors. Authors, editors, marketing team and other team members can easily use it from here with or without tech knowledge.

In order to clear Cloudflare cache using chatbot, Outgoing Webhook is the right option. In the rest of the blog, I will give you a walkthrough how can clear Cloudflare cache utilizing outgoing webhook.

Create Outgoing Webhook

  • Login into Microsoft teams, create a team.
  • Click on three dots on side of team you just created and then select the manage teams option(refer below image)

  • In the manage team, click on the outgoing webhook option at the lower right corner(refer below image).

  • A window with 3 fields will appear. Add the name of your webhook(Users will use this name to call), Callback URL(here, Azure function app URL), Small description in Description field and profile picture(if you want, optional)

  • After adding this information, click on create. Another window with HMAC(Hash-based Message Authentication Code) will appear. Save this because it will be required to ensure the authenticity and integrity of the webhook requests. The HMAC token helps verify that the incoming requests to your webhook endpoint originated genuinely from the expected source.
HMAC is the unique token per configuration and it does not expire.

Set up Visual studio Azure function project

Pre-requisites:

  • Visual Studio 2022 version 17.3
    • .NET core 6+
  • Create Azure function app in visual studio

By selecting Azure functions and clicking Next, you will get many options to select like: Name, Authorization level(Function), Functions worker, Function type (For chatbot, we will use Http trigger),etc. Select as required.

After creating project, you will get following:

Add the code snippet in the .cs file for what the action you want to perform when webhook is call

All input/output related details should be added to host.json file.

Code for Cloudflare cache clear is present here.

To verify that the requests are sent from legitimate client, follow the below steps

  1. Retrieve the Secret Key: When you set up the outgoing webhook, you should have generated or obtained a secret key. Retrieve this key, as it will be used for HMAC validation.
  2. Extract the Request Data: Extract the relevant data from the outgoing webhook request, which typically includes the payload and any additional headers or parameters.
  3. Compute the HMAC: Use the secret key obtained in step 1 and the request data to compute the HMAC using the appropriate hashing algorithm (e.g., HMAC-SHA1, HMAC-SHA256). Check here for hashing algorithm used.
  4. Compare the HMACs: Compare the computed HMAC with the HMAC received in the request. If they match, the request is considered valid and can be trusted.

Once all this code and configuration is done, create the publishing profile to push the code to azure function.

Publish it to Azure

You require Microsoft credentials to perform this.

  • Select the publishing target to push this function app. As we are moving this to azure, select Azure.

  • Based on selection, select the required azure service.

  • Login with Microsoft credentials.

After you logged in, select the subscription, existing resource group and azure function app

Or you can create new one:

Click on create and start publish action,

Add function URL from azure function to the outgoing webhook Callback URL field.

For logs, check the monitor column.

Finally, test and use your chatbot

Once all this is done, @mention with your outgoing webhook name and any other parameters. To clear Cloudflare cache, pass URL whose cache need to be cleared(refer the below example).

This is for clearing the Cloudflare cache. However, we can create chatbots using Webhooks and connectors for any purpose by creating our custom solutions in Azure functions.

Hope you like it!

Advertisement

Creating chatbot in Microsoft Teams with Webhooks and connectors

Webhooks are user defined HTTP callbacks that are used for triggering automated messages, notifications and transfer of data from one web application to another via specific URL(webhook endpoint)

For example, some source application sends an HTTP POST request to a specific URL or endpoint defined by the recipient application and then recipient application processes the request, takes action and send back response once action that is required to be taken by recipient application is completed. It helps multiple applications to communicate and transfer data in real time without delays.

Webhooks are becoming increasingly popular as a way for web applications to integrate with each other in a more streamlined and efficient way. They are often used in conjunction with APIs (Application Programming Interfaces) to allow different systems to work together seamlessly.

APIs are required to be triggered manually every time you want to perform certain task or get certain information. And webhooks are triggered automatically based on some event without any request.

If we consider the Microsoft teams webhooks for creating chatbots then we have two types of webhooks:

Outgoing Webhooks:

  • Outgoing webhooks are used to send data from an application to an external service
  • Outgoing webhooks are triggered by events or actions that occur within a web application or service.
  • When a specific event or action takes place, the application initiates an HTTP request to send data (payload) to a predefined URL (webhook endpoint).
  • The receiving application or service then processes the data sent by the outgoing webhook and takes appropriate actions based on the received payload.
  • Outgoing webhooks are often used to push data or notifications to external systems or services, such as sending updates to a chat platform, triggering actions in another application, or delivering data to a remote server.
Image 1

Incoming Webhooks:

  • Incoming webhooks are used to receive data from external sources into an application.
  • Incoming webhooks are endpoints that are provided by a web application or service to accept and process incoming HTTP requests.
  • External systems or services can send HTTP requests to the webhook endpoint, typically with a payload containing relevant data or information.
  • The receiving application or service processes the incoming webhook request, extracts the payload data, and performs actions based on the received information.
  • Incoming webhooks are commonly used to receive data or notifications from external sources and trigger actions within the receiving application or service. For example, an application might use an incoming webhook to receive data from an external form submission, process it, and store it in a database.

Go to more apps in Image 1 and then search incoming webhook:

Image 2

Apart from this, we also have connectors in Microsoft teams:

Connectors

Connectors are a feature that allows you to integrate external services and receive updates or notifications directly within Teams. Connectors enable you to bring information from various sources into your Teams channels, improving collaboration and keeping your team informed. Here are some key points about connectors in Microsoft Teams:

  • Integration with External Services: Microsoft Teams provides a wide range of pre-built connectors that allow you to connect with external services and applications. These connectors enable you to bring information and updates from external systems directly into Teams channels.
  • Connector Cards: When a connector is configured, it can send messages or updates in the form of Connector Cards. Connector Cards are richly formatted messages that provide information, images, links, and actions related to the external service or system. These cards are displayed in the Teams channel, providing a clear and consistent way to present information from different sources.
  • Connector Configuration: To use a connector in Microsoft Teams, you need to configure it for a specific channel. This configuration involves selecting the desired connector from the available options and specifying the necessary settings or credentials to connect to the external service.
  • Available Connectors: Microsoft Teams offers a wide range of connectors, including connectors for popular services such as GitHub, Trello, SharePoint, Azure DevOps, Salesforce, Jira, and more. These connectors enable you to receive updates, notifications, or specific events from these services directly within Teams.
  • Custom Connectors: In addition to the pre-built connectors, Microsoft Teams also provides the capability to create custom connectors. With custom connectors, you can integrate your own applications or services with Teams, allowing you to send updates, notifications, or information specific to your organization or business processes.
  • Connector Actions: Some connectors also provide actionable buttons or options within the Connector Cards, allowing users to take specific actions directly from Teams. For example, a connector for a project management tool might include buttons to create tasks or update project status.

Go to more apps in Image 1 and search connector, you will be able to see list of connectors available in your teams account:

Image 3

Hope you like this blog!