← เครื่องมือทั้งหมด
บันทึกของเรา

Dev local webhook ของ UnifyPort ด้วย ngrok

UnifyPort ส่งอีเวนต์ไปยัง HTTPS URL สาธารณะ. ถ้า handler ของคุณรันอยู่บน localhost — ซึ่งส่วนใหญ่เป็นแบบนั้น — คุณต้องมี tunnel. ngrok คือตัวเลือก default ของเรามาหลายปี.

เปิด ngrok.com → เอกสาร webhook ของ UnifyPort

ngrok แก้ปัญหาอะไร

คำสั่งเดียวก็ได้ HTTPS URL สาธารณะที่ forward ทุก request ไปยังพอร์ตในเครื่อง. ทุก traffic ที่ผ่านถูก inspector จับที่ http://127.0.0.1:4040 — มี headers, body, timing และปุ่ม replay พร้อม. inspector นี่แหละคือเหตุผลที่เรายังใช้ ngrok อยู่ แม้จะมี tunnel ฟรีตัวอื่น ๆ: มันบีบสิ่งที่ปกติต้องไล่ log ให้เหลือแค่เหลือบมองตา.

Setup handler UnifyPort ภายในห้านาที

สมมติ handler ฟังอยู่ที่ port 3000:

  1. 1. ngrok http 3000 — copy URL https://*.ngrok-free.app ที่มันพิมพ์ออกมา.
  2. 2. ลงทะเบียน URL ผ่าน POST /v1/webhook-endpoints — ตั้ง url เป็น https://<your-tunnel>.ngrok-free.app/events และเลือก subscribed_events ที่ต้องการ (ตอน iterate ใช้ ["*"] รับทั้งหมดก็ได้).
  3. 3. เปิด http://127.0.0.1:4040 บน browser. Trigger อีเวนต์จากฝั่ง provider — DM ใน Telegram, ข้อความ WhatsApp — แล้วดูมันเข้ามา.
  4. 4. ใช้ปุ่ม replay ส่ง delivery เดิมไปยัง handler ที่อัปเดตแล้ว. นี่คือสิ่งที่ทำให้ ngrok เร็วกว่าการไปยุให้ provider ยิงอีเวนต์ซ้ำทุกครั้งที่เปลี่ยนโค้ด.

ตรวจสอบลายเซ็นที่เครื่อง local

tunnel ngrok แพ็กฟรีตัด TLS ที่ upstream, ดังนั้นเวลา handler เห็น request นั้น body ถูกถอดแล้ว — เป็นไบต์ที่ UnifyPort เซ็นพอดี. แปลว่าการ verify ลายเซ็นทำเหมือน production: คำนวณ hex(HMAC-SHA256(secret, timestamp + "." + body)) แล้วเทียบกับ header X-Device-Signature. ถ้าอยากยืนยันด้วยมือก่อนเพิ่มโค้ด, recipe CyberChef ของเราทำอัลกอริทึมเดียวกันใน browser.

เมื่อ ngrok ไม่ใช่คำตอบที่ดีที่สุดแล้ว

  • สภาพแวดล้อม staging หรือ demo. URL ฟรีเปลี่ยนทุกครั้งที่ restart, ทำให้ config ระยะยาวเสีย. ขึ้นแพ็กเสียเงินใช้ reserved domain — หรือสลับไปใช้ Cloudflare Tunnel เพื่อชื่อ host คงที่ฟรี.
  • Load test ความถี่สูง. ngrok ฟรี throttle หนักมาก. หรืออัปเกรด หรือไปรัน handler ในสภาพแวดล้อมจริง.
  • Workflow ที่ใช้แต่ webhook ไม่มี HTTP traffic อื่น. smee.io เบากว่า — ไม่ต้องลง binary, แค่ client script.

คำถามที่พบบ่อย

ทำไมต้องใช้ ngrok สำหรับ webhook ของ UnifyPort?
UnifyPort ส่งอีเวนต์ไปยัง HTTPS URL สาธารณะ. handler ที่รันอยู่บน localhost:3000 เข้าถึงจากอินเทอร์เน็ตไม่ได้, ngrok จึงเชื่อมสองฝั่งเข้าด้วยกัน — คำสั่งเดียวเผยแพร่ URL https://*.ngrok-free.app ที่ forward ทุก request ไปยังพอร์ตในเครื่องของคุณ.
ngrok ทำให้การ verify ลายเซ็น HMAC พังไหม?
ไม่. tunnel ngrok แพ็กฟรีตัด TLS ที่ upstream, แต่ไบต์ของ body ที่ handler ของคุณได้รับคือไบต์ที่ UnifyPort เซ็นพอดี. การ verify ลายเซ็นทำงานเหมือน production ทุกประการ: คำนวณ hex(HMAC-SHA256(secret, timestamp + "." + body)) แล้วเทียบกับ X-Device-Signature.
ใช้ ngrok กับ signing secret จริงปลอดภัยไหม?
สำหรับ dev local ที่ใช้ secret สำหรับ development เท่านั้น, ปลอดภัย — traffic ถูกเข้ารหัสแบบ end-to-end และ inspector ของ ngrok รันในเครื่อง. สำหรับสภาพแวดล้อม staging, demo, หรือ traffic ระดับ production, แนะนำให้ใช้ reserved domain ของ ngrok แบบเสียเงิน หรือสลับไปใช้ Cloudflare Tunnel ซึ่งให้ชื่อ host ที่คงที่ฟรี.

Loop dev UnifyPort ที่เราแนะนำ

bot/บัญชีแยกสำหรับ dev local, tunnel ngrok เปิดทิ้งไว้ใน pane terminal ตลอด, handler reload-on-save, ปักหมุด inspector 4040 ใน tab. ถ้ามีอะไรแปลก ๆ replay จาก 4040 ไปยัง handler ที่ build ใหม่ — เกือบทุกครั้งเร็วกว่าการเดินไปขอ provider ให้ยิงอีเวนต์เดิมอีกครั้ง.