Blazor Helpers App Twilio: Receiving SMS


Receiving confirmation replies for volunteered tasks via SMS using Twilio. Includes deciphering the response into a Yes or No.

Ref: Receive and reply to inbound SMS messages with ASP.NET Core
The code in this link is usable in a Blazor Server Controller. and
Configure your Webhook URL

The response to messages sent to your Twilio Phone Number are handled by a HTTOPost method in Blazor Server Controller:

    [ApiController]
    [Route("[controller]")]
    public class TwillioController : Controller
    {
        private readonly ApplicationDbContext _context;
        public TwillioController(ApplicationDbContext context)
        {
            this._context = context;
        }

        [HttpPost]
        public async Task<TwiMLResult> Index()
        {
            ...
        }
    }

The required references in the Controller code are:

using Twilio.AspNet.Core;
using Twilio.TwiML;
using Twilio;
using Twilio.Rest.Api.V2010.Account;

Again these are all covered in the app project file by:

	<ItemGroup>
		<PackageReference Include="Twilio" Version="5.53.0" />
		<PackageReference Include="Twilio.AspNet.Core" Version="5.37.2" />
	</ItemGroup>

Expanding the Index method:

    [HttpPost]
    public async Task<TwiMLResult> Index()
    {
        var requestBody = Request.Form["Body"];
        // Get the helper from their mobile number
        var from = Request.Form["From"];
        Helper helper = await dataAccessService.GetHelperByMobile(from);
        // to will be the Twilio number:
        var to = Request.Form["To"];
        
        // Proccess the response: See next blog post
        await handleRecvdTwilioSMS.ProcessMessage(requestBody, from, helper);

       // A Blank response so it isn't sent
        var messagingResponse = new MessagingResponse();
        return new TwiMLResult(messagingResponse);
    }

Configuring Twilio for Message Reception

  • Log into Twilio and go to your Console
  • Click on see all phone numbers, then on your number.
  • Firstly turn off Voice & Fax
    • Under that heading make sure that the Webhook box is empty
  • Enable Messaging
    • Configure With: Webhooks etc.
    • A Message Comes In:
      • Webhook: Your <Blazor Server URL><The Sevice Name>
      • eg. https://myhelpersapp.azurewebsites.net/Twilio
  • Press [Save]

Debugging

This is rather more complex as development will typically use IIS Express which typically is on a NAT network and therefore this Controller is hidden from the outside world. In particular Twilio can’t forward to it. The previous section assumed that the Blazor Service was deployed. What about debugging first? The URL you would typically use is something like:

https://localhost:44378/twilio

You need a ngrok tunnel so Twilio can reach your development machine. Setup from here

Once setup you run a command such as:

ngrok.exe http -host-header="https://localhost:44378/" 44378

Which gives you something like:

ngrok by @inconshreveable
(Ctrl+C to quit)
Session Status                online
Account                       Me (Plan: Free)
Version                       2.3.35
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://e32cfa9000cf.ngrok.io -> http://localhost:44378
Forwarding                    https://e32cfa9000cf.ngrok.io -> http://localhost:44378
Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

Note that:

https://e32cfa9000cf.ngrok.io

is forwarding to:

https://localhost:44378

So any HTTP GET or POST to the first will be forwarded to localhost.

Nb: If you get an ERR_NGROK_108 error, kill existing running ngoks via Task Manager.

Now, take the first URL and in “Configuring Twilio for Message Reception” use that URL in the WebHook URL. Remember to add the service. Eg:

https://e32cfa9000cf.ngrok.io/twilio

Finally

Remember that the ngok URL will be new for each session and to change the webhook also when you deploy the Blazor app.

Nb: Instead of ngrok.exe http -host-header="https://localhost:44378/" 44378 command line, you can install Ngok Extensions in Visual Studio via Manage Extensions. Then in the Tools menu you get Start ngok Tunne command.

Also: You want to install Twilio CLI

Next: Onforwarding SMS responses.

 TopicSubtopic
   
 This Category Links 
Category:Twilio SMS Index:Twilio SMS
  Next: > Blazor Helpers App Twilio
<  Prev:   Blazor Helpers App Twilio