Skip to content
Kunal Kankariya
  • Home
  • About
Search

Home » Connect To A Secure Web API Using Power Apps Custom Connector – Part 2

network 1027305 1280

Connect To A Secure Web API Using Power Apps Custom Connector – Part 2

1 Comment / Power Apps / May 26, 2020 July 16, 2020

This is the second part in the series of a blog post. In the first part we had a look at the process of deploying & securing a Web API using Azure Active Directory authentication. In the second part, we will have a look at the process of consuming the API using a Power Apps custom connector.

Part 1 : Build, Deploy & Secure a Web API using Azure Active Directory Authentication 
Part 2 : Connect API to Power Apps using custom connector

Part 2 : 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. Login to the Azure Portal and navigate to Azure Active Directory. In the left navigation select “App Registrations” and select “New Registration”.

cc 1 3

Enter a name for your app and select the kind of accounts you want to give access to the API. The types of accounts supported are self-explanatory and are explained well. In this case, we select “Single Tenant” as we want only users in this tenant to access this app.

cc 2

In the following screen. 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 on “Add a permission”. From the side pane that opens, search for your app & select the app.

cc 4

In the “Request API permissions”, Choose “Delegated Permissions” and select “user_impersonation”. This will allow the client to access our API on behalf of the signed in user. Also, the user will be shown the consent form before accessing the API. Click on “Add permissions”.

cc 5

Generate a “Client secret” for the app and make a note of it. From the left navigation select “Certificates & secrets”. Under “Client Secret”, 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. Copy the secret and keep it handy for later use.

cc 8 1

Let’s create our custom connector now. Go to Power Apps. In the left navigation, under “Data”, select “Custom Connectors”.

cc 6

Click on “New Custom Connector” and choose “Create from blank”. Choose a name for the connector and click on “Continue”. Fill the details under the “General” tab. For the “Host” field, input the URL of the API without the scheme.

cc 7 1

Input the following details under the “Security Tab” :
Authentication Type : OAuth 2.0
Identity Provider : Azure Active Directory
Client Id : The client Id from the app registration that we just completed above.
Client Secret : The client secret from the app registration that we just completed above.
Resource URL : URL of the API
Scope : user_impersonation
Click on “Create Connector” and Copy the “Redirect URL” that was auto-generated.

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

cc 9

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 “General” section as shown below. Note : The “Operation ID” will be the function that will be used in the Power Apps app.

Power Apps Custom Connector

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”

cc 11

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

cc 12

Select the “Test” tab. Under “Connections”. Select “New Connection” & click on “Create”. You will asked to login & a consent screen will be shown. Click on “Accept”.

cc 13

Go back to the connector and switch to the “Test” tab. Under “Operations” for “GetAllProducts” click on “Test Operation”. Observer the response & status code.

cc 14

Lets add another operation to get the product by Id. Repeat the steps outlined above for the “Definition” tab. The only change will be the Sample “Request” & “Response”. For request, the URL will be as shown below

cc 15

Add a default response & save the connector. Go to the “Test” tab & test the operation.

cc 16

The custom connector is now ready and be consumed by a Power Apps application.

To test this, create a blank canvas app & add a gallery control to the screen. For “Data Source” select the “Products API” and your connection.

cc 17

For the items property select “ProductsAPI.GetAllProducts()”. Add labels & display and select the fields to display. I have also added a label outside the gallery to display the “Category” of product with ID “2”.

cc 18

This custom connector can now be used in Azure Logic Apps & Power Automate as well.

close

Oh hi there! 👋
It’s nice to meet you.

Subscribe to receive awesome content in your inbox, every week.

I don’t spam! Read my privacy policy for more info.

Thank you! Check your inbox or spam folder to confirm your subscription.

Spread the love

Related Posts:

  • Connect to a Secure Web API Using Power Apps Custom Connector - Part 1
    Connect to a Secure Web API Using Power Apps Custom…
  • How To Publish Power Virtual Agent Bot to a custom website
    How To Publish Power Virtual Agent Bot to a custom website
  • Use msal-browser in SPFx solutions to access Graph API
    Use msal-browser in SPFx solutions to access Graph API
  • Community plan - Power Apps
    Community plan - Power Apps
  • Power Apps - Group vs Container Control
    Power Apps - Group vs Container Control
  • Power Apps Build Tools - Automate ALM
    Power Apps Build Tools - Automate ALM

Post navigation

← Previous Post
Next Post →

1 thought on “Connect To A Secure Web API Using Power Apps Custom Connector – Part 2”

  1. Pingback: Build a Power Virtual Agent bot and integrate Power Automate flow

Leave a Comment Cancel Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Connect

Categories

  • .Net (2)
  • Authentication (2)
  • Azure Logic Apps (1)
  • Information Governance (1)
  • Information Protection (3)
  • Microsoft Teams (1)
  • msal (2)
  • Power Apps (6)
  • Power Automate (1)
  • Power Virtual Agent (3)
  • SharePoint (5)

Tag Cloud

AAD ALM Azure Azure App Azure DevOps Azure Logic Apps Bot browserautherror Build Tools canvas app CDS Computer Vision container controls Custom Connector Excel group Information governance Information protection Lists m365 microsoft 365 Microsoft Information Protection MIP msal msal-broswer MS Teams oAuth Office 365 Plans Power Apps PowerApps Power Automate Power Platform Power Virtual Agent Pricing PVA Secure security & compliance Sensitivity Labels SharePoint Spfx Web API webinar webparts
Copyright © 2022 Kunal Kankariya
  • Privacy Policy
  • Home
  • About