Integrate Azure API Management with your Teams App and export the api to power app

Integrate Azure API Management with your Teams App and export the api to power app

Introduction

Azure API Management enables professional developers to publish their Teams App backend service as APIs, and easily export these APIs to the Power Platform (Power Apps and Power Automate) as custom connectors for discovery and consumption by citizen developers.

Prerequisites

• A Teams tab app with Azure Functions. Sample
• A client Azure AD app used to visit the backend API. You can register a new Azure AD app add a client secret according to this document. Both the client app and the web API app must be registered in the same tenant.

Add Azure API Management resource in Azure

1. Add the the client id and client secret of the client Azure AD app to teamsfx/.env.dev.

   APIM_CLIENT_AAD_CLIENT_ID=
   APIM_CLIENT_AAD_CLIENT_SECRET=
   

2. Update the parameter file infra/azure.parameters.json.

   {
     "$schema": "https://schema.management.azure.com/schemas/2015-01-01/deploymentParameters.json#",
     "contentVersion": "1.0.0.0",
     "parameters": {
       ...
       "publisherEmail": {
         "value": "[email protected]"
       },
       "publisherName": {
         "value": "[email protected]"
       },
       "apimServiceSku": {
         "value": "Consumption"
       },
       "apimClientAadClientId":{
         "value": "${{APIM_CLIENT_AAD_CLIENT_ID}}"
       },
       "apimClientAadClientSecret":{
         "value": "${{APIM_CLIENT_AAD_CLIENT_SECRET}}"
       }
     }
   }
   

3. Update the bicep file infra/azure.bicep, add apimClientAadClientId to authorizedClientApplicationIds of the function app.

   param apimClientAadClientId string
   var authorizedClientApplicationIds = '${apimClientAadClientId};${teamsMobileOrDesktopAppClientId};${teamsWebAppClientId};${officeWebAppClientId1};${officeWebAppClientId2};${outlookDesktopAppClientId};${outlookWebAppClientId}'
   

4. Update the bicep file infra/azure.bicep to create API management resources.

   param apimServiceName string = resourceBaseName
   param apimProductName string = resourceBaseName
   param apimServiceAuthServerName string = resourceBaseName
   param apimApiName string = resourceBaseName
   
   param publisherEmail string
   param publisherName string
   param apimServiceSku string
   param apimClientAadClientSecret string
   
   var authorizationEndpoint = uri(aadAppOauthAuthorityHost, '${aadAppTenantId}/oauth2/v2.0/authorize')
   var tokenEndpoint = uri(aadAppOauthAuthorityHost, '${aadAppTenantId}/oauth2/v2.0/token')
   var scope = '${aadApplicationIdUri}/.default'
   var apimOpenApiDocument = loadTextContent('openapi.json')
   
   resource apimService 'Microsoft.ApiManagement/service@2022-04-01-preview' = {
     name: apimServiceName
     location: location
     sku: {
       name: apimServiceSku
       capacity: 0
     }
     properties: {
       publisherEmail: publisherEmail
       publisherName: publisherName
     }
   }
   
   resource apimServiceProduct 'Microsoft.ApiManagement/service/products@2022-04-01-preview' = {
     parent: apimService
     name: apimProductName
     properties: {
       displayName: apimProductName
       description: 'Created by TeamsFx.'
       subscriptionRequired: false
       state: 'published'
     }
   }
   
   resource apimAuthorizationServers 'Microsoft.ApiManagement/service/authorizationServers@2022-04-01-preview' = {
     parent: apimService
     name: apimServiceAuthServerName
     properties: {
       displayName: apimServiceAuthServerName
       description: 'Created by TeamsFx.'
       clientRegistrationEndpoint: 'http://localhost'
       authorizationEndpoint: authorizationEndpoint
       authorizationMethods: [
         'GET'
         'POST'
       ]
       clientAuthenticationMethod: [
         'Body'
       ]
       tokenEndpoint: tokenEndpoint
       defaultScope: scope
       grantTypes: [
         'authorizationCode'
       ]
       bearerTokenSendingMethods: [
         'authorizationHeader'
       ]
       clientId: apimClientAadClientId
       clientSecret: apimClientAadClientSecret
     }
   }
   
   resource api 'Microsoft.ApiManagement/service/apis@2022-04-01-preview' = {
     parent: apimService
     name: apimApiName
     properties: {
       displayName: apimApiName
       apiRevision: '1'
       subscriptionRequired: false
       serviceUrl: '${apiEndpoint}/api'
       path: apimApiName
       protocols: [
         'https'
       ]
       authenticationSettings: {
         oAuth2AuthenticationSettings: [
           {
             authorizationServerId: apimServiceAuthServerName
           }
         ]
         openidAuthenticationSettings: []
       }
       subscriptionKeyParameterNames: {
         header: 'Ocp-Apim-Subscription-Key'
         query: 'subscription-key'
       }
       isCurrent: true
       format: 'openapi+json'
       value: apimOpenApiDocument
     }
     dependsOn: [
       apimAuthorizationServers
     ]
   }
   

Configure the AAD created by Teams Toolkit

Add the client id of the client AAD to the knownClientApplications in the file aad.manifest.template.json.

{
  "id": "${{AAD_APP_OBJECT_ID}}",
  "appId": "${{AAD_APP_CLIENT_ID}}",
  "knownClientApplications": [
    "${{APIM_CLIENT_AAD_CLIENT_ID}}"
  ],
  ...
}

Add the OpenAPI document

Add the OpenAPI document of the backend APIs to infra/openapi.json. The following is an example.

{
    "openapi": "3.0.1",
    "info": {
        "title": "sample-backend-api",
        "version": "v1"
    },
    "paths": {
        "/getUserProfile": {
            "get": {
                "summary": "Get User Profile",
                "operationId": "get-user-profile",
                "responses": {
                    "200": {
                        "description": "200 response",
                        "content": {
                            "application/json": {
                                "schema": {
                                    "type": "object",
                                    "properties": {
                                        "receivedHTTPRequestBody": {
                                            "type": "string"
                                        },
                                        "userInfoMessage": {
                                            "type": "string"
                                        },
                                        "graphClientMessage": {
                                            "type": "object"
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

Provision the resources

Run Teams: Provision in the cloud command in Visual Studio Code to apply the bicep to Azure.

Create the service principle for the AAD created by Teams Toolkit

1. The value of AAD_APP_CLIENT_ID can be found in environment file teamsfx/.env.dev.
2. Create the service principle.
   • Azure CLI

     az login
     az ad sp create --id ${AAD_APP_CLIENT_ID}
     

   • Azure Portal

Configure the client APP registration to visit the backend API

1. To configure the client APP registration to access the Teams App Backend API, the permission of Teams App should be added to the client AAD. Here are the detail steps.

Deploy the API in API management

You can upload the OpenAPI specification of the backend API in Azure Portal according to this document.