Integrate Azure API Management with your Teams App and export the api to power app - OfficeDev/TeamsFx GitHub Wiki

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 Microsoft Entra app used to visit the backend API. You can register a new Microsoft Entra 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

Add the the client id of the client Microsoft Entra app to env/.env.dev.
```
APIM_CLIENT_AAD_CLIENT_ID=<your-apim-client-aad-client-id>
```
Add client secret of the client Microsoft Entra app to env/.env.dev.user.
```
APIM_CLIENT_AAD_CLIENT_SECRET=<your-apim-client-aad-client-secret>
```

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}}"
    }
  }
}

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}'

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 Microsoft Entra created by Teams Toolkit

Add the client id of the client Microsoft Entra to the knownClientApplications in the file aad.manifest.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 Microsoft Entra created by Teams Toolkit

The value of AAD_APP_CLIENT_ID can be found in environment file env/.env.dev.
Create the service principle.
- Use Azure CLI Login with M365 account.
```
az login
az ad sp create --id ${AAD_APP_CLIENT_ID}
```
- Use Azure Portal
  1. Sign in to the Azure portal.
  2. Search for and select Microsoft Entra.
  3. Under Manage, select App registrations.
  4. Select your application with client id AAD_APP_CLIENT_ID.
  5. Click Create Service Principle.

Configure the client APP registration to visit the backend API

To configure the client APP registration to access the Teams App Backend API, the permission of Teams App should be added to the client Microsoft Entra.

Sign in to the Azure portal.
Search for and select Microsoft Entra.
Under Manage, select App registrations.
Select your client application with client id APIM_CLIENT_AAD_CLIENT_ID.
Select API permissions > Add a permission > My APIs.
Select the web API with the client id AAD_APP_CLIENT_ID which registered by Teams Toolkit.

You can learn more from Here.

Deploy the API in API management

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