建立您的第一個 Webhook

本指南將引導您從一個空白的應用程式,逐步建立一個在您自己的系統發出指令時便會執行的「Shopify Flow」工作流程。大約需要十分鐘。

1. 建立一個 webhook

Webhooks → 建立 Webhook。該頁面首先會詢問什麼會觸發此 Webhook,並據此進行設定:

您的答案 您將獲得什麼
自動化工具(n8n、Make、Zapier、您自行編寫的程式碼) 一個已生成的代碼,可直接貼入工具中
一項會對其 webhook 進行簽名的服務(Stripe、GitHub 等) 您所選服務的簽名驗證 - 請參閱 驗證已簽名的 Webhook
瀏覽器或線上商店腳本 已啟用 CORS - - 請參閱 CORS、應用程式代理伺服器網址與瀏覽器呼叫
無需設定 - - 按排程執行 一個會根據定時器從指定網址擷取資料的 Webhook;接著會開啟其「排程」分頁 - - 請參閱 排程式 URL 輪詢
其他,或稍後決定 請您自行選擇驗證方式

為其取一個日後能認出的名稱(例如「錢包卡片提醒」、「聯絡表單」),然後儲存。所有設定日後皆可變更。

您現在擁有一組以短代碼結尾的 **Webhook **URL,例如 https://.../webhook/ab12cd34。該 URL 即是您的系統進行 POST 請求的端點。

「建立 Webhook」頁面會詢問「什麼會觸發此 Webhook」,此時請選擇「無 - 依照排程執行」,並會顯示提示訊息,指出接下來將開啟「排程」分頁
建立 Webhook 的第一步是決定由什麼來觸發它。選擇「答案」會設定相應的驗證機制;若選擇「無 - - 按排程執行」,系統接著會開啟「排程」分頁。
Webhook 編輯器:左側為名稱與認證設定,右側為包含狀態、Webhook URL 及 Webhook ID 的「端點」卡片,上方則有「即時預覽」、「測試」及「使用情況」
Webhook 編輯器。左側為設定選項;右側的「端點」卡片中包含要提供給發送者的 Webhook URL,以及您在 Shopify Flow 中使用的 Webhook ID。

2. 選擇來電者證明身分的方式

開啟 Webhook 並選擇一種驗證方式。完整比較請參閱 驗證 - - 簡要說明如下:

  • 靜態憑證 - - 幾乎適用於所有人。按下「產生」按鈕,複製憑證, 請將其包含在 X-Api-Key 標頭中。
  • HMAC SHA-256 - 適用於對其請求進行簽名的發送者(例如 Stripe、GitHub 及類似服務)。
  • 無 - 僅供測試。任何擁有此網址的人都能觸發您的工作流程。

3. 請告訴我們您關注哪些領域

在「進階設定」中,請從您的 JSON 資料中映射最多四個欄位。若您的系統傳送:

「進階設定」分頁中,將「欄位 1」至「欄位 4」分別對應至 orderId、status、total 和 note
進階設定:可從請求正文中映射最多四個值。這些值會以 fieldOne 至 fieldFour 的形式傳入 Shopify Flow。
json
{ "customer": { "email": "someone@example.com" }, "orderId": "1001" }

將 fieldOne 映射至 orderId,並將 fieldTwo 映射至 customer.email - - 嵌套路徑使用點號。完整詳情請參閱 有效載荷映射與 Shopify Flow 變數。

4. 傳送測試請求

「History」中開啟了一項呼叫,其中包含其請求標頭、有效載荷、狀態、持續時間及識別碼
發出測試請求後,該呼叫會連同接收到的有效載荷一併顯示在「歷史紀錄」中。
bash
curl -X POST https://your-app-url/webhook/ab12cd34 \
  -H "Content-Type: application/json" \
  -H "X-Api-Key: your-token" \
  -d '{"orderId":"1001","customer":{"email":"someone@example.com"}}'

開啟**「歷史紀錄**」。您應能看到該請求及其狀態、標頭和有效載荷。若未顯示,請參閱 歷史與故障排除,該頁面列出了所有拒絕原因。

5. 建立「Shopify Flow」工作流程

在 Shopify Flow 中,建立一個以「Webhook 觸發器」為起點的工作流程。

  1. 新增觸發器,然後按一下「記錄事件」。
  2. 請回到這裡,在「**歷史」**中開啟該召喚,然後按下「重播」。Shopify Flow 現在有一項 可供操作的實際範例有效載荷 - - 這比猜測欄位名稱要容易得多。
  3. 新增一個條件:Webhook ID 須等於您的 Webhook ID(顯示於 Webhook 頁面中)。 每個 Webhook 觸發工作流程都會接收來自您_所有_ Webhook 的事件,因此這 正是這個條件,使得工作流程僅對此一項做出反應。
  4. 請將您的行動方案透過 {{fieldOne}} 提交至 {{fieldFour}}。
  5. 開啟此工作流程。
Shopify Flow
在 Shopify Flow 中,選擇「選取觸發器」,開啟「Workflow Webhooks」,然後選擇「Webhook 觸發器」。
「Webhook 觸發」步驟下方的加號展開後,顯示了「動作」和「條件」選項
步驟下方的「+」符號提供了工作流程的兩大要素:條件與動作。
Shopify Flow 條件:Webhook ID 等於某個 Webhook 的 ID
每個工作流程的第一步:針對 webhook ID 設定一個條件,以便工作流程僅針對此 webhook 執行。
Shopify Flow
觸發器會將以下資訊傳遞至您的工作流程:Webhook ID 以及您映射的四個欄位,並顯示最近一次請求的值。
Shopify Flow
在任何需要傳入變數的「Shopify Flow」動作中,皆可使用這些已映射的欄位;例如在此處,即可將其用於內部電子郵件的主旨和內容中。
完成的工作流程:Webhook 觸發器、針對 Webhook ID 的條件,接著在「True」分支上發送內部電子郵件
完成的工作流程:觸發器、基於 webhook ID 的條件,接著在「True」分支上執行您的動作。

6. 正式上線

將您的實際系統指向 webhook URL。請在「**歷史紀錄」**中觀察前幾次呼叫,以確認它們已成功送達且執行成功。

如果您的發送端在超時後重新嘗試傳送,請啟用「重複送達防護」,以避免因重新嘗試而導致工作流程被執行兩次。

「Webhooks」頁面列出了六個 Webhooks,每個 Webhook 皆顯示其呼叫次數、驗證資訊,以及「已啟用」或「已停用」的標籤
「Webhooks」頁面。每行顯示該 Webhook 被呼叫的次數、呼叫者的驗證方式,以及是否已啟用;右側的選單可用於啟用、停用或刪除該 Webhook。