使用Visual Studio Port Tunneling来处理Twilio Webhooks的详细指南

259 阅读9分钟

Visual Studio最近引入了一个新的功能,叫做端口隧道。通过使用端口隧道,Visual Studio将为你创建一个新的公共URL(隧道URL),发送到隧道URL的HTTP请求将被转发到你在localhost上运行的ASP.NET Core项目。

端口隧道有很多的使用情况。你可以用它来轻松地在其他设备上测试你的Web应用程序,如手机和平板电脑。你也可以用它来使你的应用程序暂时公开,用于做互动演示并邀请你的观众参与。

如何使用Twilio的端口隧道

Twilio最令人兴奋的用例是,你可以使用端口隧道来测试webhooks。什么又是webhooks

"Webhooks是用户定义的HTTP回调。它们由网络应用程序中的一些事件触发,可以促进整合不同的应用程序或第三方API,如Twilio。"

在Twilio,我们的所有产品都大量使用webhooks。你可以使用webhooks来响应文本信息或管理语音通话。下面是一个图,当你的Twilio电话号码收到一条短信,而你的应用程序正在处理消息的webhook时,它看起来像什么:

Phone texts "Ahoy!" to a Twilio Phone Number, Twilio sends the SMS details (from and to phone number and the body of the message) via HTTP to your web application, then your application responds with TwiML instructions instructing to respond with "Hi!". Twilio receives the instructions and sends "Hi!" back to the original sender.

当你的Twilio电话号码收到一条短信时,Twilio会向你的应用程序发送一个包含信息细节的HTTP请求。然后你的应用程序必须用TwiML(Twilio标记语言)来指示Twilio如何回应。TwiML是由Twilio定义的带有特殊标签的XML,以提供关于如何响应消息和语音呼叫的指示。在上面描述的图中,Twilio将以 "嗨!"作为回应,因为应用程序以TwiML回应,看起来像这样:

<?xml version="1.0" encoding="utf-8"?>
<Response>
  <Message>Hi!</Message>
</Response>

其他一些类型的webhooks会通知你一个事件,而不期望指令作为回应。然而,webhook请求只能发送到公开可用的URL,当你开发和测试应用程序时,你通常在本地进行。但是,通过Visual Studio端口隧道,你可以迅速使你的网络应用程序公开,这样你就可以开发你的webhooks了!

因此,当有短信进来时,Twilio不是直接向你的应用程序发送HTTP请求,而是可以把它发送到你的Visual Studio隧道,而隧道会把它转发到你在localhost上运行的应用程序:

Diagram of the SMS webhook flow to an ASP.NET Core project tunneled via Visual Studio port tunneling. Phone sending an SMS has arrows pointing back and forth to the Twilio logo, with arrows back and forth pointing to tunnels.api.visualstudio.com, with arrows pointing back and forth to a laptop with the Visual Studio logo on it.

在本教程中,你将学习如何使用Visual Studio创建一个ASP.NET Core项目,该项目将处理Twilio SMS webhook,使用端口隧道使本地运行的应用程序公开,然后配置Twilio电话号码,在有短信进来时向公共隧道URL发送webhook请求,以便你能对其作出回应。

前提条件

在本教程中,你将需要以下东西:

  • 一台Windows机器(目前还没有关于Visual Studio for Mac的支持信息。)
  • 最新的Visual Studio 2022预览版,安装了ASP.NET和Web开发工作负载
  • 访问端口隧道的私人预览
  • 在Visual Studio中,你需要启用端口隧道的预览功能

你可以在微软的端口隧道公告帖子中找到关于如何进行这些步骤的细节。

最后,你还需要一个Twilio账户(试用版或升级版)。如果你在这里注册一个Twilio账户,当你升级到付费账户时,你将获得10美元的Twilio信用额度!

你可以在GitHub上找到本教程的源代码。如果你遇到任何问题,可以把它作为参考,如果你需要帮助,可以提交一个问题

创建一个带有端口隧道的空ASP.NET Core网络应用程序

打开Visual Studio 2022预览版,点击"创建一个新项目",然后搜索"ASP.NET Core Empty"项目模板,点击 "下一步":

Visual Studio "Create a new project" dialog. This dial lists different project templates and the user is searching "Empty" and selected "ASP.NET Core Empty" project.

在下一个屏幕上,给你的项目起一个有意义的名字,然后点击下一步。然后在最后一个屏幕上,让一切保持原样并点击创建

现在Visual Studio将生成一个空的ASP.NET Core应用程序,它使用最小的API返回 "Hello World!"。继续运行你的项目,通过按下项目名称的绿色播放箭头来查看它的运行情况。

Visual Studio top toolbar with green play arrow next to the project name "SmsBot".

Visual Studio将运行你的应用程序,打开你的浏览器,然后浏览到网络应用程序的URL,它看起来类似于*https://localhost:5000。*然而,端口号5000将是一个随机的端口号。"Hello World!"应用程序如期运行,但只在你的机器上可以到达。其他设备都不能到达它。

回到Visual Studio,打开Properties/launchSettings.json文件,将createTunneltunnelAuthentication 属性添加到带有你项目名称的配置文件中,像这样:

{
  ...
  "profiles": {
    "SmsBot": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7032;http://localhost:5032",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "createTunnel": true,
      "tunnelAuthentication": "public"
    },
    ...
  }
}

createTunnel 属性将指示Visual Studio在你运行项目时创建一个隧道,并使用该隧道公开服务于你本地运行的Web应用程序。tunnelAuthentication 属性决定了你是否需要在访问网络应用程序之前进行认证。你可以用以下选项配置tunnelAuthentication

  • private:只有你可以通过你的Visual Studio帐户登录来访问Web应用程序。这对于个人在其他设备上测试你的应用程序是非常好的。
  • org:你的组织内的任何人都可以访问该网络应用程序。你可以用它来向你的团队成员演示该应用程序。
  • public:任何人都可以访问网络应用程序,而且你不需要登录。请确保你公开分享你的应用程序是安全的!这就是你需要接收来自Twilio webhooks的HTTP请求。

现在,再次运行你的应用程序,注意底部的状态栏。在某些时候,状态会显示 "创建或启动隧道 "之类的内容。

Visual Studio status bar saying "Creating or starting tunnel " on port 7032...

就像以前一样,Visual Studio将打开你的网络浏览器并浏览你的网络应用。然而,这一次它将浏览到公共隧道的URL,看起来像vstunnel129ec8-7032.rel.tunnels.api.visualstudio.com/。

Browser with public tunnel URL in the URL bar. The URL ends with "rel.tunnels.api.visualstudio.com". The web page says "Hello World!".

现在你可以在任何其他设备上打开相同的URL,并将其发送给你的朋友和同事。只要你的项目在运行,他们就能使用在你机器上本地运行的网络应用程序。

现在你的应用程序是公开的,让我们为它添加一些Twilio魔法吧 ☎️

用ASP.NET Core响应短信

购买一个Twilio电话号码

如果你还没有这样做,你需要购买一个Twilio电话号码。要做到这一点,请登录Twilio控制台,选择电话号码,然后点击 "购买一个号码"按钮。注意,如果你有一个免费账户,你将使用你的试用信用来购买。

在 "购买号码"页面,选择你的国家,并在 "功能"栏中勾选短信。如果你想申请一个你所在地区的号码,你可以在 "号码"栏中输入你的区号。

Buy a Twilio phone number

点击 "搜索"按钮,看看有哪些号码可用,然后从结果中点击 "购买"你喜欢的号码。在你确认购买后,点击 "关闭"按钮。

在ASP.NET Core中处理Twilio SMS webhook

由于TwiML是XML,你可以使用任何技术来产生XML作为对Twilio webhook请求的响应。然而,你可以使用Twilio .NET SDK用于ASP.NET Core的Twilio辅助库,使之更容易。

首先,确保你的应用程序不再运行了。你可以按Visual Studio顶部工具栏的红色方形图标来停止你的应用程序,或者关闭浏览器窗口。

Arrow pointing to the stop button which is a red square in the top toolbar.

在Visual Studio中,右击你的项目的依赖关系节点 ,并点击**"管理NuGet包**"。这将打开Visual Studio中的NuGet包管理器窗口。点击浏览 标签并搜索**"Twilio.AspNet.Core**"。点击Twilio Labs的Twilio.AspNet.Core包,并点击安装 按钮来安装最新版本。

NuGet Package Manager window in Visual Studio searching for "Twilio.AspNet.Core". The "Twilio.AspNet.Core" package is selected and an install button is shown.

通过安装Twilio.AspNet.Core包,你也隐含地安装了Twilio NuGet包,其中有Twilio SDK。你也可以显式安装Twilio NuGet包来自己选择包的版本。

现在,用以下代码替换Program.cs中的代码:

using Twilio.AspNet.Core.MinimalApi;
using Twilio.TwiML;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

app.MapPost("/message", () =>
{
    var messagingResponse = new MessagingResponse();
    messagingResponse.Message("Ahoy!");
    return Results.Extensions.TwiML(messagingResponse);
});

app.Run();

"Hello World!"的GET/端点已被替换为*/message端点。/message*端点创建了一个MessagingResponsemessagingResponse.Message("Ahoy!") 将创建一个Message TwiML动词来回应 "Ahoy!"。
最后,Results.Extensions.TwiML 方法将创建一个TwiMLResult 对象,它负责将该对象序列化为XML并设置正确的内容类型头。

再次启动你的项目。Visual Studio将再次打开浏览器,但你会看到一个HTTP 404错误,这很好,这是预期的。把这个URL复制到某个地方,因为你在下一节会用到它。

配置你的SMS webhook

现在,你的网络应用程序正在运行,并通过隧道公开可用,你现在可以在你的Twilio电话号码上配置短信网络钩子了。

回到Twilio控制台,导航到电话号码>管理>活动号码,或者点击这个链接到活动号码页面,然后点击你的Twilio电话号码,导航到配置页面。向下滚动到Messaging 部分,在写着**"A MESSAGE COMES IN**"的地方,在第一个下拉菜单中选择**"Webhook**"选项,粘贴你的Visual Studio tunnel URL并添加*/message*路径,然后在下一个下拉菜单中选择"HTTP POST"选项。

Twilio Phone Number Messaging form. There"s a label "A MESSAGE COMES IN" with a dropdown underneath set to "Webhook". Next to the dropdown is a text field set to the Visual Studio tunnel URL, suffixed with /message. Next to the text field is another dropdown, which is set to "HTTP POST".

点击 "保存 "按钮。

测试你的SMS应用程序

现在一切都已经设置好了,是时候测试一下你的短信应用了。拿出你的个人电话,向你的Twilio电话号码发送一条短信。你应该收到 "Ahoy!"的回复。

为了获得更好的理解,我经常做的一件事就是在应用程序中设置一个断点,看看什么时候断点被击中。请随意在*/message*端点内设置一个断点,并在应用程序中玩一玩,看看你能用Twilio Messaging做什么。

接下来的步骤

祝贺你建立了这个短信应用!由于你的应用程序现在是公开的,这也意味着互联网上的任何人都可以接触到它,这就有了自己的风险。为了减少这些风险,你可以验证传入的请求是否来自Twilio,而不是一些不良行为者