交互式消息卡片的配置和使用

前提条件

条件一

消息卡片回调地址配置：

消息卡片的回调地址需要是一个外网可访问的服务端地址，并且按照图示的要求完成了challenge验证可以成功保存

条件二

区别于文本类型的消息发送，API的参数msg_type需要改为interactive；content参数的基础格式为（同样是个需要转义的JSON字符串类型）："content":""

条件三

准备需要推送卡片的群组id

搭建示例

有了前置条件之后，就可以进行消息卡片的搭建（下面提及到的卡片code都是提前在消息卡片搭建工具 中搭建完成，将code复制过来），和业务数据拼装：

业务报警卡片包括四个交互场景：

1、无交互：服务端定时向群中推送的报警卡片

卡片code：

{
  "config": {
    "wide_screen_mode": true
  },
  "elements": [
    {
      "fields": [
        {
          "is_short": true,
          "text": {
            "content": "**💻  系统：**\npsm-circle-sys",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**🔢  报警事件 ID：：**\n336720",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**📋  集群：**\ncluster_shenzhen_12542",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**⌨️  节点：**\ncircle_node_21",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 一级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 二级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        }
      ],
      "tag": "div"
    },
    {
      "alt": {
        "content": "",
        "tag": "plain_text"
      },
      "img_key": "img_v2_6ef91d02-91e6-4126-b139-d452eb13c4fg",
      "tag": "img",
      "title": {
        "content": "业务系统Error/Warn折线图：",
        "tag": "lark_md"
      }
    },
    {
      "elements": [
        {
          "content": "🔴 Error数量  🔵 Warn数量",
          "tag": "plain_text"
        }
      ],
      "tag": "note"
    },
    {
      "actions": [
        {
          "tag": "button",
          "text": {
            "content": "跟进处理",
            "tag": "plain_text"
          },
          "type": "primary",
          "value": {
            "deal": "true"
          }
        },
        {
          "tag": "button",
          "text": {
            "content": "🙋反馈误报",
            "tag": "plain_text"
          },
          "type": "primary",
          "value": {
            "mistake_deal": "true"
          }
        },
        {
          "options": [
            {
              "text": {
                "content": "屏蔽10分钟",
                "tag": "plain_text"
              },
              "value": "1"
            },
            {
              "text": {
                "content": "屏蔽30分钟",
                "tag": "plain_text"
              },
              "value": "2"
            },
            {
              "text": {
                "content": "屏蔽1小时",
                "tag": "plain_text"
              },
              "value": "3"
            },
            {
              "text": {
                "content": "屏蔽24小时",
                "tag": "plain_text"
              },
              "value": "4"
            }
          ],
          "placeholder": {
            "content": "暂时屏蔽报警",
            "tag": "plain_text"
          },
          "tag": "select_static",
          "value": {
            "key": "value"
          }
        }
      ],
      "tag": "action"
    }
  ],
  "header": {
    "template": "red",
    "title": {
      "content": "业务报警 - 数据平台",
      "tag": "plain_text"
    }
  }
}

2、交互1：值班同学点击「跟进处理」后的消息卡片

更新的卡片code：

{
  "config": {
    "wide_screen_mode": true
  },
  "elements": [
    {
      "fields": [
        {
          "is_short": true,
          "text": {
            "content": "**💻  系统：**\npsm-circle-sys",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**🔢  报警事件 ID：：**\n336720",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**📋  集群：**\ncluster_shenzhen_12542",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**⌨️  节点：**\ncircle_node_21",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 一级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 二级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        }
      ],
      "tag": "div"
    },
    {
      "alt": {
        "content": "",
        "tag": "plain_text"
      },
      "img_key": "img_v2_6ef91d02-91e6-4126-b139-d452eb13c4fg",
      "tag": "img",
      "title": {
        "content": "业务系统Error/Warn折线图：",
        "tag": "lark_md"
      }
    },
    {
      "elements": [
        {
          "content": "🔴 Error数量  🔵 Warn数量",
          "tag": "plain_text"
        }
      ],
      "tag": "note"
    },
    {
      "tag": "hr"
    },
    {
      "elements": [
        {
          "content": "✅ 肖强3已处理此报警",
          "tag": "plain_text"
        }
      ],
      "tag": "note"
    }
  ],
  "header": {
    "template": "turquoise",
    "title": {
      "content": "【已处理】业务报警 - 数据平台",
      "tag": "plain_text"
    }
  }
}

3、交互2：选择「屏蔽报警」后的消息卡片

更新的卡片code：

{
  "config": {
    "wide_screen_mode": true
  },
  "elements": [
    {
      "fields": [
        {
          "is_short": true,
          "text": {
            "content": "**💻  系统：**\npsm-circle-sys",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**🔢  报警事件 ID：：**\n336720",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**📋  集群：**\ncluster_shenzhen_12542",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**⌨️  节点：**\ncircle_node_21",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 一级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 二级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        }
      ],
      "tag": "div"
    },
    {
      "alt": {
        "content": "",
        "tag": "plain_text"
      },
      "img_key": "img_v2_6ef91d02-91e6-4126-b139-d452eb13c4fg",
      "tag": "img",
      "title": {
        "content": "业务系统Error/Warn折线图：",
        "tag": "lark_md"
      }
    },
    {
      "elements": [
        {
          "content": "🔴 Error数量  🔵 Warn数量",
          "tag": "plain_text"
        }
      ],
      "tag": "note"
    },
    {
      "actions": [
        {
          "tag": "button",
          "text": {
            "content": "跟进处理",
            "tag": "plain_text"
          },
          "type": "primary",
          "value": {
            "key1": "value1"
          }
        },
        {
          "tag": "button",
          "text": {
            "content": "取消屏蔽",
            "tag": "plain_text"
          },
          "type": "default",
          "value": {
            "key1": "value1"
          }
        }
      ],
      "tag": "action"
    }
  ],
  "header": {
    "template": "grey",
    "title": {
      "content": "【已屏蔽报警 1 小时】业务报警 - 数据平台",
      "tag": "plain_text"
    }
  }
}

4、交互3：选择「反馈误报」后的消息卡片

更新的卡片code：

{
  "config": {
    "wide_screen_mode": true
  },
  "elements": [
    {
      "fields": [
        {
          "is_short": true,
          "text": {
            "content": "**💻  系统：**\npsm-circle-sys",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**🔢  报警事件 ID：：**\n336720",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**📋  集群：**\ncluster_shenzhen_12542",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**⌨️  节点：**\ncircle_node_21",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 一级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}</at>",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 二级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        }
      ],
      "tag": "div"
    },
    {
      "alt": {
        "content": "",
        "tag": "plain_text"
      },
      "img_key": "img_v2_6ef91d02-91e6-4126-b139-d452eb13c4fg",
      "tag": "img",
      "title": {
        "content": "业务系统Error/Warn折线图：",
        "tag": "lark_md"
      }
    },
    {
      "elements": [
        {
          "content": "🔴 Error数量  🔵 Warn数量",
          "tag": "plain_text"
        }
      ],
      "tag": "note"
    },
    {
      "tag": "hr"
    },
    {
      "elements": [
        {
          "content": "⛔️ 肖强3已标记此报警为误报",
          "tag": "plain_text"
        }
      ],
      "tag": "note"
    }
  ],
  "header": {
    "template": "grey",
    "title": {
      "content": "【标记误报】业务报警 - 数据平台",
      "tag": "plain_text"
    }
  }
}

拼装好消息卡片，即可编写代码来发送消息卡片、通过操作交互组件将用户数据传递到回调地址的服务端，来进行卡片的更新：

发送服务告警消息卡片

POST /open-apis/im/v1/messages?receive_id_type=chat_id HTTP/1.1
Host: open.feishu.cn
Authorization: Bearer {替换成你的机器人tenant_access_token}
Content-Type: application/json
Cookie: _csrf_token=d6c29c96327950f347ed708e0d426b682884bf87-1649388938; _uuid_hera_ab_path_1=7088360158467751939; passport_web_did=7010956677365202948; slardar_delay_type=b
Content-Length: 2088

{
    "receive_id":"{替换成你的群组chat_id}",
    "msg_type":"interactive",
    "content": "{\"config\":{\"wide_screen_mode\":true},\"elements\":[{\"fields\":[{\"is_short\":true,\"text\":{\"content\":\"**💻  系统：**\\npsm-circle-sys\",\"tag\":\"lark_md\"}},{\"is_short\":true,\"text\":{\"content\":\"**🔢  报警事件 ID：：**\\n336720\",\"tag\":\"lark_md\"}},{\"is_short\":false,\"text\":{\"content\":\"\",\"tag\":\"lark_md\"}},{\"is_short\":true,\"text\":{\"content\":\"**📋  集群：**\\ncluster_shenzhen_12542\",\"tag\":\"lark_md\"}},{\"is_short\":true,\"text\":{\"content\":\"**⌨️  节点：**\\ncircle_node_21\",\"tag\":\"lark_md\"}},{\"is_short\":false,\"text\":{\"content\":\"\",\"tag\":\"lark_md\"}},{\"is_short\":true,\"text\":{\"content\":\"**👤 一级值班：**\\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>\",\"tag\":\"lark_md\"}},{\"is_short\":true,\"text\":{\"content\":\"**👤 二级值班：**\\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}</at>\",\"tag\":\"lark_md\"}}],\"tag\":\"div\"},{\"alt\":{\"content\":\"\",\"tag\":\"plain_text\"},\"img_key\":\"img_v2_6ef91d02-91e6-4126-b139-d452eb13c4fg\",\"tag\":\"img\",\"title\":{\"content\":\"业务系统Error/Warn折线图：\",\"tag\":\"lark_md\"}},{\"elements\":[{\"content\":\"🔴 Error数量  🔵 Warn数量\",\"tag\":\"plain_text\"}],\"tag\":\"note\"},{\"actions\":[{\"tag\":\"button\",\"text\":{\"content\":\"跟进处理\",\"tag\":\"plain_text\"},\"type\":\"primary\",\"value\":{\"deal\":\"true\"}},{\"tag\":\"button\",\"text\":{\"content\":\"🙋反馈误报\",\"tag\":\"plain_text\"},\"type\":\"primary\",\"value\":{\"mistake_deal\":\"true\"}},{\"options\":[{\"text\":{\"content\":\"屏蔽10分钟\",\"tag\":\"plain_text\"},\"value\":\"1\"},{\"text\":{\"content\":\"屏蔽30分钟\",\"tag\":\"plain_text\"},\"value\":\"2\"},{\"text\":{\"content\":\"屏蔽1小时\",\"tag\":\"plain_text\"},\"value\":\"3\"},{\"text\":{\"content\":\"屏蔽24小时\",\"tag\":\"plain_text\"},\"value\":\"4\"}],\"placeholder\":{\"content\":\"暂时屏蔽报警\",\"tag\":\"plain_text\"},\"tag\":\"select_static\",\"value\":{\"key\":\"value\"}}],\"tag\":\"action\"}],\"header\":{\"template\":\"red\",\"title\":{\"content\":\"业务报警 - 数据平台\",\"tag\":\"plain_text\"}}}"
}

卡片回调

当前处理人点击「跟进处理」button之后，会将卡片的 value属性的deal-true发送到回调URL，可以自定义替换这里的deal-true为任意的key-value；方便服务端做业务逻辑处理

"value": {
            "deal": "true"
          }

服务器回调地址URL收到的回调body：

{
        "open_id": "{点击button的用户open_id}",
        "user_id": "{点击button的用户user_id}",
        "open_message_id": "om_d38xxxxxxxx", //消息的messageid
        "tenant_key": "2cxxxxx",//租户key
        "token": "c-edf830dfb836f9753ec2a972241130a5683e9856",//用于更新消息卡片的token（凭证）
        "action": { // button携带的数据信息
                "value": { 
                        "deal": "true"
                },
                "tag": "button" //交互组件类型
        }
}

拿到回调中的value后，服务端进行逻辑的处理，并且你需要在3秒内以 HTTP 200 状态码响应该请求，否则用户客户端将展示请求错误。 如果你需要通过响应来更新卡片，则将新卡片的内容设置到响应的HTTP Body中。

消息的更新方式有两种：

立刻更新

• 在3秒内以HTTP 200状态码响应该请求

• 将新卡片的内容设置到HTTP Body中

• 设置到HTTP Body中的卡片不包含最外层的card层级（即：在消息卡片搭建工具中的code）：

消息卡片搭建工具的code：

{
  "config": {
    "wide_screen_mode": true
  },
  "elements": [
    {
      "fields": [
        {
          "is_short": true,
          "text": {
            "content": "**💻  系统：**\npsm-circle-sys",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**🔢  报警事件 ID：：**\n336720",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**📋  集群：**\ncluster_shenzhen_12542",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**⌨️  节点：**\ncircle_node_21",
            "tag": "lark_md"
          }
        },
        {
          "is_short": false,
          "text": {
            "content": "",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 一级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        },
        {
          "is_short": true,
          "text": {
            "content": "**👤 二级值班：**\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>",
            "tag": "lark_md"
          }
        }
      ],
      "tag": "div"
    },
    {
      "alt": {
        "content": "",
        "tag": "plain_text"
      },
      "img_key": "img_v2_6ef91d02-91e6-4126-b139-d452eb13c4fg",
      "tag": "img",
      "title": {
        "content": "业务系统Error/Warn折线图：",
        "tag": "lark_md"
      }
    },
    {
      "elements": [
        {
          "content": "🔴 Error数量  🔵 Warn数量",
          "tag": "plain_text"
        }
      ],
      "tag": "note"
    },
    {
      "tag": "hr"
    },
    {
      "elements": [
        {
          "content": "✅ {具体同学的名称}已处理此报警",
          "tag": "plain_text"
        }
      ],
      "tag": "note"
    }
  ],
  "header": {
    "template": "turquoise",
    "title": {
      "content": "【已处理】业务报警 - 数据平台",
      "tag": "plain_text"
    }
  }
}

在消息卡片回调url直接将code返回：

/**
 * 消息卡片回调url入口函数
 * @param params
 * @return
 */
@PostMapping("/challenge")
public JSONObject challenge(@RequestBody JSONObject params){
    // 直接返回消息卡片
    return JSONObject.parseObject("{\n" +
            "  \"config\": {\n" +
            "    \"wide_screen_mode\": true\n" +
            "  },\n" +
            "  \"elements\": [\n" +
            "    {\n" +
            "      \"fields\": [\n" +
            "        {\n" +
            "          \"is_short\": true,\n" +
            "          \"text\": {\n" +
            "            \"content\": \"**\uD83D\uDCBB  系统：**\\npsm-circle-sys\",\n" +
            "            \"tag\": \"lark_md\"\n" +
            "          }\n" +
            "        },\n" +
            "        {\n" +
            "          \"is_short\": true,\n" +
            "          \"text\": {\n" +
            "            \"content\": \"**\uD83D\uDD22  报警事件 ID：：**\\n336720\",\n" +
            "            \"tag\": \"lark_md\"\n" +
            "          }\n" +
            "        },\n" +
            "        {\n" +
            "          \"is_short\": false,\n" +
            "          \"text\": {\n" +
            "            \"content\": \"\",\n" +
            "            \"tag\": \"lark_md\"\n" +
            "          }\n" +
            "        },\n" +
            "        {\n" +
            "          \"is_short\": true,\n" +
            "          \"text\": {\n" +
            "            \"content\": \"**\uD83D\uDCCB  集群：**\\ncluster_shenzhen_12542\",\n" +
            "            \"tag\": \"lark_md\"\n" +
            "          }\n" +
            "        },\n" +
            "        {\n" +
            "          \"is_short\": true,\n" +
            "          \"text\": {\n" +
            "            \"content\": \"**⌨️  节点：**\\ncircle_node_21\",\n" +
            "            \"tag\": \"lark_md\"\n" +
            "          }\n" +
            "        },\n" +
            "        {\n" +
            "          \"is_short\": false,\n" +
            "          \"text\": {\n" +
            "            \"content\": \"\",\n" +
            "            \"tag\": \"lark_md\"\n" +
            "          }\n" +
            "        },\n" +
            "        {\n" +
            "          \"is_short\": true,\n" +
            "          \"text\": {\n" +
            "            \"content\": \"**\uD83D\uDC64 一级值班：**\\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>\",\n" +
            "            \"tag\": \"lark_md\"\n" +
            "          }\n" +
            "        },\n" +
            "        {\n" +
            "          \"is_short\": true,\n" +
            "          \"text\": {\n" +
            "            \"content\": \"**\uD83D\uDC64 二级值班：**\\n<at email={这里替换成需要at的用户email/userid/openid（如果是两个id,则需要将email=换成id=）}></at>\",\n" +
            "            \"tag\": \"lark_md\"\n" +
            "          }\n" +
            "        }\n" +
            "      ],\n" +
            "      \"tag\": \"div\"\n" +
            "    },\n" +
            "    {\n" +
            "      \"alt\": {\n" +
            "        \"content\": \"\",\n" +
            "        \"tag\": \"plain_text\"\n" +
            "      },\n" +
            "      \"img_key\": \"img_v2_6ef91d02-91e6-4126-b139-d452eb13c4fg\",\n" +
            "      \"tag\": \"img\",\n" +
            "      \"title\": {\n" +
            "        \"content\": \"业务系统Error/Warn折线图：\",\n" +
            "        \"tag\": \"lark_md\"\n" +
            "      }\n" +
            "    },\n" +
            "    {\n" +
            "      \"elements\": [\n" +
            "        {\n" +
            "          \"content\": \"\uD83D\uDD34 Error数量  \uD83D\uDD35 Warn数量\",\n" +
            "          \"tag\": \"plain_text\"\n" +
            "        }\n" +
            "      ],\n" +
            "      \"tag\": \"note\"\n" +
            "    },\n" +
            "    {\n" +
            "      \"tag\": \"hr\"\n" +
            "    },\n" +
            "    {\n" +
            "      \"elements\": [\n" +
            "        {\n" +
            "          \"content\": \"✅ 肖强3已处理此报警\",\n" +
            "          \"tag\": \"plain_text\"\n" +
            "        }\n" +
            "      ],\n" +
            "      \"tag\": \"note\"\n" +
            "    }\n" +
            "  ],\n" +
            "  \"header\": {\n" +
            "    \"template\": \"turquoise\",\n" +
            "    \"title\": {\n" +
            "      \"content\": \"【已处理】业务报警 - 数据平台\",\n" +
            "      \"tag\": \"plain_text\"\n" +
            "    }\n" +
            "  }\n" +
            "}");
}

PS：对于独享卡片（卡片config结构体中，update_multi属性为false或不配置），「立即更新」只会更新操作人的卡片。立即更新也支持更新共享卡片（update_multi属性为true），更新结果对所有看到卡片的人生效