Leer en inglés

Compartir a través de


Tutorial: Envío de correo electrónico e invocación de otros procesos empresariales desde App Service

En este tutorial, aprenderá a integrar una aplicación de App Service con los procesos empresariales. Esto es frecuente en algunos escenarios de aplicaciones web, como los siguientes:

  • Envío de correos electrónicos de confirmación para una transacción
  • Incorporación de un usuario a un grupo de Facebook
  • Conexión a sistemas de terceros, como SAP, Salesforce, etc.
  • Intercambio de mensajes B2B estándar

En este tutorial, enviará correos electrónicos con Gmail desde una aplicación de App Service mediante Azure Logic Apps. Existen otros mecanismos para enviar correos electrónicos desde una aplicación web, como la configuración de SMTP proporcionada por el marco del lenguaje. Sin embargo, Azure Logic Apps ofrece muchas más posibilidades a la aplicación de App Service sin aumentar la complejidad del código. Azure Logic Apps cuenta con una sencilla interfaz de configuración para las integraciones empresariales más comunes, que la aplicación puede llamar en cualquier momento mediante una solicitud HTTP.

Requisito previo

Implemente una aplicación con el marco de lenguaje que prefiera para App Service. Para ver un tutorial acerca de cómo implementar una aplicación de ejemplo, consulte lo siguiente:

Creación de la aplicación lógica

  1. En Azure Portal, cree un recurso de aplicación lógica de consumo siguiendo las instrucciones de Creación de un flujo de trabajo de consumo de ejemplo. Cuando se abra la página con los desencadenadores comunes y la galería de plantillas, vuelva a este tutorial.

  2. En la sección Empezar con un desencadenador común, seleccione el desencadenador denominado Cuando se reciba una solicitud HTTP .

    Captura de pantalla que muestra la página de presentación del diseñador con Cuando se reciba una solicitud HTTP resaltada.

  3. En el cuadro de información del desencadenador, seleccione Usar una carga de ejemplo para generar el esquema.

    Captura de pantalla en la que se muestra el cuadro de diálogo Cuando se recibe una solicitud HTTP con la opción Usar una carga de ejemplo para generar el esquema seleccionada.

  4. Copie el siguiente código JSON de ejemplo en el cuadro de texto y seleccione Listo.

    JSON
    {
        "task": "<description>",
        "due": "<date>",
        "email": "<email-address>"
    }
    

    Se generará el esquema con los datos de solicitud que desee. En la práctica, solo puede capturar los datos reales de la solicitud que genera el código de la aplicación, por lo que tendrá que dejar que Azure genere el esquema JSON.

  5. En la barra de herramientas del diseñador del flujo de trabajo, seleccione Guardar.

    Aparecerá la dirección URL del desencadenador de solicitudes HTTP. Cópiela utilizando el icono correspondiente para utilizarla más tarde.

    Captura de pantalla que resalta el icono de copia para copiar la URL del desencadenador de solicitud HTTP.

    Esta definición de la solicitud HTTP le permitirá desencadenar lo que quiera en este flujo de trabajo de aplicación lógica, ya sea Gmail u otra aplicación. Más adelante, invocará esta dirección URL en la aplicación de App Service. Para más información sobre el desencadenador de la solicitud, consulte la referencia sobre las solicitudes HTTP y su respuesta.

  6. En el desencadenador, seleccione Nuevo paso. En el cuadro de búsqueda Choose an operation (Elegir una operación), escriba Todo.

  7. En el cuadro de búsqueda, escriba Gmail. Busque y seleccione la acción denominada Enviar correo electrónico (V2).

    Sugerencia

    Puede buscar otros tipos de integraciones, como SendGrid, MailChimp, Microsoft 365 y SalesForce. Para más información, consulte Conectores administrados para Azure Logic Apps.

  8. En la acción de Gmail, seleccione Iniciar sesión para autenticar el acceso a la cuenta de Gmail desde la que quiera enviar el correo electrónico.

    Captura de pantalla que muestra la acción de Gmail en la que inicia sesión en su cuenta de Gmail.

  9. Después de iniciar sesión, seleccione dentro del cuadro Para, que abrirá automáticamente la lista de contenido dinámico. En esta lista, junto a la acción Cuando se reciba una solicitud HTTP, seleccione Ver más.

    Captura de pantalla que muestra el botón Ver más junto a la acción Cuando se recibe una solicitud HTTP.

    Ahora, debería ver las tres propiedades de los datos JSON de ejemplo que usó anteriormente. En este paso, utilizará estas propiedades de la solicitud HTTP para crear un correo electrónico.

  10. En el valor del campo Para, seleccione Correo electrónico. Si lo desea, cierre la lista de contenido dinámico seleccionando Agregar contenido dinámico.

    Captura de pantalla que muestra la opción de correo electrónico y la opción Agregar contenido dinámico resaltada.

  11. En la lista Agregar nuevo parámetro, seleccione Asunto y Cuerpo.

  12. Seleccione dentro del cuadro Asunto y, de la misma manera, seleccione Tarea. Con el cursor todavía en el cuadro Asunto, escriba creado.

  13. Seleccione dentro del cuadro Cuerpo y, de la misma manera, seleccione Vencimiento. Mueva el cursor a la izquierda de Vencimiento y escriba Este elemento de trabajo vencerá el.

    Sugerencia

    Si deseara editar contenido HTML directamente en el cuerpo del correo electrónico, en la barra de herramientas del diseñador, seleccione Vista Código. Asegúrese de conservar el código del contenido dinámico (por ejemplo: @{triggerBody()?['due']})

    Captura de pantalla que muestra la vista de código para visualizar el contenido HTML directamente en el cuerpo del correo electrónico.

  14. A continuación, agregue una respuesta HTTP asincrónica al desencadenador HTTP. Entre el desencadenador HTTP y la acción de Gmail, seleccione el signo + y seleccione Agregar una rama paralela.

    Captura de pantalla que muestra el signo + y la opción Agregar una rama paralela resaltada.

  15. En el cuadro de búsqueda, busque respuesta y seleccione la acción Respuesta.

    Recorte de pantalla que muestra la barra de búsqueda y la acción de respuesta resaltada.

    De forma predeterminada, la acción Respuesta envía un estado HTTP 200. Ese estado es aceptable para este tutorial. Para más información, consulte esta referencia sobre las solicitudes HTTP y su respuesta.

  16. En la barra de herramientas del diseñador, seleccione Guardar de nuevo.

Incorporación del código de la solicitud HTTP en la aplicación

Asegúrese de que anteriormente copió la dirección URL del desencadenador de la solicitud HTTP. Como contiene información confidencial, no es conveniente que la incluya directamente en el código. Con App Service, puede hacer referencia a ella como una variable de entorno mediante la configuración de la aplicación.

En Cloud Shell, cree la configuración de la aplicación con el comando siguiente (reemplace <app-name>, <resource-group-name> y <logic-app-url>):

Azure CLI
az webapp config appsettings set --name <app-name> --resource-group <resource-group-name> --settings LOGIC_APP_URL="<your-logic-app-url>"

En el código, envíe una solicitud HTTP a la dirección URL utilizando cualquier lenguaje cliente de HTTP que esté disponible en el marco de trabajo con la siguiente configuración:

  • El cuerpo de la solicitud debe tener el mismo formato JSON que utilizó con la aplicación lógica:

    JSON
    {
        "task": "<description>",
        "due": "<date>",
        "email": "<email-address>"
    }
    
  • La solicitud debe contener el encabezado Content-Type: application/json.

  • Para optimizar el rendimiento, envíe la solicitud de forma asincrónica, si es posible.

Seleccione la pestaña del lenguaje o marco que prefiera para ver un ejemplo.

En ASP.NET, puede enviar la solicitud HTTP POST con la clase System.Net.Http.HttpClient. Por ejemplo:

C#
// requires using System.Net.Http;
var client = new HttpClient();
// requires using System.Text.Json;
var jsonData = JsonSerializer.Serialize(new
{
    email = "a-valid@emailaddress.com",
    due = "4/1/2020",
    task = "My new task!"
});

HttpResponseMessage result = await client.PostAsync(
    // requires using System.Configuration;
    ConfigurationManager.AppSettings["LOGIC_APP_URL"],
    new StringContent(jsonData, Encoding.UTF8, "application/json"));
    
var statusCode = result.StatusCode.ToString();

Si está probando este código en la aplicación de ejemplo de Tutorial: Compilación de una aplicación ASP.NET en Azure con SQL Database, podrá utilizarla para enviar una confirmación por correo electrónico en la acción Create después de agregar el elemento Todo. Para usar el código asincrónico anterior, convierta la acción Create en asincrónica.

Pasos siguientes