VS Code部署Teams webhook到Azure Functions

Microsoft Teams这款产品对于我们来说已经很熟悉了,作为开发者,我们也可以通过官方的一些开发模式来build我们自己的Teams应用。

今天快速跟大家分享一下,如何在VS Code中部署Azure Function(Azure Serverless的一种解决方案),并将其作为Teams的webhook地址。

VS Code部署Teams webhook到Azure Functions_第1张图片

准备环境

  1. 准备Azure Account和Microsoft Teams账号
  2. VS Code
    1) 下载安装
    2) 为VS Code安装Azure的Extension
  3. Microsoft Teams (客户端或Web版都可以)
  4. 下载代码:
    地址:https://github.com/paul-cheun...

新建项目

  1. 根据Extension的选项登录Azure Account,选择subscription。
  2. VS Code打开下载的代码(或自己创建),Azure的Extension就会识别到。
    VS Code部署Teams webhook到Azure Functions_第2张图片
  3. 查看项目内容。这里就是简单的api function,接受Activity请求模型(微软的Bot Framework),并标记了function的trigger类型是httptrigger,认证级别也是匿名的,这样在call这个api的时候就不需要提供token了。当然实际情况是需要有token验证的,这里不多介绍。
    VS Code部署Teams webhook到Azure Functions_第3张图片

部署项目

  1. 1.build项目,点击Deploy to Function App,一路操作。
    VS Code部署Teams webhook到Azure Functions_第4张图片
  2. 选择对应的subscription
    VS Code部署Teams webhook到Azure Functions_第5张图片
  3. 选择deploy到已有的function app还是新建,根据自己需要。我这里直接覆盖已有的。
    VS Code部署Teams webhook到Azure Functions_第6张图片
    如果是新建的话,会提示输入名称,这里正常输入名称就行,如:
    VS Code部署Teams webhook到Azure Functions_第7张图片
  4. 选择Location。需要指定我们的app部署到哪个region。
    VS Code部署Teams webhook到Azure Functions_第8张图片
  5. 等待部署。

VS Code部署Teams webhook到Azure Functions_第9张图片

VS Code部署Teams webhook到Azure Functions_第10张图片

或者看output的Log
VS Code部署Teams webhook到Azure Functions_第11张图片
提示相关resource已经创建好,部署完成。

检查部署情况

我们登录Azure Portal检查一下部署情况。
可以看到URL一栏,就是我们OutgoingWebhook的地址。
VS Code部署Teams webhook到Azure Functions_第12张图片

配置Teams里的Webhook

上面已经将服务部署在Azure Functions上,接下来打开Teams进行Webhook配置。

  1. 首先登入账号到Teams,定位到team的app标签页:
    VS Code部署Teams webhook到Azure Functions_第13张图片
  2. 点击Create an outgoing webhook,填写名称和Callback URL。
    VS Code部署Teams webhook到Azure Functions_第14张图片

Callback URL来自这里:
VS Code部署Teams webhook到Azure Functions_第15张图片

  1. 创建webhook完会提示保存token(妥善保存就行,我们这里暂时不用它,略过认证部分)
    VS Code部署Teams webhook到Azure Functions_第16张图片

验证效果

以上已经成功创建了outgoing webhook,并且这个hook是调用到azure function的。现在测试一下效果。

  1. 我们再到team的channel里给它发消息(at它)

VS Code部署Teams webhook到Azure Functions_第17张图片

  1. 随便发个什么消息,然后会得到回复
    VS Code部署Teams webhook到Azure Functions_第18张图片

总结

在Teams App的开发过程中,我们经常会使用ngrok来做反向代理/内网穿透,这里就提供了另一种途径,可以将我们写好的bot代码一键部署到cloud端,也是有助于提高我们的开发效率。

使用serverless的azure实现来简化我们的部署,当然还有其它的service可以达到同样的目的,这里算是抛砖引玉,大家可以多尝试其他好方法。感谢阅读。

相关链接:

https://docs.microsoft.com/en...

https://www.microsoft.com/en-...

微软最有价值专家(MVP)


微软最有价值专家是微软公司授予第三方技术专业人士的一个全球奖项。29年来,世界各地的技术社区领导者,因其在线上和线下的技术社区中分享专业知识和经验而获得此奖项。

MVP 是经过严格挑选的专家团队,他们代表着技术最精湛且最具智慧的人,是对社区投入极大的热情并乐于助人的专家。MVP 致力于通过演讲、论坛问答、创建网站、撰写博客、分享视频、开源项目、组织会议等方式来帮助他人,并最大程度地帮助微软技术社区用户使用 Microsoft 技术。

更多详情请登录官方网站。

点击查看Azure Functions 简介

你可能感兴趣的:(VS Code部署Teams webhook到Azure Functions)