Compartir:
){kind=small}
Antiguo desarrollador .NET Advocate @Vonage, ingeniero de software poliglota full-stack, AI/ML
Cómo enviar un SMS con Blazor
Blazor es el último de una serie de lo que yo llamaría "magníficos" frameworks web de fácil desarrollo que ha creado .NET. En este tutorial, veremos cómo enviar un SMS utilizando Blazor y la SMS API.
Todo el código de este tutorial se encuentra en GitHub.
Necesitará la última versión del .NET Core 3.1 SDK
Necesitarás Visual Studio 2019, Visual Studio para Mac o Visual Studio Code: utilizaré VS Code para esta demostración.
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.
Navega hasta donde quieras construir la aplicación y ejecuta el siguiente comando en tu terminal:
Esto creará una aplicación de servidor blazor llamada SendSmsBlazor. cd en este directorio e introduzca el comando code . para iniciar VS Code. Para los usuarios de Visual Studio, puede simplemente abrir el archivo sln.
Abre un terminal en VSCode y ejecútalo:
Esto instalará el paquete de Vonage en el proyecto.
Tendremos que inyectar un servicio SMS en nuestra página razor, así que vamos a crear un SmsService.
Añada un nuevo archivo en la carpeta Data llamado SmsService.cs. Si está utilizando VS Code, esto sólo va a crear un archivo en blanco, por lo que añadir lo siguiente a la misma.
using Microsoft.Extensions.Configuration;
using Vonage.Messaging;
using Vonage.Request;
namespace SendSmsBlazor.Data
{
public class SmsService
{
}
}
Dentro de la clase SmsService debemos inyectar un objeto de configuración. El config contendrá nuestra clave API y nuestro secreto API, que configuraremos un poco más tarde. De momento, basta con añadir una nueva propiedad dentro de la clase SmsService llamada Configuration de tipo IConfiguraiton y añadir un Constructor que tome un objeto IConfiguration que simplemente asignará nuestra propiedad Configuration a ese objeto.
public IConfiguration Configuration { get; set; }
public SmsService(IConfiguration config)
{
Configuration = config;
}
Dentro del SmsServicevamos a añadir un método SendSms método. Ese método tomará tres cadenas: to, fromy text que contendrán el número al que se dirige el mensaje, el número de la API de Vonage del que proviene el mensaje y el texto del mensaje.
Todo lo que queda por hacer desde la perspectiva de este servicio es:
Extraiga la clave y el secreto de la API de la configuración
Crear un SmsClient
Enviar el SMS
Todo esto se puede conseguir con lo siguiente:
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);
}
Ahora que tenemos el servicio construido, tenemos que asegurarnos de que podemos inyectarlo en nuestra página razor. Para ello, tenemos que ir a Startup.cs y encontrar la función ConfigureServices función Añadir la siguiente línea al final de esta función, y el servicio será inyectable:
services.AddSingleton<SmsService>();
Vamos a utilizar el Pages/Index.razor para nuestro frontend, así que ábrelo y borra todo lo que esté por debajo de la línea 2.
Lo primero que tenemos que hacer aquí es tirar de nuestro SmsService. Para ello, añadiremos un using y una sentencia inject de la siguiente manera:
@using SendSmsBlazor.Data
@inject SmsService SmsService
Una de las cosas realmente buenas de Blazor es que te permite ejecutar código C# en el navegador -todo lo que necesitamos es un bloque @code{} y listo. Al hacer esto estamos creando una clase anónima en línea, por lo que añadiremos un bloque To, From, Texty MessageId a esta clase anónima y añadiremos un método llamado SendSms que llamará a nuestro SmsService. Esto se verá así:
@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;
}
}
Ahora que tenemos todo esto fuera del camino, vamos a añadir algunos campos de entrada. El To, Fromy Text se rellenarán vinculándolos a estos campos de entrada con el atributo @bind atributo. En la parte inferior, justo encima del botón, mostraremos el mensaje enviado MessageId haciendo referencia a él en una etiqueta de párrafo. Por último, añadiremos un botón en la parte inferior que llamará al botón SendSms de nuestra clase anónima. Añade lo siguiente entre el bloque @code y el bloque @inject bloque:
<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>
Lo último que debemos hacer antes de poner en marcha nuestro servidor es configurarlo. Si recuerdas, configuras un objeto IConfiguration en el directorio SmsService. Todo lo que necesitas hacer es abrir appsettings.json y añadir dos propiedades a la configuración VONAGE_API_KEY y VONAGE_API_SECRET. Ajústalas a los valores de la clave y el secreto de la API en el Dashboard.
Con todo esto hecho, sólo tienes que volver a tu terminal y ejecutar el siguiente comando.
Su aplicación le dirá en qué puerto está escuchando-para mí es el puerto 5001, así que navegaría a localhost:5001rellena el formulario y pulsa SendSms. Verás el SMS en el número al que lo has enviado y el ID del mensaje aparecerá justo debajo del campo de texto.
El código de esta demo se encuentra en GitHub.