Web API Using Power Apps Custom Connector

This tutorial will discuss how to create an ASP.Net Web application and use this web API in power app using a custom connector.

1. Create a new ASP .Net Web application project using Visual Studio
2. Build, Deploy & Secure a Web API in Azure
3. Connect API To Power Apps Using Custom Connector

1. Create a new ASP .Net Web application project using Visual Studio

Open visual studio 2019, select ASP.NET web application (.Net Framework), give the project name, and click Create.

On the next screen, as shown below, select Web API and click on Create.

Add a new empty controller to the project. Right click on the “Controllers” folder & select Add -> Controller -> Web API 2 Controller -Empty. Name this "ProductsController" as shown in the below screen shorts.

The Project structure looks like below format.

Next step, right click on the “Models” folder & select Add -> cs file-> and name it “ProductsControllers.cs”.

Add a new empty controller to the project. Right click on the “Controllers” folder & select Add -> Controller -> Web API 2 Controller -Empty. Name this "ProductsController"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using static DemoWebAPICanvasapp.Models.ProductsControllers;
namespace DemoWebAPICanvasapp.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[]
        {
            new Product { Id = 1, Name = "RICE", Category = "Groceries", Price = 1500 },
            new Product { Id = 2, Name = "Fish", Category = "SeaFood", Price = 500 },
            new Product { Id = 3, Name = "Fruits and vegetables", Category = "vegetables", Price = 100 }
        };
        public IEnumerable<Product> GetAllProducts()
        {
            return products;
        }
        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }
}

Our API returns will return the response as XML. We will modify the code such that the API returns the response as JSON. In the "WebApiConfig.cs" add a new class as shown below.

public class BrowserJsonFormatter : JsonMediaTypeFormatter
{
    public BrowserJsonFormatter()
    {
        this.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));
        this.SerializerSettings.Formatting = (Newtonsoft.Json.Formatting)Formatting.Indented;
    }
    public override void SetDefaultContentHeaders(Type type, HttpContentHeaders headers, MediaTypeHeaderValue mediaType)
    {
        base.SetDefaultContentHeaders(type, headers, mediaType);
        headers.ContentType = new MediaTypeHeaderValue("application/json");
    }
}

Resolve the reference errors by adding the following namespaces.

using System.Net.Http.Formatting;
using System.Net.Http.Headers;
using System.Web.Http;
using System.Xml;

In the "Register" function of the "WebApiConfig" class, add the newly created Formatter

config.Formatters.Add(new BrowserJsonFormatter());

Build and Run the app – Browse to the URL – http://localhost: {portnumber}/api/products. You should observe the response being returned as JSON

2. Build, Deploy & Secure a Web API in Azure

Now Let’s publish the app to Azure. Right click on the project and select "Publish".

Select Azure and Click on "Next". Click on Next and choose "Azure App Service" as you publish target and click Next from the Azure App service window. Select "Create New". Also, choose "Create Profile" to modify the app service details.

On the next screen, choose the “Azure App Service(Windows)" and click next.

We need to select the subscription name, Resource group, and app service instance from Azure; if you don’t have an app service instance please create new app service instance by clicking “+” as shown in below screen; after filling in all  information click on finish and click on publish.

Currently, we are having the API has anonymous access. We will now secure the API with Azure AD Authentication.

Log in to the Azure Portal. Under "App Services", select the App service that we just provisioned above. Select "Authentication" and click on Add provider and in Identity provider as “sign in Microsoft and Azure AD identities and call Microsoft API’s” as shown in the below screenshot.

3. Connect API To Power Apps Using Custom Connector

For Power Apps to access the secure API, we will need to register a client application in Azure AD.

Log in to the Azure Portal and navigate to Azure Active Directory. In the left navigation, select “App Registrations” and select “New Registration”.

Enter a name for your app and select the kind of accounts you want to give access to the API.

For the types of accounts supported in this case, we select “Multitenant”. We wanted to access our API in a different tenant leave the “Redirect Uri” as blank for now and click on “Register”.

From the “Overview” section, make a note of the “Client ID” & “Tenant ID”. Keep this handy; we will need these details when we configure the custom connector.

Click on “API Permissions” from the left navigation and click “Add a permission”. From the side pane that opens, search for your app & select the app.

In the “Request API permissions”, Choose “Delegated Permissions” and select “user_impersonation”.

This will allow the client to access our API for the signed in user. Also, the user will be shown the consent form before accessing the API. Click on “Add permissions”.

Next, we need to Generate a “Client secret” for the app.

From the left navigation, select “Certificates & secrets”  under “Client Secret”, and click on “New client secret”. Choose when you want the secret to expire from the available choice and click on “Add”.

The secret will be displayed only once. Note the secret ID  and keep it handy for later use, as shown in the screenshot below for reference.

Let’s now create our custom connector in the canvas app. Navigate to Power Apps. In the left navigation and Mouse over on customer connectors, a pop will show at the bottom. We can see discover all click on that it will navigate to a different screen; there in the Data section, we click on customer connector as shown in below screens.

A new window will get open; on top right, click on New custom connector and select create from blank.

On the next screen, fill the details under the “General Information” tab in the “Host” field, input the URL of the API without the scheme, and click on security.

In the “Security Tab” select API Key in authentication type and fill parameter label and parameter name; while connecting API to the app we need to enter our client Id and Secret Id.

Click on “Create Connector” and Copy the “Redirect URL” that was auto-generated.

Navigate to the app we registered above for the client in the Azure Portal, from the “Overview” section. Click on “Add a redirect URI”.

Navigate to the app we registered above for the client in the Azure Portal. From the “Overview” section. Click on “Add a redirect URI”.

Under “Platform Configurations”, click on “Add a platform” and input the redirect URI that we had just copied.

Go back to the custom connector under the “Definition” tab. Choose “Actions” and add a “New Action”. Input the details under the “General” section as shown below. Note: The “Operation ID” will be the function that will be used in the Power Apps app.

Under the “Request” section, click on “Import from sample”. Select “Get” for the Verb & the URL will point to the “Products” endpoint. Click on “Import” as shown on below screen.

In the “Response” section, click on “Add default response”. For the “Body” field, specify the payload you expect from the API for this request. Click on “Import”. Click on “Import”.

Finally, we can test our customer connecter from the test tab by selecting our connection, as shown below.

Create a blank canvas app & add a gallery control to the screen. For “Data Source” click on Add data, search for our API “WebAPIGetProducts” and connect it.

Add a gallery to our canvas app to display our items from API.

For the items property, select “WebAPIGetProducts.GetAllProducts()” and in the label property select thisItem.Category as shown in the below screens.