在Teams中對網站的URL特殊解析

Teams中有一個不太被大家注意的擴展點，名字叫Link unfurling，就是對於一些特殊域名的URL進行特別的解釋。

可能這麼說，大家還是無法理解，我們看一下下面這個圖，當用戶在message輸入框中輸入了一竄url後，Teams會按照自己本身的一種規則來對URL指定的網頁產生預覽。但是如果你想要生成你自己的特殊的預覽卡片的話，就需要這種擴展了。

一說到時間，就會聯想到時區，夏令時等頭痛的問題，不同國家有不同國家的規定。如果你希望你的Teams Bot可以判斷出當前用戶所在的時區，從而可以針對性的進行一些處理時，你要做好心理準備，這個複雜程度遠遠超過你的想象。因爲一個用戶這次在一個時區內登入Teams，下一次可能就在另一個時區了。

怎麼做呢？很簡單，兩步，首先現在你的app的manifest文件中申請一下你的bot可以支持這種功能，值得一提的是，你可以同時指定多個域名哦。

"composeExtensions": [
  {
    "botId": "abc123456-ab12-ab12-ab12-abcdef123456",
    "messageHandlers": [
      {
        "type": "link",
        "value": {
          "domains": [
            "*.specialdomain.com"
          ]
        }
      }
    ]
  }
],

如果你使用App Studio，也可以。在Message Extension頁裏，找到Message Handlers，然後就可以一個個的添加你的預覽的域名。

第二步，你需要讓你的bot能夠處理“composeExtension/queryLink”這種命令。

如果你使用的是C#，代碼類似於：

protected override async Task<MessagingExtensionResponse> OnTeamsAppBasedLinkQueryAsync(
    ITurnContext<IInvokeActivity> turnContext, AppBasedLinkQuery query, CancellationToken cancellationToken)
{
    // 訪問query.link來分析這個網頁

    var card = new ThumbnailCard
    {
        Title = "你所希望顯示的標題",
        Text = "你所希望顯示的文字",
        Images = new List<CardImage> { new CardImage("https://yourimages.com/yourimage.png") },
    };
    var attachments = new MessagingExtensionAttachment(HeroCard.ContentType, null, card);
    var result = new MessagingExtensionResult(AttachmentLayoutTypes.List, "result", new[] { attachments }, null, "mytest");
    return new MessagingExtensionResponse(result);
}

如果使用的是nodejs：

class TeamsLinkUnfurlingBot extends TeamsActivityHandler {
  handleTeamsAppBasedLinkQuery(context, query) {
    // 訪問query.url來分析這個網頁
    const attachment = CardFactory.thumbnailCard('你所希望顯示的標題',
      query.url,
      ['https://yourimages.com/yourimage.png']);
    const result = {
      attachmentLayout: 'list',
      type: 'result',
      attachments: [attachment]
    };
    const response = {
      composeExtension: result
    };
    return response;
  }
}

當前版本的Teams並不支持所有的卡片格式，到寫這篇博客爲止只支持以下幾種：

• Hero card
• Thumbnail card
• Adaptive Card
• Office 365 Connector card

趕快寫一個你的app試試看吧