Partager:
){kind=small}
Ancien développeur .NET Advocate @Vonage, ingénieur logiciel polyglotte full-stack, AI/ML
Comment envoyer un SMS avec Blazor
Blazor est le dernier d'une série de ce que j'appellerais de "magnifiques" cadres web conviviaux pour les développeurs que .NET a construits. Dans ce tutoriel, nous verrons comment envoyer un SMS à l'aide de Blazor et de l'API SMS DE VONAGE.
Tout le code de ce tutoriel se trouve sur GitHub.
Vous aurez besoin de la dernière version du NET Core 3.1 SDK
Vous aurez besoin soit de Visual Studio 2019, soit de Visual Studio pour Mac, soit de Visual Studio Code - j'utiliserai VS Code pour 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.
Naviguez jusqu'à l'endroit où vous souhaitez créer l'application et exécutez la commande suivante dans votre terminal :
Cela créera pour vous une application serveur blazor appelée SendSmsBlazor. cd dans ce répertoire et entrez la commande code . pour lancer VS Code. Pour les utilisateurs de Visual Studio, vous pouvez simplement ouvrir le fichier sln.
Ouvrez un terminal en VSCode et exécutez :
Ceci installera le paquet Vonage dans le projet.
Nous allons devoir injecter un service SMS dans notre page razor, créons donc un SmsService.
Ajouter un nouveau fichier sous le dossier Data appelé SmsService.cs. Si vous utilisez VS Code, cela va juste créer un fichier vierge, alors ajoutez-y ce qui suit.
using Microsoft.Extensions.Configuration;
using Vonage.Messaging;
using Vonage.Request;
namespace SendSmsBlazor.Data
{
public class SmsService
{
}
}
A l'intérieur de la classe SmsService nous devons injecter un objet de configuration. La configuration contiendra notre clé API et notre secret API, que nous configurerons un peu plus tard. Pour l'instant, tout ce que vous avez à faire est d'ajouter une nouvelle propriété à l'intérieur de la classe SmsService appelée Configuration de type IConfiguraiton et d'ajouter un constructeur prenant un objet IConfiguration qui attribuera simplement notre propriété Configuration à cet objet.
public IConfiguration Configuration { get; set; }
public SmsService(IConfiguration config)
{
Configuration = config;
}
À l'intérieur du SmsServicenous allons ajouter une méthode SendSms à l'intérieur de , nous allons ajouter une méthode Cette méthode prendra trois chaînes : to, from, et text qui contiendront le numéro auquel le message est destiné, le numéro de l'API Vonage d'où provient le message et le texte du message.
Du point de vue de ce service, il ne reste plus qu'à faire :
Extraire la clé et le secret de l'API de la configuration
Créer un SmsClient
Envoyer le SMS
Tout cela peut être réalisé grâce aux éléments suivants :
public SendSmsResponse SendSms(string to, string from, string text)
{
var apiKey = Configuration["VONAGE_API_KEY"];
var apiSecret = Configuration["VONAGE_API_SECRET"];
var creds = Credentials.FromApiKeyAndSecret(apiKey,apiSecret);
var client = new SmsClient(creds);
var request = new SendSmsRequest
{
To= to,
From = from,
Text = text
};
return client.SendAnSms(request);
}
Maintenant que nous avons construit le service, nous devons nous assurer que nous pouvons l'injecter dans notre page razor. Pour ce faire, nous devons aller dans Startup.cs et trouver la fonction ConfigureServices et la trouver. Ajoutez la ligne suivante à la fin de cette fonction, et le service sera injectable :
services.AddSingleton<SmsService>();
Nous allons utiliser le fichier Pages/Index.razor pour notre frontend, donc il suffit de l'ouvrir et de supprimer tout ce qui se trouve en dessous de la ligne 2.
La première chose à faire ici est d'insérer notre fichier SmsService. À cette fin, ajoutez un using et un inject comme suit :
@using SendSmsBlazor.Data
@inject SmsService SmsService
L'un des aspects les plus intéressants de Blazor est qu'il permet d'exécuter du code C# dans le navigateur - il suffit d'un bloc @code{} et c'est parti. En faisant cela, nous créons une classe anonyme en ligne, nous allons donc ajouter un bloc To, From, Text, , et MessageId à cette classe anonyme et ajouter une méthode appelée SendSms qui appellera notre SmsService. Cela va ressembler à ceci :
@code{
private string To;
private string From;
private string Text;
private string MessageId;
private void SendSms()
{
var response = SmsService.SendSms(To, From, Text);
MessageId = response.Messages[0].MessageId;
}
}
Maintenant que tout cela est fait, nous allons ajouter quelques champs de saisie. Les champs To, From, et Text seront remplis en les liant à ces champs de saisie avec l'attribut @bind à ces champs de saisie. En bas, juste au-dessus du bouton, nous afficherons l'envoi MessageId en le référençant dans une balise de paragraphe. Enfin, nous ajouterons un bouton au bas de la page qui appellera le bouton SendSms de notre classe anonyme lorsqu'il sera cliqué. Ajoutez ce qui suit entre le bloc @code et le bloc @inject et le bloc
<h1>Send an SMS!</h1>
Welcome to your new app Fill out the below form to send an SMS.
<br />
to:
<input id="to" @bind="@To" class="input-group-text" />
from:
<input id="from" @bind="From" class="input-group-text" />
text:
<input id="text" @bind="Text" class="input-group-text" />
<p>@MessageId</p>
<button class="btn btn-primary" @onclick="SendSms">Send SMS</button>
La dernière chose à faire avant de lancer notre serveur est de le configurer. Si vous vous souvenez bien, vous définissez un objet IConfiguration dans le fichier SmsService. Tout ce que vous avez à faire est d'ouvrir appsettings.json et d'ajouter deux propriétés à la configuration VONAGE_API_KEY et VONAGE_API_SECRET. Définissez-les comme étant les valeurs de la clé et du secret de l'API dans l'élément tableau de bord.
Une fois tout cela fait, retournez dans votre terminal et exécutez la commande suivante.
Votre application vous indiquera le port sur lequel elle écoute - pour moi, c'est le port 5001. localhost:5001Je remplis le formulaire et je clique sur EnvoyerSms. Vous verrez le SMS sur le numéro auquel vous l'avez envoyé, l'ID du message apparaissant juste en dessous du champ de texte.
Le code de cette démo se trouve dans GitHub.