PowerApps - Call Microsoft Graph API in Canvas App

Introduction

Hello Everyone,

Hope you all are doing great and staying safe!

Today, in this blog I am gonna share PowerGuideTip23, where I'll show you a way to call Microsoft Graph API in Canvas App. This article is also helpful for all those folks, who are looking for a Step by Step guidance to call Custom Connector in PowerApps.

If you are yet to know the fundamentals of Microsoft Graph API. Please check my this article first.

There are many business requirements, where you need to collect information about Logged In-App users from Azure Active Directories like User's Security Roles, Security Group, License, Profile details, and much more. Apart from collecting information from Azure AD, you may also need to perform operations in Microsoft Teams, Office 365, SharePoint, and many other applications as well directly through Canvas App.

Let's get started and check how to use Microsoft Graph API in your Canvas App.

Prerequisites -

• Azure Subscription (Trial is also fine)
• Global Admin rights on Azure AD.
• PowerApps License (Trial is also fine)
• Graph Explorer to test the Microsoft Graph API.

Implementation

Azure AD App Registration

Step 1 - Open Azure Portal.

Step 2 - Click on Manage Azure Active Directory > View.

Step 3 - Select the App registrations option from the left panel and click on the + New registration

button to register a new application.

Step 4 - Provide the Name of the application "PowerAppsConnectorApp" and click on Register.

Step 5 - Copy the Application ID for later use.

Step 6 - Generate a Secret Key and Copy it for later use

Step 7 - Configure API Permission to call Graph API and perform the operation in Azure AD.

Step 8 - Hit Grant admin consent. You need to have the appropriate rights (Global Admin) to perform this action. 

Create a Custom Connector in PowerApps to call Graph API

Step 1 - Open PowerApps Creation Page. Click here

Step 2 - Expand the Data section and Click on Custom Connectors from the left panel.

Step 3 - Click on + New Custom Connector and select Create from blank.

Step 4 - Provide the Name of the Connector and hit Continue.

Step 5 - Provide the Connector details in 3 sections (General, Security, and Definition) as per below

General Section

Security Section

• Provide the Client Id and Client Secret key copied in the earlier step
• Set Login URL to -  https://login.windows.net
• Go to the Resource URL section and update the value as https://graph.microsoft.com

Definition Section

In the Operation ID section, we need to provide the operation/function name that we will call from the canvas app to get the API response.

• Open Graph Explorer (https://developer.microsoft.com/en-us/graph/graph-explorer#) in another tab.
• Test the Graph API
• Copy the Request and Response information for later use

Click on Import from Sample > Choose Get Method > Paste the Graph API URL > Hit Import (as shown below)

Since, In this demo I want to retrieve only logged in powerapps user information from Azure AD, Hence, I have used /V1.0/me/. You can change the API URL as per your business need.

Same for the API Response. Click on + Add default response and paste the Response JSON (copied from Graph Explorer above) under the Body section (as shown below). And then Hit Import

Step 6 - Hit Create Connector

Step 7 - Navigate back to Security and copy the Redirect URL. 

Step 8 - Go to Azure Portal > Open your App > Click on Redirect URI > Click on + Add platform  > Select Web > Paste the URL > Click on Configure

Step 9 - Test the Connector

You must get the same response as Graph Explorer.

Create a Canvas App and use the Custom Connector

Step 1 - Create a new Canvas App or can open your existing app as well.

Step 2 - Add a Blank screen and some Text Input controls and one Button as per below

Step 3 - Go to View > Data Sources and Add our Custom Connector in the App.

Step 5 - Add the formula to call custom connector on OnSelect property of the button.

UpdateContext({UserProfile:PowerUserConnector.getmyuserdetails()})  

In this formula, I have captured the response returned from the Graph API in a Local Variable (UserProfile), so that later, I could use it to set the value in Text Input Controls.

Step 6 - Set the value in Text Input controls retrieved from the Custom Connector.

Test & Demo