Partager:
){kind=small}
Ancien développeur .NET Advocate @Vonage, ingénieur logiciel polyglotte full-stack, AI/ML
Comment recevoir un SMS avec ASP.NET Core MVC et SignalR
Temps de lecture : 10 minutes
Dans ce tutoriel, nous apprendrons comment recevoir des SMS à partir de l Vonage Messages APIde Vonage et les envoyer à un navigateur en temps réel. Nous utiliserons ASP.NET Core MVC pour notre serveur API et notre page web, et nous utiliserons SignalR pour nous permettre de recevoir des SMS en temps réel.
Si vous souhaitez simplement récupérer le code de cette démo, vous pouvez le trouver sur GitHub.
Vous aurez besoin d'un compte API Vonage
Vous aurez besoin de la dernière version du NET Core 3.1 SDK
Vous aurez besoin de Visual Studio 2019, Visual Studio pour Mac, ou Visual Studio Code, j'utiliserai Visual Studio 2019 pour cette démo.
Facultatif : j'ai utilisé du Ngrok pour tester cette démo
To complete this tutorial, you will need a Vonage API account. If you don’t have one already, you can sign up today and start building with free credit. Once you have an account, you can find your API Key and API Secret at the top of the Vonage API Dashboard.
This tutorial also uses a virtual phone number. To purchase one, go to Numbers > Buy Numbers and search for one that meets your needs.
Ouvrez Visual Studio et cliquez sur "Créer un nouveau projet", sélectionnez "ASP.NET Core Web Application" et cliquez sur "Suivant" Donnez un nom à votre application. Je vais nommer mon application "ReceiveSmsAspNetCoreMvc", puis cliquez sur "Créer". Sur la page suivante, sélectionnez "Application Web (Modèle-Vue-Contrôleur)" et cliquez sur "Créer".
Comme nous utilisons SignalR, nous devons ajouter deux types de dépendances. Tout d'abord, nous devons ajouter les dépendances de notre paquetage NuGet, puis les dépendances de notre paquetage client.
Nous devons installer deux paquets NuGet :
Il y a plusieurs façons de le faire ; je me contenterai d'utiliser le CLI de dotnet. Naviguez jusqu'au répertoire de votre projet et exécutez simplement :
Puisque nous dépendons de la bibliothèque SignalR Client-Side, nous devons également ajouter la bibliothèque SignalR Client-Side.
Dans Visual Studio, faites un clic droit sur vos projets wwwrooot allez à Add > Client-Side Library. Vous verrez apparaître une petite boîte de dialogue qui vous aidera à ajouter la bibliothèque. Pour cette démo, j'ai utilisé ce qui suit.
Fournisseur : unpkg
Bibliothèque : @microsoft/signalr@latest
Choisir des fichiers spécifiques : Je n'ai sélectionné que
Files/dist/browser/signalr.jsetFiles/dist/browser/signalr.min.jsEmplacement de la cible : wwwroot/js/signalr
Une fois le formulaire complété, il se présentera sous la forme suivante :
Adding a Client Side library in Visual Studio
Après avoir rempli ce formulaire, vous pouvez cliquer sur installer, et les fichiers requis seront installés sous wwwroot/js/signalr
SignalR fonctionne de la manière suivante : les navigateurs des clients se connectent à ce que l'on appelle des concentrateurs (Hubs). Les Hubs envoient des messages du serveur à chacun de leurs clients par le biais de n'importe quel mécanisme disponible. Typiquement, il s'agit d'une WebSocket, mais cela peut se faire via des Server-Side-Events (SSE) ou des Long-Polling. Nous devons créer un Hub dans notre serveur pour connecter notre serveur aux clients de notre navigateur.
Créez un nouveau dossier sous votre projet appelé Hubs. Dans ce dossier, créez un nouveau fichier C# SmsHub.cs. Ce fichier n'a pas besoin de faire grand-chose. Il déclarera simplement une classe étendant la classe Hub. Le fichier devrait ressembler à ce qui suit.
using Microsoft.AspNetCore.SignalR;
namespace ReceiveSmsAspNetCoreMvc.Hubs
{
public class SmsHub : Hub
{
}
}
Nous devons maintenant aller dans notre fichier startup.cs et ajouter les points de terminaison SignalR à notre intergiciel. L'ajout de l'intergiciel permettra à la route du hub SMS de se mettre en place et nous permettra d'utiliser SignalR dans les clients de notre navigateur. Ouvrons startup.cs et trouvons notre chemin vers la méthode ConfigureServices méthode. Ajoutons la ligne services.AddSignalR(); à cette méthode, qui ajoutera le middleware SignalR à notre serveur. Après avoir terminé, notre méthode ConfigureServices ressemblera à ceci :
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR();
}
Restez dans startup.cs et trouver la méthode Configure méthode. Cette méthode contiendra un appel à app.UseEndpointsqui prend une fonction comme argument. À l'intérieur de cette fonction, nous ferons correspondre l'élément SmsHub au chemin /smsHub. Après avoir terminé l'appel à app.UseEndpoints se présentera comme suit :
app.UseEndpoints(endpoints =>
{
endpoints.MapHub<SmsHub>("/smsHub");
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
Maintenant que l'intergiciel est en place, nous devons ajouter la méthode qui recevra le SMS de Vonage. Nous allons utiliser un contrôleur MVC vide à cette fin. Cliquez avec le bouton droit de la souris sur le dossier Controllers et allez à add -> Controller, sélectionnez "MVC Controller - Empty" et cliquez sur "Add" nommez ceci SmsController et cliquez à nouveau sur "Ajouter".
La première chose que nous devons faire dans nos SmsController injecte le HubContext pour le SmsHub. Déclarer une propriété IHubContext appelée HubContext, puis déclarer un SmsController qui prend un IHubContext comme argument et assigne ce paramètre à la propriété HubContext à la propriété Grâce à la magie de l'injection de dépendances, le contrôleur reçoit le contexte du hub lors de sa création.
/// <summary>
/// Allows access to all browser clients subscribed through the /smsHub
/// </summary>
public IHubContext<SmsHub> HubContext { get; set; }
public SmsController(IHubContext<SmsHub> hub)
{
HubContext = hub;
}
Maintenant que nous avons accès au contexte Hub, nous devons ajouter une route API pour le SMS entrant. Cette route sera celle que Vonage utilisera pour envoyer un webhook à notre application. Cette méthode prendra la demande, analysera un objet InboundSms et enverra un signal InboundSms à tous les clients connectés au concentrateur. Cette méthode transmettra ensuite le MSISDN et le texte du message à l'utilisateur. Pour référence, le MSISDN est le numéro d'où provient le message. Ajoutez ce qui suit à votre SmsController.
[HttpPost("webhooks/inbound-sms")]
public async Task<IActionResult> InboundSms()
{
using (var reader = new StreamReader(Request.Body))
{
var json = await reader.ReadToEndAsync();
var inbound = JsonConvert.DeserializeObject<InboundSms>(json);
await HubContext.Clients.All.SendAsync("InboundSms", inbound.Msisdn, inbound.Text);
}
return NoContent();
}
Ceci étant fait, il ne nous reste plus qu'à ajouter un frontend à notre application. Pour ce faire, nous allons reprendre la vue d'accueil. Ouvrir /Vies/Home/Index.cshtml et supprimez la div qui contient le texte de bienvenue, nous n'en aurons pas besoin.
Ensuite, nous allons ajouter quelques importations de scripts. Nous allons importer ~/js/sms.js (que nous allons créer dans un instant) et ~/js/signalr/dist/browser/signalr.js qui est la bibliothèque client que nous avons importée précédemment. Il suffit d'ajouter ces deux balises, et nous serons prêts à partir.
<a href="http://~/js/signalr/dist/browser/signalr.js">http://~/js/signalr/dist/browser/signalr.js</a>
<a href="http://~/js/sms.js">http://~/js/sms.js</a>La dernière chose à faire ici est d'ajouter le tableau dans lequel nous afficherons les messages. Nous allons simplement lui donner deux colonnes, From Number et Message - qui correspondront aux Msisdn et aux Text de nos SMS entrants.
<h1>Messages</h1>
<table class="table" id="messageList">
<thead>
<tr>
<th>From Number</th>
<th>Message</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
La dernière chose que nous devons faire est d'ajouter un gestionnaire d'événement pour notre InboundSms événement. Nous le ferons dans le fichier sms.js que nous venons de référencer. Allez-y et ajoutez un fichier sms.js dans le répertoire /wwwroot/js dans le répertoire. Il y a trois choses que nous devons faire dans ce fichier.
Construire la connexion SignalR au smsHub
Enregistrez un gestionnaire d'événement pour
InboundSmsqui ajoutera une nouvelle ligne à notre liste de messagesDémarrer la connexion SignalR.
Nous pouvons effectuer ces trois opérations en ajoutant ce qui suit au fichier sms.js ce qui suit.
"use strict";
var connection = new signalR.HubConnectionBuilder().withUrl("/smsHub").build();
connection.on("InboundSms", function (fromNumber, text) {
var rowHtml =
'<tr><td>' +
fromNumber +
'</td><td>' +
text +
'</td></tr>';
$('#messageList tbody').append(rowHtml);
});
connection.start()
.then(function () {
console.log("connection started");
})
.catch(function (err) {
console.log("Error encountered: " + err);
})
Du point de vue du développement, c'est tout ce que nous avions à faire, alors passons aux tests. Nous allons tester ceci avec Ngrok pour tester cette démo. Ngrok nous permet de construire un tunnel accessible au public vers notre application, ce qui est utile lorsque nous avons besoin d'exposer des points de terminaison HTTP accessibles au public à nos applications. Si vous allez tester ceci avec IIS Express comme je le fais, vous voudrez bien consulter notre explicatif sur le sujet car il y a des considérations particulières à prendre en compte. En résumé, nous devons ajouter une option --host-header au démarrage de ngrok.
Dans Visual Studio, cliquez avec le bouton droit de la souris sur votre fichier csproj et allez dans Propriétés. Cliquez sur l'onglet Debug. Par commodité, lorsque nous testons, nous allons décocher la case Enable SSL (Activer SSL). Prenez note de l'URL de l'application et du numéro de port à la fin de celle-ci.
The IIS configuration screen
Ensuite, nous allons démarrer ngrok. Nous ferons pointer les requêtes entrantes vers le port de l'URL de notre application, et nous ferons en sorte que l'hôte et le port remplacent l'en-tête de l'hôte entrant. Démarrez ngrok en lançant la commande suivante dans un nouveau terminal (remplacez le numéro de port par votre port).
Avec cette commande, votre terminal sera pris en charge par ngrok. Il vous montrera une URL accédant à cette URL qui transmettra les requêtes à votre serveur local. Cette URL sera de la forme http://randomhash.ngrok.io. Mon hash aléatoire a donné d98024d97b04Donc, pour le reste de cette explication, remplacez cette valeur par la valeur obtenue pour la vôtre.
Running Ngrok to give local access to our application
Après avoir démarré mon application dans IIS Express, je peux naviguer vers mon URL ngrok pour m'assurer qu'elle est accessible au public.
Si vous vous souvenez bien, nous avons annoté notre méthode InboundSms dans notre SmsController avec [HttpPost("webhooks/inbound-sms")] ceci établit une route pour moi vers http://d98024d97b04.ngrok.io/webhooks/inbound-sms pour passer l'appel à inbound-sms. La dernière chose que je dois faire avant de commencer à tester est d'indiquer à Vonage où envoyer mes SMS à l'URL que je viens de mentionner.
Pour ce faire, accédez à ${CUSTOMER_DASHBOARD_URL}/settings. Sous Paramètres SMS par défaut, définissez le champ Messages entrants sur cette URL, et modifiez la Méthode HTTP en POST-JSON. Cliquez sur Enregistrer les modifications et nous sommes prêts à tester. Naviguez jusqu'à votre page d'accueil et envoyez un message de test à votre numéro virtuel API Vonage. Si vous n'êtes pas sûr de votre numéro virtuel Vonage, vous pouvez le trouver dans votre tableau de bord sous Numbers. Après avoir envoyé un message au serveur, vous verrez les SMS arriver sur votre serveur en temps réel en regardant la page web associée à l'application.
Incoming SMS messages being displayed on the screen in the application we built
Et c'est tout ce qu'il faut faire pour recevoir des messages et les afficher en temps réel !
Tout le code de cette démo se trouve sur GitHub