Tutorial: Send email and invoke other business processes from App Service

In this tutorial, you learn how to integrate your App Service app with your business processes. This is common to web app scenarios, such as:

  • Send confirmation email for a transaction
  • Add user to Facebook group
  • Connect to third-party systems like SAP, Salesforce, etc.
  • Exchange standard B2B messages

In this tutorial, you send emails with Gmail from your App Service app by using Azure Logic Apps. There are other ways to send emails from a web app, such as SMTP configuration provided by your language framework. However, Logic Apps brings a lot more power to your App Service app without adding complexity to your code. Logic Apps provides a simple configuration interface for the most popular business integrations, and your app can call them anytime with an HTTP request.

Prerequisite

Deploy an app with the language framework of your choice to App Service. To follow a tutorial to deploy a sample app, see below:

Create the logic app

  1. In the Azure portal, create an empty logic app by following the instructions in Create your first logic app. When you see the Logic Apps Designer, return to this tutorial.

  2. In the splash page for Logic Apps Designer, select When an HTTP request is received under Start with a common trigger.

    Screenshot that shows the splash page for the Logic Apps Designer with When an H T T P request is received highlighted.

  3. In the dialog for When an HTTP request is received, select Use sample payload to generate schema.

    Screenshot that shows the When an H T T P request dialog box and the Use sample payload to generate schema option selected.

  4. Copy the following sample JSON into the textbox and select Done.

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

    The schema is now generated for the request data you want. In practice, you can just capture the actual request data your application code generates and let Azure generate the JSON schema for you.

  5. At the top of the Logic Apps Designer, select Save.

    You can now see the URL of your HTTP request trigger. Select the copy icon to copy it for later use.

    Screenshot that highlights the copy icon to copy the U R L of your H T T P request trigger.

    This HTTP request definition is a trigger to anything you want to do in this logic app, be it Gmail or anything else. Later you will invoke this URL in your App Service app. For more information on the request trigger, see the HTTP request/response reference.

  6. At the bottom of the designer, click New step, type Gmail in the actions search box. Find and select Send email (V2).

    Tip

    You can search for other types of integrations, such as SendGrid, MailChimp, Microsoft 365, and SalesForce. For more information, see Logic Apps documentation.

  7. In the Gmail dialog, select Sign in and sign in to the Gmail account you want to send the email from.

    Screenshot that shows the Gmail dialog box that you use to sign into the Gmail account you want to send email from.

  8. Once signed in, click in the To textbox, and the dynamic content dialog is automatically opened.

  9. Next to the When an HTTP request is received action, select See more.

    Screenshot that shows the See More button next to When an H T T P request is received action.

    You should now see the three properties from your sample JSON data you used earlier. In this step, you use these properties from the HTTP request to construct an email.

  10. Since you're selecting the value for the To field, choose email. If you want, toggle off the dynamic content dialog by clicking Add dynamic content.

    Screenshot that shows the email option and Add dynamic contention option highlighted.

  11. In the Add new parameter dropdown, select Subject and Body.

  12. Click in the Subject textbox, and in the same way, choose task. With the cursor still in the Subject box, type created.

  13. Click in the Body, and in the same way, choose due. Move the cursor to the left of due and type This work item is due on.

    Tip

    If you want to edit HTML content directly in the email body, select Code view at the top of the Logic Apps Designer window. Just make sure you preserve the dynamic content code (for example, @{triggerBody()?['due']})

    Screenshot that shows the code view for viewing H T M L content directly in the email body.

  14. Next, add an asynchronous HTTP response to the HTTP trigger. Between the HTTP trigger and the Gmail action, click the + sign and select Add a parallel branch.

    Screenshot that shows the + sign and Add a parallel branch option highlighted.

  15. In the search box, search for response, then select the Response action.

    Screenshot that shows the the search bar and Response action highlighted.

    By default, the response action sends an HTTP 200. That's good enough for this tutorial. For more information, see the HTTP request/response reference.

  16. At the top of the Logic Apps Designer, select Save again.

Add HTTP request code to app

Make sure you have copied the URL of the HTTP request trigger from earlier. Because it contains sensitive information, it's best practice that you don't put it into the code directly. With App Service, you can reference it as an environment variable instead, using app settings.

In the Cloud Shell, create the app setting with the following command (replace <app-name>, <resource-group-name>, and <logic-app-url>):

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

In your code, make a standard HTTP post to the URL using any HTTP client language that's available to your language framework, with the following configuration:

  • The request body contains the same JSON format that you supplied to your logic app:

    {
        "task": "<description>",
        "due": "<date>",
        "email": "<email-address>"
    }
    
  • The request contains the heading Content-Type: application/json.

  • To optimize performance, send the request asynchronously if possible.

Click on the preferred language/framework tab below to see an example.

In ASP.NET, you can send the HTTP post with the System.Net.Http.HttpClient class. For example:

// 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();

If you're testing this code on the sample app for Tutorial: Build an ASP.NET app in Azure with SQL Database, you could use it to send an email confirmation in the Create action, after the Todo item is added. To use the asynchronous code above, convert the Create action to asynchronous.

More resources

Tutorial: Host a RESTful API with CORS in Azure App Service
HTTP request/response reference for Logic Apps
Quickstart: Create your first workflow by using Azure Logic Apps - Azure portal