https://a.storyblok.com/f/270183/167873/7dc73bd4c5/sms-receive.png

Como receber mensagens SMS com o ASP.NET MVC Framework

Publicado em May 18, 2021

Tempo de leitura: 6 minutos

Meu tutorial anterior explicou como usar a biblioteca de clientes da Vonage Biblioteca de Cliente C# para enviar sua primeira mensagem SMS a partir de um aplicativo web ASP.NET MVC. Nesta continuação, vou explorar ainda mais a Plataforma Vonage, mostrando como receber mensagens SMS em um número de telefone da Vonage usando a Biblioteca de Cliente C#.

Requisitos

Receba webhooks no seu localhost com o Ngrok

A SMS API da Vonage utiliza webhooks para informar ao seu aplicativo web ASP.NET que uma mensagem de texto foi recebida em um dos seus números de telefone da Vonage. Para isso, a Vonage precisa poder fazer uma solicitação HTTP para uma URL pública. Como estamos desenvolvendo nosso aplicativo em nossa máquina local, precisamos criar um túnel local que forneça uma URL pública à nossa máquina. Usaremos o o ngrok para expor a porta na internet e facilitar a comunicação com a plataforma da Vonage durante essa fase de testes. Essa abordagem evita que você precise fazer a implantação do seu aplicativo.

Baixe o ngrok e execute o seguinte comando no Prompt de Comando (substitua o número da porta pelo número da porta na qual você deseja executar o aplicativo).

ngrok http 8080 -host-header="localhost:8080"

Ngrok URL

O comando acima permite que seu servidor local (em execução na porta indicada acima) tenha uma URL pública que será usada para redirecionar os dados recebidos (solicitações HTTP) de volta para o seu servidor local. É necessário especificar o cabeçalho “host” para garantir que ele coincida com o da aplicação e do ngrok, e para assegurar que as solicitações não sejam rejeitadas.

Mergulhando no código

No tutorial anterior, criamos um projeto ASP.NET MVC e adicionamos outro controlador chamado SMSController.cs. Em seguida, criamos dois métodos de ação. Um deles servia para apresentar a visualização dos detalhes do SMS (número de destino e texto da mensagem) e o outro para recuperar os valores do formulário e enviar um SMS.

Dando continuidade ao projeto da post anterior do blog, vamos criar um método de ação chamado “Receive” em SMSController.cs. Esse caminho receberá os dados de SMS de entrada, já que configuraremos o webhook da Vonage (mais adiante neste tutorial) para nossa URL do ngrok com a rota “SMS/Receive”.

Adicione [FromUri] ao parâmetro para ler o SMS recebido. Para poder usar [FromUri], é necessário instalar o seguinte pacote: Microsoft.AspNet.WebApi.Core. Acima desse método, adicione um HTTPGetAttribute para restringir o método a aceitar apenas solicitações GET. Se os valores de response.to (o número de telefone da Vonage) e msidsn (o remetente) não forem nulos, exiba a mensagem na janela de saída usando Debug.WriteLine. Caso contrário, o endpoint foi acionado por outro motivo que não uma mensagem SMS recebida. (Isso pode acontecer quando você configura seu webhook pela primeira vez. Veremos isso em breve.)

[System.Web.Mvc.HttpGet]
public ActionResult Receive([FromUri]SMS.SMSInbound response)
{
    if (null != response.to && null != response.msisdn)
    {
        Debug.WriteLine("-------------------------------------------------------------------------");
        Debug.WriteLine("INCOMING TEXT");
        Debug.WriteLine("From: " + response.msisdn);
        Debug.WriteLine(" Message: " + response.text);
        Debug.WriteLine("-------------------------------------------------------------------------");
        return new HttpStatusCodeResult(200);
    }
    else {
        Debug.WriteLine("-------------------------------------------------------------------------");
        Debug.WriteLine("Endpoint was hit.");
        Debug.WriteLine("-------------------------------------------------------------------------");
        return new HttpStatusCodeResult(200);
    }
}

Executar o aplicativo web ASP.NET

No Solution Explorer, expanda o projeto e clique em Propriedades. Clique na aba e altere a URL do projeto para a mesma porta que você está expondo via ngrok. Por fim, execute o projeto.

Project settings

Defina a URL do webhook de retorno de chamada por SMS para o seu número da Vonage

Agora, use a CLI da Vonage para criar um aplicativo da Vonage e um webhook para ele.

Instale a CLI do Vonage globalmente com este comando:

npm install @vonage/cli -g

Em seguida, configure a CLI com sua chave e seu segredo da API da Vonage. Você pode encontrar essas informações no Painel do Desenvolvedor.

vonage config:set --apiKey=VONAGE_API_KEY --apiSecret=VONAGE_API_SECRET

Criar um aplicativo de voz

Crie um novo diretório para o seu projeto e acesse-o com o comando `cd`:

mkdir my_project
CD my_project

Agora, use a CLI para criar um aplicativo da Vonage.

vonage apps:create ✔ Application Name … your_app_name ✔ Select App Capabilities › Messages ✔ Create messages webhooks? … yes ✔ Inbound Message Webhook - URL … https://www.example.ngrok.io/SMS/Recieve ✔ Inbound Message Webhook - Method › GET ✔ Status Webhook - URL … https://example.com/webhook_name ✔ Status Webhook - Method › POST ✔ Allow use of data for AI training? Read data collection disclosure - https://help.nexmo.com/hc/en-us/articles/4401914566036 … yes

Agora você precisa de um número para poder receber chamadas. Você pode alugar um usando o comando a seguir (substituindo o código do país pelo seu). Por exemplo, se você estiver nos EUA, substitua GB por US:

vonage numbers:search US vonage numbers:buy [NUMBER] [COUNTRYCODE]

Agora, vincule o número ao seu aplicativo:

vonage apps:link --number=VONAGE_NUMBER APP_ID

Receber um SMS com o ASP.NET

Você está pronto para começar! Com seu aplicativo web ASP.NET em execução, abra a janela de saída no Visual Studio. Envie um SMS para o seu número de telefone da Vonage e você verá as mensagens chegando! Seu aplicativo web ASP.NET é capaz de receber mensagens SMS enviadas para o seu número de telefone da Vonage por meio de um webhook de entrada!

Fique à vontade para entrar em contato por e-mail ou Twitter se tiver alguma dúvida!

Compartilhar:

https://a.storyblok.com/f/270183/150x150/a3d03a85fd/placeholder.svg
Sidharth Sharma