Neil Haddley - Developer & Technical Consultant

Power Apps, Custom Connectors and Application Registrations

Neil Haddley • August 9, 2021

Power Apps, Custom Connectors and Application Registrations

Creating a Custom Connector

To create a PowerApps Azure Active Directory Custom Connector the following values must be provided:

Client id

Client secret; and

Resource URL

Custom Connector OAuth 2.0 Active Directory settings

The Custom Connector is the Client Application

In OAuth 2 an application accesses a resource on behalf of a user.

In OAuth 2 the application does not store the user's username and password.

When setting up a Power Apps Custom Connector that will allow a user to access an API Service the Client Application is the Custom Connector and the Resource (Application) is the API Service.

Only three values are needed to create a Power Apps Custom Connector.

The three values needed to create a Power Apps Custom Connector are: the Client id (the client application registration ID), the Client secret (password); and the Resource URL (the resource application registration ID)

Here I will extend the Vanilla JavaScript single-page application (SPA) using MSAL.js to authorize users for calling a protected web API on Azure AD tutorial to show how to configure a Power Apps Custom Connector using Azure application registrations.

topology_callapi by Doğan Erişen is licensed under MIT License

A JavaScript tutorial using MSAL

The Vanilla JavaScript single-page application (SPA) using MSAL.js to authorize users for calling a protected web API on Azure AD tutorial demonstrates how to configure Azure Application Registrations for an API and for a Single Page Web Application (SPA) that calls an Application Programming Interface Service (API).

I cloned the git repository using this command:

BASH

1% git clone https://github.com/Azure-Samples/ms-identity-javascript-tutorial.git

esp8266

Resource application registration

Before updating the Application Programming Interface (API) Service I needed to create the resource application registration.

Create the resource application registration

Provide the resource name

Copy the "Application (client) ID" value.

Resource URL

The "Application (client) ID" value from the resource application registration is the Resource URL value we will need later to create the custom connector.

be70217c-6a30-4023-b667-d88bf222b94a

This resource is an API Service so click the "Expose an API" menu item

Click the Set link

Save the generated Application ID URI (the URI api:// followed by the resource application client ID)

esp8266

The resource must provide at least one scope

I added the "access_as_user" scope.

I updated the application registration manifest

The application registration manifest provides a way to export and update application registration settings.

The Directory (tenant) ID is a tenant wide setting (by definition)

The sample API code has been updated to include the tenantID and the clientID.

Client application registration

If I was following the Vanilla JavaScript single-page application (SPA) using MSAL.js to authorize users for calling a protected web API on Azure AD tutorial I would create the client application registration for a Single Page Application (SPA) next.

Instead I will create a client application registration for the Power Apps Custom Connector.

Notice that the redirect url has been set to https://global.consent.azure-apim.net/redirect

Copy the Application (client) ID

Client id

The "Application (client) ID" value from the client application registration is the Client id we will need later to create the custom connector.

59259fa1-c2e1-486d-a8e6-92209abf090c

The client application will be allowed to access the resource application registration (the API)

Click the + Add a permission link

Select the "My APIs" tab

Select the resource application registration (the API)

Click the access_as_user checkbox

The access_as_user scope has been added

Click the Authentication menu item and enable "Access tokens"

Click on the Certificates & secrets menu item.

Add a client secret

Copy the "client secret" value

Client secret

The generated "Value" is the Client secret we will need to create the custom connector.

.ljDa4a7mFqn1tWj0wyPQ6X5L6B_3V.x~f

Create a new custom connector (from blank)

Provide a name for the custom connector

Enter the url of the host the API service. Enter the base URL (if applicable)

Select Authentication type OAuth 2.0

Select "Azure Active Directory" as the Identity Provider

Enter the Client id, Client secret and Resource URL value.

This API publishes a single action

Provide a name for each action

Click Import from sample to describe the action

In this case the path /api/ should return identity information

The action request has been described

Click the + Add default response link

Provide an example API response.

Click on the tick to create the custom connector

Click the + New connection link to create a new connection

Click Create

Provide value Azure Active Directory credentials

Consent

The connection has been created

Test the operation

Create a PowerApp Canvas app

Select the data menu item and click the Add data button

Select the Identity connection

Notice that using the Identity Connection requires a Premium PowerApps license

Add a button to the app screen. Use the ClearCollect operation to call the API.

Run the app

Switch to the Colllections page to see the results of the API call

Add the collection to a Vertical gallery control

Enterprise Applications

A service principal is created in each tenant where the application is used.

The service principle in each tenant references the globally unique application registration.

The service principal defines what the app can do in the specific tenant, who can access the app, and what resources the app can access.

The service principal objects are what you see when you select the Enterprise applications page.