Tutorial: Integración con Azure Logic Apps para enviar correo electrónico

En este tutorial, aprenderá a integrar la aplicación de App Service con los procesos empresariales mediante Azure Logic Apps. Cree una aplicación lógica que envíe correo electrónico a través de Gmail desde la aplicación de Azure App Service.

Hay otras maneras de enviar correos electrónicos desde una aplicación web, como el uso de la configuración del Protocolo de transferencia de correo simple (SMTP) en el marco de lenguaje. Sin embargo, Logic Apps proporciona una interfaz de configuración sencilla para muchas integraciones empresariales sin agregar complejidad al código.

Puede usar los pasos que se muestran en este tutorial para implementar varios escenarios comunes de aplicaciones web, como:

• Enviar un correo electrónico de confirmación para una transacción.
• Agregar usuarios al grupo de Facebook.
• Conexión a sistemas externos como SAP y Salesforce.
• Intercambio de mensajes B2B estándar.

Prerrequisitos

Debe tener los siguientes requisitos previos para completar este tutorial:

• Una cuenta de Gmail.

• Una cuenta de Azure con permiso para crear recursos.

• Una aplicación de Azure App Service implementada en el idioma que prefiera. Puede usar la aplicación de ejemplo de uno de los siguientes tutoriales:

  ASP.NET Core

  Tutorial: Compilación de una aplicación ASP.NET Core y SQL Database en Azure App Service

  ASP.NET

  Tutorial: Compilación de una aplicación ASP.NET en Azure con SQL Database

  Node.js

  Tutorial: Compilación de una aplicación Node.js y MongoDB en Azure

  PHP

  Tutorial: Creación de una aplicación PHP y MySQL en Azure

  Python

  Tutorial: Ejecución de una aplicación web Python (Django) con PostgreSQL en Azure App Service

---

Creación de la aplicación lógica

1. Cree una aplicación de consumo multiinquilino en Azure Logic Apps siguiendo las instrucciones de Creación de un recurso de aplicación lógica de consumo. Cuando se cree la aplicación, seleccione Ir al recurso.

2. En la página de la aplicación lógica, seleccione Diseñador de aplicaciones lógicas en Herramientas de desarrollo en el menú de navegación izquierdo.

Adición del desencadenador

1. Seleccione Agregar un desencadenador en el lienzo del diseñador de aplicaciones lógicas.

   

2. En la pantalla Agregar un desencadenadoren Herramientas integradas, seleccione Solicitar y, en la siguiente pantalla, seleccione Cuando se recibe una solicitud HTTP.

   

   El desencadenador aparece en el lienzo del diseñador.

3. En la pantalla Cuando se recibe una solicitud HTTP , seleccione Usar carga de ejemplo para generar el esquema.

   

4. Pegue el código siguiente en la pantalla Escribir o pegar una carga JSON de ejemplo y, a continuación, seleccione Listo.

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

   Azure genera el esquema para los datos de solicitud especificados. En la práctica, puede capturar los datos de solicitud reales del código de la aplicación y usarlos para generar el esquema JSON.

5. En la barra de herramientas superior del diseñador de aplicaciones lógicas, seleccione Guardar.

6. La dirección URL HTTP generada aparece ahora en dirección URL HTTP en la pantalla Cuando se recibe una solicitud HTTP . Seleccione el icono de copia para copiar la dirección URL que se usará más adelante.

   

La definición de solicitud HTTP es un desencadenador para cualquier cosa que quiera hacer en este flujo de trabajo de la aplicación lógica, como el envío de correo. Más adelante, invoque esta dirección URL en la aplicación de App Service. Para más información sobre el desencadenador de solicitud, consulte Recepción y respuesta a llamadas HTTPS entrantes enviadas a flujos de trabajo en Azure Logic Apps.

Creación del correo electrónico

Agregue una acción enviar correo electrónico y rellene el correo electrónico con las tres propiedades de solicitud HTTP que especificó anteriormente.

1. En el lienzo del diseñador, seleccione en + el desencadenador y seleccione Agregar una acción.

2. En la pantalla Agregar una acción, escriba gmail en el cuadro de búsqueda y seleccione 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.

3. En la pantalla Crear conexión , seleccione Iniciar sesión para autenticar el acceso a la cuenta de Gmail desde la que quiere enviar el correo electrónico.

   

4. Después de iniciar sesión, seleccione dentro del campo Para en la pantalla Enviar correo electrónico (V2) para mostrar el icono de contenido dinámico. Seleccione la parte superior del rayo del icono.

5. Aparece la lista de contenido dinámico, que muestra las tres propiedades de solicitud HTTP que especificó anteriormente. Seleccione correo electrónico en la lista.

   

6. En la pantalla Enviar correo electrónico (V2), el elemento de correo electrónico aparece en el campo Para . En la lista desplegable, en Parámetros avanzados, seleccione Asunto y Cuerpo.

   

7. Los campos Asunto y Cuerpo aparecen en la pantalla Enviar correo electrónico (V2). Seleccione en el campo Asunto para mostrar el icono de contenido dinámico y seleccione la tarea en la lista de contenido dinámico.

8. En el campo Asunto situado junto a la tarea, escriba un espacio seguido de creado.

9. Seleccione dentro del campo Cuerpo , muestre la lista de contenido dinámico y seleccione Due.

10. En el campo Cuerpo , mueva el cursor antes de que se deba y escriba Este elemento de trabajo debe ir seguido de un espacio.

    

Agregar una respuesta

Agregue una respuesta HTTP asincrónica al desencadenador HTTP.

1. En el lienzo del diseñador, seleccione entre + el desencadenador de solicitud HTTP y la acción de Gmail y seleccione Agregar una rama paralela.

   

2. En la pantalla Agregar una acción , escriba respuesta en el campo de búsqueda y, a continuación, seleccione Respuesta.

   

   De forma predeterminada, la acción de respuesta envía un HTTP 200, que es suficiente para este tutorial. Para más información, consulte Recepción y respuesta a llamadas HTTPS entrantes enviadas a flujos de trabajo en Azure Logic Apps.

3. Seleccione Guardar en la barra de herramientas del diseñador de aplicaciones lógicas.

Adición del código de solicitud HTTP a la aplicación de App Service

Debe evitar colocar información confidencial como la dirección URL del desencadenador de solicitud directamente en el código de la aplicación de App Service. En su lugar, puede hacer referencia a la dirección URL como una variable de entorno desde la configuración de la aplicación de App Service. El comando siguiente crea una variable de entorno denominada LOGIC_APP_URL para la dirección URL HTTP de la aplicación lógica.

1. En Azure Cloud Shell, ejecute el siguiente comando de la CLI de Azure para crear la configuración de la aplicación. Reemplace <app-name> y <resource-group-name> por los nombres de la aplicación y el grupo de recursos de App Service. Reemplace por <http-url> la dirección URL HTTP que copió de la aplicación lógica.

   az webapp config appsettings set --name <app-name> --resource-group <resource-group-name> --settings LOGIC_APP_URL="<http-url>"
   

2. En el código, realice una publicación HTTP estándar en la dirección URL de la aplicación lógica mediante un lenguaje de cliente HTTP disponible para el marco de lenguaje, con la siguiente configuración:

   • Asegúrese de que la solicitud contiene el encabezado Content-Type: application/json.

   • Use el mismo formato JSON que proporcionó a la aplicación lógica en el cuerpo de la solicitud:

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

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

   • Para obtener instrucciones de registro, consulte la documentación de su marco preferido.

Ejemplos de código de solicitud y respuesta de ejemplo

Seleccione su lenguaje o marco preferido para ver una solicitud y respuesta de ejemplo. Algunos ejemplos requieren usar o instalar paquetes de código.

ASP.NET Core

En ASP.NET Core, puede enviar la solicitud HTTP POST con la clase System.Net.Http.HttpClient. El ejemplo de código siguiente requiere usar System.Net.Http y System.Text.Json. Requiere HttpResponseMessage la configuración de inserción de dependencias (DI) para acceder a la configuración de la aplicación. Para obtener más información, consulte Variables de entorno de Access.

// requires using System.Net.Http;
var client = new HttpClient();
// requires using System.Text.Json;
var jsonData = JsonSerializer.Serialize(new
{
    email = "someone@example.com",
    due = "4/1/2025",
    task = "My new task!"
});

HttpResponseMessage result = await client.PostAsync(
    // Requires DI configuration to access app settings
    _configuration["LOGIC_APP_URL"],
    new StringContent(jsonData, Encoding.UTF8, "application/json"));
    
var statusCode = result.StatusCode.ToString();

Nota

Este código de demostración se escribe por motivos de simplicidad. En la práctica, no crea instancias de un HttpClient objeto para cada solicitud. Siga las instrucciones que se indican en Uso de IHttpClientFactory para implementar solicitudes HTTP resistentes.

Sugerencia

Si usa la aplicación de ejemplo de Tutorial: Compilación de una aplicación de ASP.NET Core y SQL Database en Azure App Service, puede usar este código para enviar una confirmación de correo electrónico en la acción Crear después de agregar un Todo elemento.

ASP.NET

En ASP.NET, puede enviar la solicitud HTTP POST con la clase System.Net.Http.HttpClient. El código requiere usar System.Net.Http, System.Text.Jsony System.Configuration.

// requires using System.Net.Http;
var client = new HttpClient();
// requires using System.Text.Json;
var jsonData = JsonSerializer.Serialize(new
{
    email = "someone@example.com",
    due = "4/1/2025",
    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();

Nota

Este código de demostración se escribe por motivos de simplicidad. En la práctica, no crea instancias de un HttpClient objeto para cada solicitud. Siga las instrucciones que se indican en Uso de IHttpClientFactory para implementar solicitudes HTTP resistentes.

Sugerencia

Si usa la aplicación de ejemplo de Tutorial: Compilación de una aplicación de ASP.NET en Azure con SQL Database, puede usar este código para enviar una confirmación por correo electrónico en la acción Crear después de agregar un Todo elemento. Para usar este código asincrónico, convierta la Create acción en asincrónica.

Node.js

En Node.js, puede enviar la publicación HTTP con un paquete npm como Axios, que puede instalar con npm install --save axios.

// Requires npm install --save axios
const axios = require('axios');

var jsonData = {
        email: "someone@example.com",
        due: "4/1/2025",
        task: "My new task!"
};

(async function(data) {
    try {
        const response = await axios.post(process.env.LOGIC_APP_URL, jsonData);
        console.log(response.status);
    } catch (error) {
        console.log(error);
    }
})(jsonData);

Nota

Si usa la aplicación de ejemplo de Tutorial: Compilación de una aplicación de Node.js y MongoDB en Azure, puede usar este código para enviar una confirmación por correo electrónico en la función de creación después de guardar el artículo correctamente.

PHP

En PHP, puede usar Guzzle para enviar la publicación HTTP. La respuesta requiere que Laravel ejecute Log::info(). Puede instalar ambos paquetes mediante Composer.

// Requires composer require guzzlehttp/guzzle:~6.0
use GuzzleHttp\Client;
...
$client = new Client();
$options = [
    'json' => [ 
        'email' => "someone@example.com",
        'due' => '4/1/2025',
        'task' => "My new task!"
    ]
];

$promise = $client-> postAsync(getenv($LOGIC_APP_URL), $options)->then( 
    function ($response) {
        return $response->getStatusCode();
    }, function ($exception) {
        return $exception->getResponse();
    }
);

$response = $promise->wait();
// Requires Laravel to run Log::info().
Log::info(print_r($response, TRUE));

Nota

Si usa la aplicación de ejemplo de Tutorial: Compilación de una aplicación PHP y MySQL en Azure, puede usar este código para enviar una confirmación por correo electrónico en la función Route::p ost, justo antes de la instrucción return.

Python

El siguiente código de Python usa solicitudes, que puede instalar con pip install requests.

# Requires pip install requests && pip freeze > requirements.txt
import requests
import os
...
payload = {
    "email": "someone@example.com",
    "due": "4/1/2025",
    "task": "My new task!"
}
response = requests.post(os.environ['LOGIC_APP_URL'], data = payload)
print(response.status_code)

Nota

Si usa la aplicación de ejemplo de Tutorial: Ejecución de una aplicación web de Python (Django) con PostgreSQL en Azure App Service, puede usar este código para enviar una confirmación de correo electrónico en la función Route::p ost, justo antes de la instrucción return.

Contenido relacionado

• Tutorial: Hospedaje de una API RESTful con CORS en Azure App Service
• Recepción y respuesta a llamadas HTTPS entrantes enviadas a flujos de trabajo en Azure Logic Apps
• Inicio rápido: creación de un ejemplo de flujo de trabajo de consumo en Azure Logic Apps multiinquilino: Azure Portal
• Variables de entorno y configuración de la aplicación en Azure App Service