Testes com o Ngrok

Quando seus usuários interagem com a Vonage, por exemplo, ao ligar para um número da Vonage, a Vonage precisa notificar seu aplicativo para que ele possa tomar as medidas necessárias. No caso de um aplicativo de voz, isso pode significar reproduzir uma mensagem de conversão de texto em fala para o chamador quando a Vonage atender a chamada. A Vonage também pode manter seu aplicativo informado sobre vários eventos que ocorrem durante a chamada, como quando o chamador desliga. Essas notificações da Vonage são implementadas usando webhooks.

Um problema é que, quando você está testando seu aplicativo localmente em sua máquina de desenvolvimento, seu computador não consegue receber essas notificações de webhook, pois não está conectado à Internet pública.

Uma maneira de contornar esse problema é usar uma ferramenta gratuita chamada Ngrok. O Ngrok cria um túnel seguro que conecta a Internet ao seu aplicativo em execução local. As notificações da Vonage serão, então, encaminhadas pelo Ngrok para o seu computador local.

Para começar a usar o Ngrok, siga estas etapas:

  1. Baixe e instale o Ngrok usando o instruções para a sua plataforma.

  2. Inicie seu aplicativo localmente e verifique qual porta ele utiliza. Por exemplo, se você costuma usar http://localhost:3000 Para acessar seu aplicativo, a porta é a 3000.

  3. Crie um túnel Ngrok para essa porta com um comando como, por exemplo: ngrok http 3000. Você verá algo semelhante ao seguinte:

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

  1. Este comando exibirá a URL do túnel, que terá um formato semelhante a https://abcdef1.ngrok.io. Copie este URL.

  2. Configure seus webhooks da API da Vonage para apontar para esta URL.

Observe que, sempre que você iniciar o túnel do Ngrok, receberá uma nova URL; portanto, não se esqueça de atualizar a configuração dos webhooks de acordo com isso!

Utilização com o IIS Express

O IIS Express rejeita solicitações recebidas do Ngrok se o cabeçalho de host não corresponder ao bindingInformation padrão em sua configuração. Portanto, você precisará configurar o Ngrok para alterar o nome do host no cabeçalho, de modo que ele corresponda à configuração do IIS Express.

Isso pode ser feito usando o Ngrok host-header opção. O comando a seguir mostra como fazer isso para a porta 3000:

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

Se você estiver fazendo isso para fins de teste e precisar do host original para alguma finalidade, poderá recuperá-lo a partir do X-Original-Host cabeçalho.

Configure o IIS Express para a porta correta

Verifique se o IIS Express está escutando na porta 3000 — ou na porta que você tiver decidido configurar no Ngrok — abrindo seu properties/launchSettings.json e verificar se o número da porta no iisExpress do objeto applicationUrl O campo corresponde à porta para a qual você configurou o Ngrok para encaminhar. Você também deve desativar o SSL no IIS Express definindo o sslPort para 0. Veja a seguinte configuração válida para o IIS Express em launchSettings.json:

"iisSettings": {
    "windowsAuthentication": false,
    "anonymousAuthentication": true,
    "iisExpress": {
      "applicationUrl": "http://localhost:3000/",
      "sslPort": 0
    }
  }

Planos do Ngrok

Os planos pagos do Ngrok permitem reservar nomes de túneis e escolher qual deles usar na inicialização, para que você não precise reconfigurar seus webhooks. Se você tiver um account pago no Ngrok, poderá iniciar o serviço em seu próprio domínio usando um comando como este:

ngrok http -subdomain=mydomain 3000

Nesse caso, você verá algo semelhante ao seguinte:

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

Isso tem a vantagem de que, sempre que você iniciar o Ngrok, não precisará reconfigurar seus webhooks.

Interface web do Ngrok

Além da URL do túnel exibida na saída do comando, você também verá uma URL para a “Interface da Web” (http://127.0.0.1:4040). A interface web permite examinar os detalhes de todas as solicitações recebidas pelo túnel e das respostas retornadas. Essa é uma ferramenta de depuração muito útil.

Na interface da web, você também pode usar o botão “Replay” para repetir uma solicitação, em vez de ter que enviar várias mensagens de texto para si mesmo ou reproduzir continuamente o evento ao qual o código do seu webhook está respondendo. Esses recursos tornam muito mais prático testar a resposta do seu aplicativo aos webhooks.

Veja também