使用 web-hook 的 Slack 模态消息未在松弛通道中打开

Question

我正在使用网络挂钩在 Slack 频道中发布模式交互消息，但该消息未显示在 Slack 频道中。

Slack 文档中有一些关于触发器 id 的信息，但非常令人困惑。

下面是我的 JSON 有效负载，我在其中使用 Slack 的预构建模板并使用 web-hook 将消息发送到 Slack 频道。

var message={};
var attachments = [];
var attachment = {
    "type": "modal",
    "submit": {
        "type": "plain_text",
        "text": "Submit",
        "emoji": true
    },
    "close": {
        "type": "plain_text",
        "text": "Cancel",
        "emoji": true
    },
    "title": {
        "type": "plain_text",
        "text": "Your accommodation",
        "emoji": true
    },
    "blocks": [
        {
            "type": "section",
            "text": {
                "type": "plain_text",
                "text": "Please choose an option where you'd like to stay from Oct 21 - Oct 23 (2 nights).",
                "emoji": true
            }
        },
        {
            "type": "divider"
        },
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "*Airstream Suite*\n*Share with another person*. Private walk-in bathroom. TV. Heating. Kitchen with microwave, basic cooking utensils, wine glasses and silverware."
            },
            "accessory": {
                "type": "image",
                "image_url": "https://api.slack.com/img/blocks/bkb_template_images/Streamline-Beach.png",
                "alt_text": "Airstream Suite"
            }
        },
        {
            "type": "context",
            "elements": [
                {
                    "type": "mrkdwn",
                    "text": "1x Queen Bed"
                },
                {
                    "type": "mrkdwn",
                    "text": "|"
                },
                {
                    "type": "mrkdwn",
                    "text": "$220 / night"
                }
            ]
        },
        {
            "type": "actions",
            "elements": [
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "Choose",
                        "emoji": true
                    },
                    "value": "click_me_123"
                },
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "View Details",
                        "emoji": true
                    },
                    "value": "click_me_123"
                }
            ]
        },
        {
            "type": "divider"
        },
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "*Redwood Suite*\n*Share with 2 other person*. Studio home. Modern bathroom. TV. Heating. Full kitchen. Patio with lounge chairs and campfire style fire pit and grill."
            },
            "accessory": {
                "type": "image",
                "image_url": "https://api.slack.com/img/blocks/bkb_template_images/redwoodcabin.png",
                "alt_text": "Redwood Suite"
            }
        },
        {
            "type": "context",
            "elements": [
                {
                    "type": "mrkdwn",
                    "text": "1x King Bed"
                },
                {
                    "type": "mrkdwn",
                    "text": "|"
                },
                {
                    "type": "mrkdwn",
                    "text": "$350 / night"
                }
            ]
        },
        {
            "type": "actions",
            "elements": [
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "✓ Your Choice",
                        "emoji": true
                    },
                    "style": "primary",
                    "value": "click_me_123"
                },
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "View Details",
                        "emoji": true
                    },
                    "value": "click_me_123"
                }
            ]
        },
        {
            "type": "divider"
        },
        {
            "type": "section",
            "text": {
                "type": "mrkdwn",
                "text": "*Luxury Tent*\n*One person only*. Shared modern bathrooms and showers in lounge building. Temperature control with heated blankets. Lights and electrical outlets."
            },
            "accessory": {
                "type": "image",
                "image_url": "https://api.slack.com/img/blocks/bkb_template_images/tent.png",
                "alt_text": "Redwood Suite"
            }
        },
        {
            "type": "context",
            "elements": [
                {
                    "type": "mrkdwn",
                    "text": "1x Queen Bed"
                },
                {
                    "type": "mrkdwn",
                    "text": "|"
                },
                {
                    "type": "mrkdwn",
                    "text": "$260 / night"
                }
            ]
        },
        {
            "type": "actions",
            "elements": [
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "Choose",
                        "emoji": true
                    },
                    "value": "click_me_123"
                },
                {
                    "type": "button",
                    "text": {
                        "type": "plain_text",
                        "text": "View Details",
                        "emoji": true
                    },
                    "value": "click_me_123"
                }
            ]
        },
        {
            "type": "divider"
        }
    ]
};
attachments.push(attachment);
message.attachments = attachments;
print(JSON.stringify(message));

Answer 1

您需要一个 trigger_id 来打开一个模式。基本上，如果用户说“给我看模态！”，Slack 只会让你显示模态。这可以防止开发人员向毫无戒心的用户发送烦人的、不需要的模式。当用户与“entry points”应用之一交互时，您可以获得 trigger_id：

1. 捷径
2. 斜线命令
3. 应用 UI 中的交互式元素（如按钮）

当用户与其中一个入口点进行交互时，他们会告诉您他们想要查看模式，因此 Slack 会向您发送带有 trigger_id 的 interaction payload。对于全局快捷方式，该有效负载可能类似于this：

{
  "type": "shortcut",
  "token": "XXXXXXXXXXXXX",
  "action_ts": "1581106241.371594",
  "team": {
    "id": "TXXXXXXXX",
    "domain": "shortcuts-test"
  },
  "user": {
    "id": "UXXXXXXXXX",
    "username": "aman",
    "team_id": "TXXXXXXXX"
  },
  "callback_id": "shortcut_create_event",
  "trigger_id": "944799105734.773906753841.38b5894552bdd4a780554ee59d1f3638"
}

所以基本上，您需要先创建其中一个并设置您的应用以接收来自 Slack 的 POST 请求。

一旦你知道用户想要显示模式，你就可以告诉 Slack 打开模式。创建一个view payload（代码中的附件）并包含您收到的 trigger_id。将此有效负载发送到views.open 端点。请注意，您没有像在代码中那样发送消息负载，请记住 trigger_id 在 3 秒内过期。

var payload = {
  trigger_id: "944799105734.773906753841.38b5894552bdd4a780554ee59d1f3638",
  view: {
    "type": "modal",
    "submit": {
      "type": "plain_text",
      "text": "Submit",
      "emoji": true
    },
    "close": {
      "type": "plain_text",
      "text": "Cancel",
      "emoji": true
    },
    "title": {
      "type": "plain_text",
      "text": "Your accommodation",
      "emoji": true
    },
    "blocks": [
      {
        "type": "section",
        "text": {
          "type": "plain_text",
          "text": "Please choose an option where you'd like to stay from Oct 21 - Oct 23 (2 nights).",
          "emoji": true
        }
      }
    ]
  }
};

以下是描述谁做什么以及以什么顺序做的整个流程：

┌────────────────────────────────────────────────────────────────────────────────────────┐
│◜◜◜◜◜◜◜◜◜◜◜◜◜◜┌─────────────┐◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜┌─────────────┐◜│
│◜┌─────────┐◜◜│  Selects a  │◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│  Sees the   │◜│
│◜│  USER   │◜◜│  shortcut   │─┐◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜┌─▶│    modal    │◜│
│◜└─────────┘◜◜│             │◜│◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│◜◜│             │◜│
│◜◜◜◜◜◜◜◜◜◜◜◜◜◜└─────────────┘◜│◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│◜◜└─────────────┘◜│
├──────────────────────────────▼──────────────────────────────────────┴──────────────────┤
│                       ┌─────────────┐                        ┌─────────────┐           │
│ ┌──────────┐          │  Generates  │                        │  Opens the  │           │
│ │  SLACK   │          │ interaction │                        │    modal    │           │
│ └──────────┘          │   payload   │                        │             │           │
│                       └─────────────┘                        └─────────────┘           │
├──────────────────────────────┬──────────────────────────────────────▲──────────────────┤
│◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│◜◜◜┌─────────────┐◜◜◜┌─────────────┐◜◜│◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│
│◜┌──────────┐◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│◜◜◜│  Extracts   │◜◜◜│ Sends modal │◜◜│◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│
│◜│ YOUR APP │◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜└──▶│ trigger_id  │──▶│  data with  │──┘◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│
│◜└──────────┘◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│             │◜◜◜│ trigger_id  │◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│
│◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜└─────────────┘◜◜◜└─────────────┘◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜◜│
└────────────────────────────────────────────────────────────────────────────────────────┘