Tube - Webhook sync

ngrok

• 在我们的项目中会使用很多工具的webhook，因此需要提供一个静态域名方便webhook调用
• ngrok 可以将本地运行的服务用一个公网地址暴露出来
• 安装： brew install ngrok，当前版本 3.22.0
• 配置：ngrok config add-authtoken ***
• Domains => New Domain
• concurrently： 一个用于在同一个终端中并行运行多个命令的开发工具
  • 通常使用npm、yarn时也可以通过 && 实现串联命令，但那是顺序执行；而 concurrently 可以并行执行命令
  • bun add concurrently ，当前版本 "concurrently": "^9.2.0"
  • 添加命令，*** 表示对应的 ngrok domain
  • 每次启动项目时，执行bun run dev:all，就可以将项目运行在一个公网地址下了

    "scripts": {
      ...
      "dev:all": "concurrently \"bun run dev\" \"bun run dev:webhook\"",
      "dev:webhook": "ngrok http --url=*** 3000",
      ...
    },
  

Clerk dashboard 的展示信息

• users => 已登录用户
• Configure => Webhooks
  • End points 及详情，当前节点的调用情况，失败、成功统计
  • Event Catalog 对应事件的返回的数据结构
  • Logs 节点请求日志

Clerk Webhooks

• 关于 Webhook 的文档，Sync Clerk data to your app with webhooks
• Clerk dashboard: Configure => Webhooks => Add Endpoint，Subscribe to events 选择 user
• 创建完成后添加环境变量配置：

CLERK_WEBHOOK_SIGNING_SECRET=***

创建api路由

• 参考 使用Webhook同步Clerk数据 的第5步对user事件进行监听
• 不同事件监听返回的数据格式，请查询 Clerk dashboard => Configure => Webhooks下的Event Catalog
• 创建的api路由要与在 Clerk dashboard=>Configure=>Webhooks 中定义的 Endpoint 相匹配，并且文件名必须是 route.ts 或 route.js