Webhook

Fires a webhook every time a task is passed as input. Returns the same task as output.

Settings

URL. The url where to send the webhook. Auth Type. The authentication method you'd like to use. Please see this section below for more information. Logs. Whenever a task enters the Webhook stage and a webhook is fired or an error occurs, this is logged. Clicking on Logs allows you to scrutinize logs for all webhooks, with the format: [Date][Status] external_id

Authentication Methods

No Auth

A standard POST request to your URL with the JSON event payload.

On your server, you may accept the request without verification.

Server Code Examples

Flask

from flask import Flask, request, Response
app = Flask(__name__)

@app.route("/hook", methods=["POST"])
def hook():
    # No auth — just process the payload
    event = request.get_json(force=True, silent=True)
    if event is None:
        return Response("Invalid JSON", status=400)
    # ... handle event ...
    return "ok", 200

Secret (X-Hub-Signature)

What we send

A POST request containing the raw body.
Header: X-Hub-Signature: <hex-encoded HMAC-SHA1 of the raw request body using your shared secret>

Note: The header value is the plain hex digest (no sha1= prefix).

How verification works

Read the raw request body bytes.
Compute HMAC-SHA1(secret, body) and hex-encode it.
Compare the computed digest to the X-Hub-Signature header using a constant-time comparison.
Reject if they don’t match.

Server Code Examples

Flask

import json, hmac, hashlib
from flask import Flask, request, Response

secret = b"your_secret_key"
app = Flask(__name__)

@app.route("/hook", methods=["POST"])
def hook():
    computed = hmac.new(secret, msg=request.data, digestmod=hashlib.sha1).hexdigest()
    provided = request.headers.get("X-Hub-Signature", "")
    # Constant-time compare is recommended:
    if not hmac.compare_digest(provided, computed):
        return Response("Invalid signature", status=400)

    print(json.dumps(request.get_json(), indent=2))
    return "ok", 200

Node/Express

import express from "express";
import crypto from "crypto";

const app = express();
// Use raw body to avoid re-serialization differences
app.post("/hook", express.raw({ type: "*/*" }), (req, res) => {
  const secret = Buffer.from(process.env.WEBHOOK_SECRET || "your_secret_key");
  const expected = crypto.createHmac("sha1", secret).update(req.body).digest("hex");
  const provided = (req.get("X-Hub-Signature") || "");

  // timingSafeEqual requires equal-length buffers
  const a = Buffer.from(provided, "utf8");
  const b = Buffer.from(expected, "utf8");
  if (a.length !== b.length || !crypto.timingSafeEqual(a, b)) {
    return res.status(400).send("Invalid signature");
  }

  // ... handle event ...
  res.send("ok");
});

app.listen(3000);

Things to note:

Compute the HMAC over the exact raw bytes received, not parsed/re-serialized JSON.
Use constant-time comparison (hmac.compare_digest, timingSafeEqual) to avoid timing attacks.
If you proxy/transform requests, ensure the body is unchanged before verification.

Bearer Token

What we send

A POST request containing the event payload.
Header: Authorization: Bearer <your-configured-token>

How verification works

Read the Authorization header.
Check it equals Bearer <token-you-configured>.
Reject if missing or mismatched.

Server Code Examples

Flask

import os
from flask import Flask, request, Response

TOKEN = os.getenv("WEBHOOK_TOKEN", "your_token")
app = Flask(__name__)

@app.route("/hook", methods=["POST"])
def hook():
    auth = request.headers.get("Authorization", "")
    expected = f"Bearer {TOKEN}"
    if not hmac.compare_digest(auth, expected):
        return Response("Unauthorized", status=401)

    # ... handle event ...
    return "ok", 200

Node/Express

import express from "express";
import crypto from "crypto";

const app = express();
app.use(express.json());

app.post("/hook", (req, res) => {
  const token = process.env.WEBHOOK_TOKEN || "your_token";
  const provided = req.get("Authorization") || "";
  const expected = `Bearer ${token}`;

  // Constant-time compare where possible
  const a = Buffer.from(provided, "utf8");
  const b = Buffer.from(expected, "utf8");
  if (a.length !== b.length || !crypto.timingSafeEqual(a, b)) {
    return res.status(401).send("Unauthorized");
  }

  // ... handle event ...
  res.send("ok");
});

app.listen(3000);

General Recommendations

Respond with a 2xx status once you’ve accepted the event; do heavy work asynchronously. This helps webhooks flow.
Log the event ID and timestamp (if present) for idempotency/retries.
Keep your secret/token out of source control and rotate regularly.

Webhook Content

Sample Webhook Output

{
  "projectId": "67a3be4088cb6f0f7976327b",
  "categorySchema": {
    "tools": [
      {
        "title": "",
        "tool": "bounding-box",
        "required": false,
        "schemaId": "d3fb304c505050a0631e201",
        "ocrEnabled": false,
        "classifications": [],
        "multiple": false,
        "color": "#f44336",
        "shortcutKey": "1"
      }
    ],
    "classifications": [],
    "relations": []
  },
  "asset": "https://angohub-test-assets.s3.eu-central-1.amazonaws.com/67a3be4088cb6f0f7976327b/assets/9a02ef5e-1281-48a6-902e-c959c1e1b201.png",
  "assetId": "67a3beaf88cb6f0f797634ff",
  "dataset": [],
  "overlay": [],
  "externalId": "task5.png",
  "metadata": {
    "width": 1001,
    "height": 1001
  },
  "batches": [
    "67a3beb088cb6f0f79763515",
    "67a3beb088cb6f0f79763516"
  ],
  "batchNames": [
    "batch-1",
    "batch-2"
  ],
  "task": {
    "type": "default",
    "taskId": "67a3beb088cb6f0f79763514",
    "stage": "08960214-cb68-4109-ac75-33ed521e9cac",
    "stageId": "08960214-cb68-4109-ac75-33ed521e9cac",
    "stageName": "Webhook",
    "updatedAt": "2025-02-06T10:13:28.709Z",
    "updatedBy": "[email protected]",
    "duration": 0,
    "blurDuration": 0,
    "idleDuration": 0,
    "totalDuration": 3549,
    "totalBlurDuration": 0,
    "totalIdleDuration": 0,
    "tools": [
      {
        "bounding-box": {
          "x": 401.2628984836038,
          "y": 398.68154506437764,
          "height": 200.2,
          "width": 201.91845493562232
        },
        "objectId": "49c2c2d71cccba94e471625",
        "classifications": [],
        "metadata": {
          "createdAt": "2025-02-06T10:13:27.625Z",
          "createdBy": "[email protected]",
          "createdIn": "Label"
        },
        "schemaId": "d3fb304c505050a0631e201",
        "title": ""
      }
    ],
    "classifications": [],
    "relations": [],
    "stageHistory": [
      {
        "stageId": "Start",
        "duration": 0,
        "idleDuration": 0,
        "blurDuration": 0,
        "completedAt": "2025-02-05T19:40:32.305Z",
        "isSkipped": false,
        "_id": "67a3beb088cb6f0f79763577"
      },
      {
        "stageId": "Label",
        "duration": 3549,
        "idleDuration": 0,
        "blurDuration": 0,
        "completedAt": "2025-02-06T10:13:28.745Z",
        "taskHistory": "67a48b48a31195645b7a257b",
        "completedBy": "[email protected]",
        "submittedBy": "[email protected]",
        "isSkipped": false,
        "_id": "67a48b48a31195645b7a257d"
      },
      {
        "stageId": "fd4b3696-96ef-49aa-8e2d-c545db740f61",
        "duration": 0,
        "idleDuration": 0,
        "blurDuration": 0,
        "completedAt": "2025-02-06T10:14:08.803Z",
        "taskHistory": "67a48b70a31195645b7a2acf",
        "consensusId": null,
        "isSkipped": false,
        "_id": "67a48b70a31195645b7a2ae1"
      }
    ],
    "brushDataUrl": null,
    "medicalBrushDataUrl": null
  }
}

Differences between Webhook Output and Export

Export

Webhook

The batches property provides batches as names.

 "batches": [
    "Le Croissànt"
  ]

The batches property provides batches as IDs.

 "batches": [
    "651521e299f4bf0015872c91"
  ]

In the webhook output, batch names are provided in the batchNames property.

stageHistory field contains label contents.

stageHistory field only contains metadata, no label contents.

Webhook Errors

In case the webhook cannot be sent (e.g. Ango Hub does not receive a 200 response), Ango Hub will keep the task in the Webhook stage and display a visual warning in the Workflow editor:

To view the tasks the webhooks of which were not sent, navigate to the Tasks tab and filter by stage from the left-hand side.

To attempt to send the webhook again, click on the Webhook stage, then click on the three dots on the top right of its settings panel, and click on Re-run.

Set Up a Sample Webhook Server (X-Hub-Signature Auth Method)

This sample is a minimum server setup you can use to test whether your webhook configuration is working or not.

Run this Python script, changing your_secret_key with a secret key of your choice.

Sample Webhook Python Script

import json
from flask import request, Flask, Response
import hmac
import hashlib

secret = b'your_secret_key'  # Secret Key you entered while adding the integration
app = Flask(__name__)

@app.route('/hook', methods=['POST'])  # Custom Endpoint
def hook():
    computed_signature = hmac.new(secret, msg=request.data, digestmod=hashlib.sha1).hexdigest()
    if request.headers["X-Hub-Signature"] != computed_signature:
        return Response("Invalid signature", status=400)
    else:
        print(json.dumps(request.get_json(), indent=2))
        return "ok"

if __name__ == '__main__':
    app.run(debug=True)

Install ngrok on your system. Instructions on installing ngrok can be found here.
Once ngrok is installed, from the command line/terminal, run ngrok http 127.0.0.1:5000
You will see a screen like the following. Copy the URL highlighted in red.

Go to your Ango Hub project and set up your workflow to have a Webhook stage plugged in. In this case, for example, the Webhook stage will fire every time a labeler submits a task in the Label stage:

Click on the Webhook plugin to open its settings.
In the URL field, paste the URL we copied before, adding /hook at the end. For example, if the URL provided by ngrok was https://47f2-88-243-68-208.ngrok.io, you will paste it and add /hook at the end, forming https://47f2-88-243-68-208.ngrok.io/hook.
In the Secret field, type the secret key you entered in the Python script during step 1.
Save your workflow.
In your project, perform an action which would trigger a webhook. In our example above, it would be submitting a tasl from the Label stage.

If the webhook worked correctly, you will see a 200 OK code in the ngrok window:

And the webhook content will be sent to your server where you ran the Python script. If you ran it in PyCharm, for example, you will see the webhook contents in the Run tab:

PreviousStart NextManaging Users in Projects

Last updated 2 days ago