Skip to content

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

Zhiyu You edited this page Oct 27, 2023 · 7 revisions

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

  1. 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>
    
  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 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

  1. The value of AAD_APP_CLIENT_ID can be found in environment file env/.env.dev.
  2. 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. image

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.

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

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.

Clone this wiki locally