Tester avec Ngrok

Lorsque vos utilisateurs interagissent avec Vonage, par exemple en appelant un numéro Vonage, Vonage doit avertir votre application afin qu'elle puisse prendre les mesures nécessaires. Dans le cas d'une application vocale, il peut s'agir de diffuser un message en synthèse vocale à l'appelant lorsque Vonage répond à l'appel. Vonage peut également informer votre application de divers événements survenant au cours de l'appel, par exemple lorsque l'appelant raccroche. Ces notifications de Vonage sont mises en œuvre à l'aide de webhooks.

Lorsque vous testez votre application localement sur votre machine de développement, votre ordinateur n'est pas en mesure de recevoir ces notifications webhook car il n'est pas sur l'internet public.

Une façon de contourner ce problème est d'utiliser un outil gratuit appelé Ngrok. Ngrok crée un tunnel sécurisé reliant l'Internet à votre application locale. Les notifications de Vonage seront alors acheminées par Ngrok vers votre machine locale.

Pour commencer à utiliser Ngrok, suivez les étapes suivantes :

1. Téléchargez et installez Ngrok en utilisant le instructions pour votre plateforme.

2. Démarrez votre application localement et vérifiez le port qu'elle utilise. Par exemple, si vous utilisez habituellement http://localhost:3000 pour accéder à votre application, le port est alors 3000.

3. Créez un tunnel Ngrok vers ce port avec une commande telle que ngrok http 3000. Vous obtiendrez quelque chose de similaire à ce qui suit :

4. Cette commande affichera l'URL du tunnel, qui ressemblera à ce qui suit https://abcdef1.ngrok.io. Copier cette URL.

5. Configurer les webhooks de l'API de Vonage pour pointer vers cette URL.

Notez que chaque fois que vous démarrez le tunnel Ngrok, vous recevrez une nouvelle URL, n'oubliez donc pas de mettre à jour la configuration des webhooks en conséquence !

Utilisation avec IIS Express

IIS Express rejette les demandes entrantes de Ngrok si l'en-tête de l'hôte ne correspond pas à l'en-tête de l'hôte. bindingInformation dans sa configuration. Vous devrez donc configurer Ngrok pour qu'il modifie le nom d'hôte dans l'en-tête afin qu'il corresponde à la configuration d'IIS Express.

Cela peut être fait en utilisant la fonction host-header (option). La commande suivante montre comment procéder pour le port 3000 :

Si vous faites cela pour vos tests et que vous avez besoin de l'hôte d'origine pour quelque chose, vous pouvez le récupérer à partir du fichier X-Original-Host l'en-tête.

Configurer IIS Express pour le port correct

Validez que IIS Express écoute sur le port 3000, ou sur le port sur lequel vous avez décidé de configurer Ngrok, en ouvrant votre fichier properties/launchSettings.json et en s'assurant que le numéro de port indiqué dans le champ iisExpress de l'objet applicationUrl correspond au port vers lequel vous avez configuré Ngrok. Vous devez également désactiver SSL sur IIS Express en définissant le champ sslPort à 0. Voir la configuration valide suivante pour IIS Express à partir de launchSettings.json:

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

Plans Ngrok

Les plans Ngrok payants peuvent réserver des noms de tunnel et choisir celui qu'ils utiliseront au démarrage, ce qui vous évitera d'avoir à reconfigurer vos webhooks. Si vous avez un Account Ngrok payant, vous pouvez démarrer sur votre propre domaine en utilisant une commande telle que :

Dans ce cas, vous obtiendrez quelque chose de similaire à ce qui suit :

L'avantage est qu'à chaque fois que vous démarrez Ngrok, vous n'avez pas besoin de reconfigurer vos webhooks.

Interface web de Ngrok

En plus de l'URL du tunnel affichée dans la sortie de la commande, vous verrez également une URL pour l'"Interface Web" (http://127.0.0.1:4040). L'interface web vous permet d'examiner les détails de toutes les demandes reçues par le tunnel et les réponses renvoyées. Il s'agit d'un outil de débogage très utile.

Dans l'interface web, vous pouvez également utiliser le bouton "Replay" pour répéter une demande plutôt que d'avoir à vous envoyer de nombreux messages texte ou à reproduire continuellement l'événement auquel votre code de webhook répond. Ces fonctionnalités rendent le test de la réponse de votre application aux webhooks beaucoup plus pratique.

Voir aussi

• Ngrok blog post