|
| 1 | +--- |
| 2 | +title: Deliver events to webhooks using push model (portal) |
| 3 | +description: This article provides step-by-step instructions to use the Azure portal to create a WebHook subscription for a namespace topic. |
| 4 | +ms.topic: quickstart |
| 5 | +ms.author: spelluru |
| 6 | +author: spelluru |
| 7 | +ms.date: 05/21/2024 |
| 8 | +--- |
| 9 | + |
| 10 | +# Deliver events to webhooks using namespace topics - Azure portal (preview) |
| 11 | + |
| 12 | +The article provides step-by-step instructions to publish events to Azure Event Grid in the [CloudEvents JSON format](https://github.com/cloudevents/spec/blob/v1.0.2/cloudevents/formats/json-format.md) and deliver those events by using the push delivery model. To be specific, you publish events to a namespace topic in Event Grid and push those events from an event subscription to a webhook handler destination. For more information about the push delivery model, see [Push delivery overview](push-delivery-overview.md). |
| 13 | + |
| 14 | +> [!NOTE] |
| 15 | +> Azure Event Grid namespaces currently supports Shared Access Signatures (SAS) token and access keys authentication. |
| 16 | +
|
| 17 | +[!INCLUDE [quickstarts-free-trial-note.md](../../includes/quickstarts-free-trial-note.md)] |
| 18 | + |
| 19 | + |
| 20 | +## Create an Event Grid namespace |
| 21 | +An Event Grid namespace provides a user-defined endpoint to which you post your events. The following example creates a namespace in your resource group using Bash in Azure Cloud Shell. The namespace name must be unique because it's part of a Domain Name System (DNS) entry. |
| 22 | + |
| 23 | +1. Navigate to the Azure portal. |
| 24 | +1. In the search bar at the topic, type `Event Grid Namespaces`, and select `Event Grid Namespaces` from the results. |
| 25 | + |
| 26 | + :::image type="content" source="./media/publish-events-using-namespace-topics-portal/search-bar-namespace-topics.png" alt-text="Screenshot that shows the search bar in the Azure portal." lightbox="./media/publish-events-using-namespace-topics-portal/search-bar-namespace-topics.png"::: |
| 27 | +1. On the **Event Grid Namespaces** page, select **+ Create** on the command bar. |
| 28 | + :::image type="content" source="./media/publish-events-using-namespace-topics-portal/namespaces-create-button.png" alt-text="Screenshot that shows the Event Grid Namespaces page with the Create button on the command bar selected." lightbox="./media/publish-events-using-namespace-topics-portal/namespaces-create-button.png"::: |
| 29 | +1. On the **Create Namespace** page, follow these steps: |
| 30 | + 1. Select the **Azure subscription** in which you want to create the namespace. |
| 31 | + 1. Create a new resource group by selecting **Create new** or select an existing resource group. |
| 32 | + 1. Enter a **name** for the namespace. |
| 33 | + 1. Select the **location** where you want to create the resource group. |
| 34 | + 1. Then, select **Review + create**. |
| 35 | + :::image type="content" source="./media/publish-events-using-namespace-topics-portal/create-namespace.png" alt-text="Screenshot that shows the Create Namespace page." lightbox="./media/publish-events-using-namespace-topics-portal/create-namespace.png"::: |
| 36 | + 1. On the **Review + create** page, select **Create**. |
| 37 | +1. On the **Deployment** page, select **Go to resource** after the successful deployment. |
| 38 | + |
| 39 | +### Get the access key |
| 40 | + |
| 41 | +1. On the **Event Grid Namespace** page, select **Access keys** on the left menu. |
| 42 | +1. Select copy button next to the **access key**. |
| 43 | + :::image type="content" source="./media/publish-events-using-namespace-topics-portal/access-key.png" alt-text="Screenshot that shows the Event Grid Namespaces page with the Access keys tab selected." lightbox="./media/publish-events-using-namespace-topics-portal/access-key.png"::: |
| 44 | +1. Save the access key somewhere. You use it later in this quickstart. |
| 45 | + |
| 46 | +## Create a topic in the namespace |
| 47 | +Create a topic that holds all events published to the namespace endpoint. |
| 48 | + |
| 49 | +1. Select **Topics** on the left menu. |
| 50 | +1. On the **Topics** page, select **+ Topic** on the command bar. |
| 51 | + :::image type="content" source="./media/publish-events-using-namespace-topics-portal/topics-page.png" alt-text="Screenshot that shows the Topics page." lightbox="./media/publish-events-using-namespace-topics-portal/topics-page.png"::: |
| 52 | +1. On the **Create Topic** page, follow these steps: |
| 53 | + 1. Enter a **name** for the topic. |
| 54 | + 1. Select **Create**. |
| 55 | + :::image type="content" source="./media/publish-events-using-namespace-topics-portal/create-topic-page.png" alt-text="Screenshot that shows the Create Topic page." lightbox="./media/publish-events-using-namespace-topics-portal/create-topic-page.png"::: |
| 56 | + |
| 57 | + |
| 58 | +## Create a message endpoint |
| 59 | +Before subscribing to the events, let's create the endpoint for the event message. Typically, the endpoint takes actions based on the event data. To simplify this quickstart, you deploy a [prebuilt web app](https://github.com/Azure-Samples/azure-event-grid-viewer) that displays the event messages. The deployed solution includes an App Service plan, an App Service web app, and source code from GitHub. |
| 60 | + |
| 61 | +1. Select **Deploy to Azure** to deploy the solution to your subscription. |
| 62 | + |
| 63 | + :::image type="content" source="~/reusable-content/ce-skilling/azure/media/template-deployments/deploy-to-azure-button.svg" alt-text="Button to deploy the Resource Manager template to Azure." border="false" link="https://portal.azure.com/#create/Microsoft.Template/uri/https%3A%2F%2Fraw.githubusercontent.com%2FAzure-Samples%2Fazure-event-grid-viewer%2Fmaster%2Fazuredeploy.json"::: |
| 64 | + |
| 65 | +2. On the **Custom deployment** page, do the following steps: |
| 66 | + 1. For **Resource group**, select the resource group that you created when creating the storage account. It will be easier for you to clean up after you're done with the tutorial by deleting the resource group. |
| 67 | + 2. For **Site Name**, enter a name for the web app. |
| 68 | + 3. For **Hosting plan name**, enter a name for the App Service plan to use for hosting the web app. |
| 69 | + 5. Select **Review + create**. |
| 70 | + |
| 71 | + :::image type="content" source="./media/blob-event-quickstart-portal/template-deploy-parameters.png" alt-text="Screenshot showing the Custom deployment page."::: |
| 72 | +1. On the **Review + create** page, select **Create**. |
| 73 | +1. The deployment takes a few minutes to complete. On the **Deployment** page, select **Go to resource group**. |
| 74 | + |
| 75 | + :::image type="content" source="./media/blob-event-quickstart-portal/navigate-resource-group.png" alt-text="Screenshot showing the deployment succeeded page with a link to go to the resource group."::: |
| 76 | +4. On the **Resource group** page, in the list of resources, select the web app that you created. You also see the App Service plan and the storage account in this list. |
| 77 | + |
| 78 | + :::image type="content" source="./media/blob-event-quickstart-portal/resource-group-resources.png" alt-text="Screenshot that shows the selection of web app in the resource group."::: |
| 79 | +5. On the **App Service** page for your web app, select the URL to navigate to the web site. The URL should be in this format: `https://<your-site-name>.azurewebsites.net`. |
| 80 | + |
| 81 | + :::image type="content" source="./media/blob-event-quickstart-portal/web-site.png" alt-text="Screenshot that shows the selection of link to navigate to web app."::: |
| 82 | +6. Confirm that you see the site but no events are posted to it yet. |
| 83 | + |
| 84 | +  |
| 85 | + |
| 86 | + > [!IMPORTANT] |
| 87 | + > Keep the Azure Event Grid Viewer window open so that you can see events as they are posted. |
| 88 | +
|
| 89 | + |
| 90 | +## Create an event subscription |
| 91 | +Create an event subscription setting its delivery mode to *Push*, which supports [push delivery](namespace-push-delivery-overview.md). |
| 92 | + |
| 93 | +1. Switch to the tab or window with the **Event Grid Namespace** page open from the tab or window with the **Event Hubs Namespace** page open. |
| 94 | +1. On the **Event Grid Namespace** page, select **Topics** on the left menu. |
| 95 | +1. On the **Topics** page, select the topic you created in the previous step. |
| 96 | +1. Select **+ Subscription** on the command bar. |
| 97 | + :::image type="content" source="./media/publish-events-using-namespace-topics-portal/create-subscription-button.png" alt-text="Screenshot that shows the Topic page with Create subscription button selected." lightbox="./media/publish-events-using-namespace-topics-portal/create-subscription-button.png"::: |
| 98 | +1. On the **Create Event Subscription** page, follow these steps: |
| 99 | + 1. In the **Basic** tab, enter a **name** for the event subscription. |
| 100 | + 1. Select **Push** for the event delivery mode. |
| 101 | + 1. For **Endpoint type**, select **Web Hook**. |
| 102 | + 1. Select **Configure an endpoint**. |
| 103 | + |
| 104 | + :::image type="content" source="./media/publish-deliver-events-with-namespace-topics-webhook-portal/select-webhook-handler.png" alt-text="Screenshot that shows the Create Subscription page with Push selected for Delivery mode and WebHook as endpoint type." ::: |
| 105 | + 1. On the **Web Hook** page, specify the endpoint (for example: `https://spegridsite0520.azurewebsites.net/api/updates`) as shown in the following example, and select **Confirm selection**. |
| 106 | + |
| 107 | + :::image type="content" source="./media/publish-deliver-events-with-namespace-topics-webhook-portal/webhook-endpoint.png" alt-text="Screenshot that shows the Web Hook page with a value for subscriber endpoint." ::: |
| 108 | + 1. Back on the **Create Subscription** page, select **Create**. |
| 109 | + |
| 110 | + :::image type="content" source="./media/publish-deliver-events-with-namespace-topics-webhook-portal/create-subscription-full.png" alt-text="Screenshot that shows the Create Subscription page with all fields filled." ::: |
| 111 | + |
| 112 | +## Send events to your topic |
| 113 | + |
| 114 | +Now, send a sample event to the namespace topic by following steps in this section. |
| 115 | + |
| 116 | +### Declare variables |
| 117 | + |
| 118 | +1. Launch Cloud Shell in the Azure portal. Switch to **Bash**. |
| 119 | + |
| 120 | + :::image type="content" source="./media/publish-events-using-namespace-topics-portal/cloud-shell-bash.png" alt-text="Screenshot that shows the Cloud Shell." lightbox="./media/publish-events-using-namespace-topics-portal/cloud-shell-bash.png"::: |
| 121 | +1. Run the following command to declare a variable to hold the resource group name. Replace `RESOUREGROUPNAME` with the name of your Azure resource group. |
| 122 | + |
| 123 | + ```bash |
| 124 | + resource_group=RESOURCEGROUPNAME |
| 125 | + ``` |
| 126 | +1. In the Cloud Shell, run the following command to declare a variable to hold the namespace name. Replace `NAMESPACENAME` with the name of your Event Grid namespace. |
| 127 | + |
| 128 | + ```bash |
| 129 | + namespace=NAMESPACENAME |
| 130 | + ``` |
| 131 | +1. Run the following command to declare a variable to hold the access key value you noted down earlier. Replace `ACCESSKEY` with the value of access key to your Event Grid namespace. |
| 132 | + |
| 133 | + ```azurecli-interactive |
| 134 | + key=ACCESSKEY |
| 135 | + ``` |
| 136 | +1. In the Cloud Shell, run the following command to declare a variable to hold the namespace name. |
| 137 | + |
| 138 | + ```bash |
| 139 | + topic=TOPICNAME |
| 140 | + ``` |
| 141 | + |
| 142 | +### Publish an event |
| 143 | + |
| 144 | +1. Retrieve the namespace hostname. You use it to compose the namespace HTTP endpoint to which events are sent. The following operations were first available with API version `2023-06-01-preview`. You can also get the hostname from the **Overview** page of your Event Grid namespace in the Azure portal. |
| 145 | + |
| 146 | + ```azurecli-interactive |
| 147 | + publish_operation_uri="https://"$(az eventgrid namespace show -g $resource_group -n $namespace --query "topicsConfiguration.hostname" --output tsv)"/topics/"$topic:publish?api-version=2023-06-01-preview |
| 148 | + ``` |
| 149 | + |
| 150 | +2. Create a sample [CloudEvents](https://github.com/cloudevents/spec/blob/v1.0.2/cloudevents/formats/json-format.md) compliant event: |
| 151 | + |
| 152 | + ```azurecli-interactive |
| 153 | + event=' { "specversion": "1.0", "id": "'"$RANDOM"'", "type": "com.yourcompany.order.ordercreatedV2", "source" : "/mycontext", "subject": "orders/O-234595", "time": "'`date +%Y-%m-%dT%H:%M:%SZ`'", "datacontenttype" : "application/json", "data":{ "orderId": "O-234595", "url": "https://yourcompany.com/orders/o-234595"}} ' |
| 154 | + ``` |
| 155 | + |
| 156 | + The `data` element is the payload of your event. Any well-formed JSON can go in this field. For more information on properties (also known as context attributes) that can go in an event, see the [CloudEvents](https://github.com/cloudevents/spec/blob/v1.0.2/cloudevents/spec.md) specifications. |
| 157 | + |
| 158 | +3. Use CURL to send the event to the topic. CURL is a utility that sends HTTP requests. |
| 159 | + |
| 160 | + ```azurecli-interactive |
| 161 | + curl -X POST -H "Content-Type: application/cloudevents+json" -H "Authorization:SharedAccessKey $key" -d "$event" $publish_operation_uri |
| 162 | + ``` |
| 163 | + |
| 164 | +## Verify that Azure Event Grid Viewer received the event |
| 165 | +Verify that the Azure Event Grid Viewer web app shows the events it received from Event Grid. |
| 166 | + |
| 167 | +:::image type="content" source="./media/publish-deliver-events-with-namespace-topics-webhook/verify-received-events.png" alt-text="Screenshot that shows the Azure Event Grid Viewer with a sample received event."::: |
| 168 | + |
| 169 | +## Related content |
| 170 | + |
| 171 | +In this quickstart, you used a webhook as an event handler. For quickstart that uses an Azure event hub as an event handler, see [Deliver events to Azure Event Hubs using namespace topics](publish-deliver-events-with-namespace-topics.md). |
0 commit comments