In this blog post, I will show you how to create a Microsoft Teams tab app that can convert various types of documents into PDF format and then merge them into a single document pack. This app will use the Microsoft Graph API to perform the conversion and merging operations and will leverage the Teams Toolkit v5.0 to enable single sign-on (SSO) authentication. The app will also use an Azure function as its backend to handle the communication with the Graph API.
Set up and install Teams Toolkit for Visual Studio Code v5.0 How to install Teams Toolkit v5.0.
Node.js, supported versions: 14, 16, 18
The following steps will guide you through the process of building this app:
- Open Visual Studio Code and install the Teams Toolkit extension from the marketplace.
- Click on the Teams icon on the left sidebar and then click on “Create a new Teams app”.
- Choose “Tab” as the app type
- Choose React with Fluent UI option under App Features Using a Tab
- Select Typescript as programming language
- Select the folder that will contain your project’s root folder
- Enter the Application name as “DocumentPack”
Add the following two parameters in the .env.local file
Update Microsoft Graph API permissions in aad.manifest.json file.
Create an API folder on the root of the project. We will create an Azure function within the api folder in the following steps.
Update the environment variables step to the following. Visit this link for more detail about Provision cloud resources.
# Generate runtime environment variables
The next step is to create an Azure Function. Azure Functions are small, event-driven code snippets that run in the cloud. They are a great way to interact with the Microsoft Graph API.
To create an Azure Function, follow these steps:
- Create HTTP triggered Azure function using Visual Studio within the api folder created in the previous steps
- Install the following nuget packages
dotnet add package Azure.Identity
- You need to copy the following parameters from the api/.localConfigs files and paste them into local.settings.json
|M365_CLIENT_ID||Your AAD App client id|
|M365_CLIENT_SECRET||Your AAD App client secret|
|M365_AUTHORITY_HOST||Authority host for your AAD|
|M365_TENANT_ID||Tenant id for your AAD tenant|
|ALLOWED_APP_IDS||List of client ids which are allowed to call the function app. Split by semicolon ‘;’|
Your Azure Function app is public to any client. With TeamsFx binding extension, your function can reject unauthorized clients. Visi this link for more detail Microsoft.Azure.WebJobs.Extensions.TeamsFx
TeamsFx function extension does the following work for Teams app developers:
- Do authorization for HTTP trigger:
- Http request must have an Authorization header with an access token, the client id of which should be in the list of ALLOWED_APP_IDS or equal to M365_CLIENT_ID setting.
- Refresh the user access token in the request header if it’s about to expire.
- Provide user access token in TeamsFxContext as Azure Functions input binding.
Following are the activities that will be performed by the Azure function
- Retrieve the access token from the request using TeamFx bindings
- Creating a Microsoft graph client using OnBehalfOfCredential using Azure.Identity
- Getting current user OneDrive root folder Id
- Process for each uploaded file
- Create a temp file in OneDrive
- Convert to pdf
- Remove the temp file
- Merge all pdf files into a single document pack and upload the document pack to OneDrive
First, select the Teams Toolkit icon on the left in the VS Code toolbar.
In the Account section, sign in with your Microsoft 365 account if you haven’t already.
Press F5 to start debugging which launches your app in Teams using a web browser. Select
When Teams launches in the browser, select the Add button in the dialog to install your app to Teams.
Consent the Graph API permissions via the consent prompt
Navigate to the api folder and open the Azure function in Visual Studio. Start debugging the Azure function project parallelly as well.
You can find the complete source code from GitHub.