📨 Enviar SMS con Azure Communication Services desde una aplicación ASP.NET MVC

✅ Introducción

En esta entrada te voy a enseñar cómo he integrado Azure Communication Services (ACS) en un proyecto MVC en Visual Studio para simular el envío de mensajes SMS. Este proyecto forma parte de una charla técnica que he preparado para exponer en clase.

🧠 ¿Qué es Azure Communication Services?

Azure Communication Services es una plataforma de Microsoft que permite incorporar funcionalidades de comunicación como:

SMS
Llamadas de voz y vídeo
Chat en tiempo real
Emails (con la nueva integración de Azure Email)

Esto nos permite construir aplicaciones completas con notificaciones y comunicación integrada, sin depender de servicios externos como Twilio o Nexmo.

🧱 Paso 1: Crear el recurso en Azure

Desde el portal de Azure:

Creamos un recurso de tipo Communication Services.
Elegimos una región (en mi caso, Estados Unidos, ya que permite aprovisionar números telefónicos).
Copiamos la connection string desde el apartado Keys para usarla más adelante en nuestro código.

⚠️ Nota: Las cuentas de Azure for Students no permiten enviar SMS reales ni adquirir números PSTN. Por tanto, mi demo es funcional pero no realiza el envío real.

⚙️ Paso 2: Configurar el proyecto MVC

He creado un proyecto ASP.NET MVC en Visual Studio.

appsettings.json

Incluí la connection string de ACS en el archivo de configuración:

jsonCopiarEditar"ConnectionStrings": {
  "ACSConnectionString": "endpoint=https://...;accesskey=..."
}

Program.cs

Registré el SmsClient en el contenedor de servicios:

csharpCopiarEditarusing Azure.Communication.Sms;

var builder = WebApplication.CreateBuilder(args);

string smsConnection = builder.Configuration.GetConnectionString("ACSConnectionString");
builder.Services.AddSingleton(new SmsClient(smsConnection));

builder.Services.AddControllersWithViews();

var app = builder.Build();
// Middleware y rutas por defecto aquí...

📤 Paso 3: Crear el controlador SMS

Creamos un nuevo controlador SmsController.cs para gestionar el formulario y simular el envío:

csharpCopiarEditarpublic class SmsController : Controller
{
    private readonly SmsClient _smsClient;

    public SmsController(SmsClient smsClient)
    {
        _smsClient = smsClient;
    }

    [HttpPost]
    public IActionResult EnviarSms(string telefonoDestino, string mensaje)
    {
        try
        {
            var response = _smsClient.Send(
                from: "+1XXXXXXX", // Número registrado en ACS
                to: telefonoDestino,
                message: mensaje
            );

            ViewBag.Resultado = $"SMS enviado correctamente. ID: {response.Value.MessageId}";
        }
        catch (Exception ex)
        {
            ViewBag.Resultado = $"Error al enviar el SMS: {ex.Message}";
        }

        return View("Index");
    }

    public IActionResult Index()
    {
        return View();
    }
}

🎨 Paso 4: Crear la vista con diseño mejorado

Creamos Views/Sms/Index.cshtml con Bootstrap 5 para que el formulario luzca profesional:

htmlCopiarEditar<div class="container mt-5">
    <div class="card shadow-lg">
        <div class="card-header bg-primary text-white">
            <h4>Enviar SMS con Azure</h4>
        </div>
        <div class="card-body">
            <form method="post">
                <div class="mb-3">
                    <label>Teléfono destino</label>
                    <input type="text" class="form-control" name="telefonoDestino" required>
                </div>
                <div class="mb-3">
                    <label>Mensaje</label>
                    <textarea class="form-control" name="mensaje" rows="4" required></textarea>
                </div>
                <button type="submit" class="btn btn-success">Enviar</button>
            </form>

            @if (ViewBag.Resultado != null)
            {
                <div class="alert alert-info mt-3">
                    @ViewBag.Resultado
                </div>
            }
        </div>
    </div>
</div>

🧪 Resultado y conclusión

El formulario simula el envío de un SMS usando el SDK de Azure. Aunque mi cuenta no permite envíos reales, el código está completamente funcional para usar en producción con una cuenta empresarial o de pago.

📝 Conclusión

Este proyecto me ha permitido aprender:

Cómo usar servicios de Azure desde una app MVC.
Cómo configurar el SDK de Azure Communication Services.
Cómo diseñar una interfaz atractiva para enviar SMS.

Autor: Manuel Pérez Benavent

Máster: Desarrollo Web Full Stack + MultiCloud

Centro: Tajamar Tech

Año académico: 2024-2025

Código / recursos utilizados / Otros datos de interés: https://github.com/manu12perez/CharlaCommunicationServices.git

LinkedIn: www.linkedin.com/in/manuel-pérez-986632173