DialogFlow与Hangouts Chat集成：Webhook卡片响应及按钮交互问题

我之前也踩过dialogflow-fulfillment-nodejs废弃的坑，现在改用原生构造Webhook响应的方式反而更灵活，针对你的两个问题，整理了具体的实现方案：

一、用非废弃API实现Webhook返回卡片响应 #

废弃库的替代方案是直接构造符合DialogFlow Webhook规范的JSON响应，不需要依赖任何封装库。核心是在响应中指定Hangouts Chat平台，并填入正确的卡片结构。

示例代码（Firebase Cloud Functions/Express）： #

exports.dialogflowWebhook = functions.https.onRequest((req, res) => {
  // 构造Hangouts Chat新版卡片（cardsV2是官方推荐格式）
  const hangoutsCardPayload = {
    "cardsV2": [
      {
        "cardId": "snooze-card-001",
        "card": {
          "header": {
            "title": "任务延迟设置",
            "subtitle": "点击按钮选择延迟时长"
          },
          "sections": [
            {
              "widgets": [{ "textParagraph": { "text": "当前任务ID：123456" } }]
            }
          ],
          "buttons": [
            {
              "textButton": {
                "text": "延迟1天",
                "onClick": {
                  "action": {
                    "actionMethodName": "snooze",
                    "parameters": [
                      { "key": "time", "value": "1 day" },
                      { "key": "id", "value": "123456" }
                    ]
                  }
                }
              }
            }
          ]
        }
      }
    ]
  };

  // 组装DialogFlow Webhook响应
  const webhookResponse = {
    fulfillmentMessages: [
      {
        platform: "HANGOUTS_CHAT", // 必须指定平台
        payload: hangoutsCardPayload // 填入Hangouts卡片结构
      }
    ]
  };

  res.json(webhookResponse);
});

关键提示： #

• 一定要加platform: "HANGOUTS_CHAT"，否则DialogFlow不知道该把这个响应发给哪个平台
• 优先用cardsV2格式，旧版cards已经被官方逐步淘汰，兼容性更好

二、让卡片按钮正确向后端传递参数 #

按钮点击后的参数传递，本质是Hangouts Chat把按钮的action信息回传给DialogFlow，再转发到你的Webhook。你需要在Webhook中解析这些参数并处理逻辑。

步骤1：解析按钮触发的请求 #

当用户点击按钮时，DialogFlow发送给Webhook的请求体里，originalDetectIntentRequest.payload会包含按钮的action和参数，结构大概是这样：

{
  "originalDetectIntentRequest": {
    "payload": {
      "action": "snooze",
      "parameters": {
        "time": "1 day",
        "id": "123456"
      }
    }
  }
}

步骤2：在Webhook中处理参数 #

修改你的Webhook函数，添加对按钮action的判断逻辑：

exports.dialogflowWebhook = functions.https.onRequest((req, res) => {
  const reqBody = req.body;
  let response;

  // 判断是否是按钮点击触发的请求
  const buttonAction = reqBody.originalDetectIntentRequest?.payload?.action;
  if (buttonAction) {
    const actionParams = reqBody.originalDetectIntentRequest.payload.parameters;
    // 根据action类型处理业务逻辑
    if (buttonAction === "snooze") {
      const taskId = actionParams.id;
      const delayTime = actionParams.time;
      // 这里执行你的后端操作，比如更新Firestore中的任务状态
      console.log(`任务${taskId}已设置延迟${delayTime}`);

      // 返回操作成功的提示
      response = {
        fulfillmentMessages: [
          {
            platform: "HANGOUTS_CHAT",
            text: { text: [`✅ 已为任务${taskId}设置延迟${delayTime}`] }
          }
        ]
      };
    }
  } else {
    // 普通意图触发，返回卡片
    const hangoutsCardPayload = { /* 卡片结构同上 */ };
    response = {
      fulfillmentMessages: [
        { platform: "HANGOUTS_CHAT", payload: hangoutsCardPayload }
      ]
    };
  }

  res.json(response);
});

关键注意点： #

• 确保对应的DialogFlow意图启用了Webhook调用，否则按钮点击的请求不会转发到你的Webhook
• 按钮的actionMethodName要和Webhook中判断的buttonAction值完全一致，大小写也要匹配
• 参数值只能是字符串类型，如果需要传递数字，后续在Webhook里自行转换类型

内容的提问来源于stack exchange，提问作者Kenny John Jacob